Cloud Pak for Business Automation

Cloud Pak for Business Automation

Come for answers. Stay for best practices. All we’re missing is you.

 View Only

Cloud Pak for Business Automation: Calling Automation Services on Page Load and Configuring Data Validation in Business Application

By Walfrey Ng posted Fri December 17, 2021 06:32 PM

  

IBM Business Automation Application Designer is a low-code tool in IBM Business Automation Studio that enables business users to build business user interfaces, called applications, that integrate the capabilities from the platform.  To allow business users to quickly and easily build an application, in 21.0.3 December 2021 release, we have also added capabilities, for example, to allow users to easily call automation services on page load and to configure data validation on application pages. 

 

In this blog, we would like to provide a tutorial on how you can build an application that leverages these 2 capabilities:

Call automation services on page load

When building an application, you can now choose to call an automation service when the page loads. After you drag an automation service from the right-hand side palette to the page, you now have a choice to call the automation service not only when a button is clicked, but also when the page loads.

Configure data validation on application pages

When building an application, you can now mark a data item as required; and validate the value of the data item if it has restriction defined, for example, regular expression for String or minimum value for Integer.  You can also define how validation errors are handled, for example, staying on the page or disabling a button when errors exist.

 

Here are the high-level scenarios that we will go through in this tutorial:

  • Pre-requisite: Create a Workflow Automation Service called LoanApproval with 2 operations (requestLoanApproval and assessLoanRisk) that will be used by the application
  • Scenario 1: Create a Loan Approval Request page in the Application with the necessary input fields required by LoanApproval Automation Service (Operation requestLoanApproval), and create a Confirmation page also
  • Scenario 2: Configure data validation for the input fields on the Loan Approval Request page and define how validation errors are handled.
  • Scenario 3: Update the Confirmation Page to display the confirmation information
  • Scenario 4: Configure to call LoanApproval Automation Service (Operation assessLoanRisk) on page load so that the confirmation page can also display the assessment whether the request is high risk or not.

 

 

Pre-requisite: Create a Workflow Automation Service called LoanApproval

After you login to IBM Cloud Pak for Automation, go to “Business Automations” by using the Hamburger menu at the top left hand side of the header (see screen shot below) and then select “Workflow”.  To create a Workflow Automation, click “Create”, select “Workflow automation” (see screen shot below) and enter a Name for the workflow automation (e.g. LoanApproval-WF) and click “Create”. 



To create a Workflow Automation Service, complete these steps below:

1. On the left-hand side menu, hover over “Exposed Automation Services” and click on the “+” sign next to it and select a New REST service.



2. Under the “Operations” section, click on the “+” sign next to “Operations” and enter “requestLoanApproval” as the Operation name (see screen shot below)
3. Click “New” for the Implementation

 

4. In the New Service Flow pop-up dialog, enter “requestLoanApproval” as the Name of the Service Flow.


5. Go to the “Variables” Tab. Under the “Variables” section, click on the “+” sign next to “Input”

 

6. Under the “Details” section, enter “firstName” as the Name of the Variable and select “String” as the Variable type.
7. Repeat step 5 and 6 to create Variable “phoneNumber”. Instead of selecting an existing Type, click “New” for the Variable type to create a new type and enter “phoneNumber” (see screen shot below).


8. Under the “Behavior” section, enter “Simple type” as the Definition type. Under the “Simple Type” section, select “String” as the Type. Under the “String Validation” section, enter ^\(\d{3}\)\s\d{3}-\d{4} for the Regular expression to indicate that the format of the phone number needs to be (xxx) xxx-xxxx. (see screen shot below).

9. Repeat step 5 and 6 to create the remaining input variables and output variable. For this tutorial, we will have the following inputs and output for Operation “requestLoanApproval” (see screen shot below) :

Input:

Name: firstName                     Variable type: String
Name: lastName                      Variable type: String
Name: phoneNumber             Variable type: phoneNumber (String with regular expression validation “^\(\d{3}\)\s\d{3}-\d{4}”)
Name: yearlyIncome              Variable type: Decimal
Name: loanAmount                 Variable type: Decimal

Output:

Name: requestID                     Variable type: String

10. Let’s create one more operation for the LoanApproval Automation Service. Under the “Operations” section, click on the “+” sign next to “Operations” and enter “assessLoanRisk” as the Operation name. 

11. Click “New” for the Implementation. In the New Service Flow pop-up dialog, enter “assessLoanRisk” as the Name of the Service Flow (see screen shot below).

12. Repeat step 5 and 6 to create the input variables and output variable. For this tutorial, we will have the following inputs and output for Operation “assessLoanRisk” (see screen shot below) :

Input:

Name: yearlyIncome                             Variable type: Decimal
Name: loanAmount                                Variable type: Decimal

Output:

Name: isHighRisk                                    Variable type: Boolean



13. Add a simple logic to the Operation “assessLoanRisk” for this tutorial by going to the “Diagram” tab.  From the palette on the right-hand side, click on the drop down next to the Activity component and drag and drop the “Script Task” to the Diagram and link it to the flow (see screen shot below).
14. For the details of the “Script Task”, under the Script tab, enter the following script with the simple logic that if the loan amount is larger than the yearly income, the loan request will consider to be high risk (see screen shot below).

if (tw.local.loanAmount > tw.local.yearlyIncome) { tw.local.isHighRisk = true; }

else { tw.local.isHighRisk = false; }


15. Click the Snapshot icon at the top right-hand corner to create a snapshot (see screen show below)




To publish the newly created Workflow Automation Service to Studio for reuse, complete these steps below:

1. Click “Business Automation” at the top left-hand corner above the name of the Workflow Automation to go back to the Business Automation Studio (see screen shot below).


2. In Business Automation Studio, for the newly created Workflow Automation, go to the Automation services tab (see screen shot below).

3. Click “Publish” to publish the snapshot you saved so that the automation service can be reused by other designer.

4. After the automation service is successfully published, the “Published automation services” section should have the “LoanApproval” automation service showing up in the catalog (see screen shot below).



Scenario 1: Create a Loan Approval Request page in the Application with the necessary input fields, and create a Confirmation page also 

Let’s say we would like to create an Application with 2 pages (Loan Approval Request page and Confirmation page) using IBM Business Automation Application Designer.  The Loan Approval Request page is used to collect the information about the Loan Approval Request and to submit the request using the Operation requestLoanApproval.  The Confirmation Page is used to display the confirmation information.  The Operation assessLoanRisk is also called when this page loads so that it can display the assessment whether the request is high risk or not.

 

To create a “Loan Approval Request” page and a “Confirmation” page in the Application, complete these steps:

1. Go to “Business Applications” by using the Hamburger menu at the top left-hand side of the header.


2. Click “Create” and select “Application” to create a new application.

3. Enter the Name for the business application (e.g. LoanApproval-App) and click “Create”. (Note: if Business Orchestration Tech Preview is enabled, you will see a choice to either create a business app or a business orchestration.  For this tutorial, select creating “A business app”.)



4. To rename “Starting Page” to “Loan Approval Request”, click on the “Navigation menu” in the page view and click on the gear icon. The right-hand side slide out will then open to allow you to edit the navigation menu.

5. In the slide-out on the right-hand side, hover over the “Starting Page” under Main Navigation and click on the 3 dots and select “Rename” (see screen shot below)

6. Change the name from “Starting Page” to “Loan Approval Request” and click OK


7. Go to the palette in the right hand side, and select “Automation service” from the drop down under “Drag a component to your page”

8. Click “Add” and select the newly published Automation Service “LoanApproval”


9. Check the checkboxes for the 2 operations created (see screen shot below) and then click the “Add” button to add the Automation Service with the 2 operations. 
10. After that, the “LoanApproval” Automation Service will show up in the palette in the right hand side.

11. Drag and drop “LoanApproval” Automation Service to the page.


12. In the pop-up dialog, select Operation “requestLoanApproval”. For the section “Call this automation service when”, ensure that “A button is clicked” is selected.

13. Since we want the page to have all the input fields to collect the Loan Approval Request information, under the Inputs section, ensure that the “Create field on page” checkboxes are checked so that the inputs will be automatically generated on the page. (see screen shot below)

14. Later on, since we will configure the “Button” to go to the “Confirmation” page, we do not need the output requestID to show up on the page. So, under the Output section, we will deselect the “Create field on page” checkbox and click “Done”.


15. Then, you will see that all the input fields required by Operation requestLoanApproval are automatically generated on the page, and a “Launch service” button is also automatically generated.

16. To rename the Button, select the “Launch service” button and click the pencil icon below (see screen shot below)

17. Rename the Button label from “Launch service” to “Submit”

18. To configure the Button to go to the “Confirmation page” after calling the Operation requestLoanApproval, select the “Submit” button and click the “next step” icon below (see screen shot below)

19. In the right-hand side slide out to configure the Next step, click “Next” to configure the “Page flow” since the “Service” is already pre-configured.

20. Select “Go to <New Page>” under “Select the page that opens when your user clicks the component”.

21. For the Name field (see screen shot below), enter “Confirmation” as the Name of the page and deselect the checkbox to “Create a navigation menu item for this page” (because the “Confirmation” page does not need to show up in the Navigation menu); then click “Done”.




Scenario 2: Configure data validation for the input fields on the Loan Approval Request page

In 21.0.3 December 2021 release, we have added capabilities to allow users to easily configure data validation on application pages.  In this tutorial scenario, we will describe how to leverage this capability to configure the validation for the input fields and to define how validation errors are handled.

 

To configure data validation for the input fields in the “Loan Approval Request” page, complete these steps:

 

1. Click on the checkmark icon next to “Page: Loan Approval Request” at the top of the Page view to open the right-hand side slide-out to edit page validation (see screen shot below)


2. In the right-hand side slide-out to edit page validation, you will see that the “Data value” validation is already checked for the phoneNumber field (see screen shot below). This means that the page will enforce the format (xxx) xxx-xxxx that we setup for the Operation requestLoanApproval during the Pre-requisite steps at the beginning. 



3. Let’s say, besides enforcing the format of the phone number, we also want to ensure that the first name field and the last name field are mandatory for the Loan Approval Request. To configure that, click the “Add item” button next to “Define what to validate”, and add the firstName and the lastName.  Ensure that the “Required” checkboxes are checked for both of them (see screen shot below).  Note: because at runtime, Decimal is given a default value of 0, marking Required for Decimal (e.g. yearlyIncome) is not supported because it always has a value.

4. Click “Add item” next to “Stay on this page when errors exist” and add the “Submit” Button (see screen shot above).  

5. Click the “Preview” button at the top right hand side to Preview the page.


6. With the current validation configuration, whenever there is an error after the “Submit” button is clicked, the same page is displayed (See screen shot below with different types of errors during Preview). Note: In the page validation slide-out, if you add the “Submit” Button under the “Disable this view when errors exist” section, when the format entered for the phone number is not (xxx) xxx-xxxx, the “Submit” Button will be disabled.  However, not entering the firstName is not considered an error yet until the Button is clicked.  So, the “Submit” Button will not be disabled if the firstName is not entered.  To check Required field, "Stay on this page when errors exist" should be used.  If you want the end user to see a disabled button until there is no error, you can additionally use the "disable this view when errors exist" on top.



Scenario 3: Update the Confirmation Page to display the confirmation information

After the user fills in the Loan Approval Request form and clicks submit, if there is no error, the confirmation page will be displayed. 

To update the Confirmation Page, complete these steps:

 
1. Switch to the “Confirmation” page by going to the Page drop down at the top of the page view and select “Confirmation” (see screen shot below)

2. In the right-hand side palette, search for Panel and drag the Panel component to the page.

3. Rename the title of the Panel from “Panel” to “Confirmation Page”


4. In the right-hand side palette, search for Display Text and drag it to the “Drop content here” box inside the Panel on the page.
5. Change the Display Text from “This is placeholder text” to “First Name”, and click the Data Association icon (see screen shot below) and you will then see the right-hand side slide out that allows you to associate data.

6. Click on “Select existing” and then select “firstName” from the drop down list to associate the First Name Display Text to also display the value of the variable firstName.

7. Repeat step 4 to step 6 to create the remaining Display Text. For this tutorial, we will have the following Display Text for the “Confirmation” page (see screen shot below) :

First Name: map to variable firstName
Last Name: map to variable lastName
Phone Number: map to variable phoneNumber
Loan Amount: map to variable loanAmount
Yearly Income: map to variable yearlyIncome




Scenario 4: Configure to call LoanApproval Automation Service (Operation assessLoanRisk) on page load. 

In 21.0.3 December 2021 release, we have added capabilities to allow users to easily call automation services on page load.  In this tutorial scenario, we will describe how to leverage this capability to configure to call LoanApproval Automation Service (Operation assessLoanRisk) on page load so that the confirmation page can also display the assessment whether the request is high risk or not.

 

To update the Confirmation Page to also display the assessment result which is the output of the Operation assessLoanRisk , complete these steps:

 

1. Go to the palette in the right hand side, and select “Automation service” from the drop down under “Drag a component to your page”


2. Drag and drop “LoanApproval” Automation Service to the page.

3. In the pop-up dialog, select Operation “assessLoanRisk”. For the section “Call this automation service when”, select “The page loads”.

4. Ensure that the “Create field on page” checkboxes are not checked and click “Done” (see screen shot below).


5. Click on the pencil icon next to “Page: confirmation” at the top of the page view (see screen shot below) to open the right-hand side slide-out for editing page. Note: This step is just to inspect the operation that will be called on page load and no update is needed in the Edit page slide-out. 


6. In the Edit page slide-out on the right-hand side, under the Load settings section, you will see that the assessLoanRisk operation is called when this page loads. If you want the operation to be called only once per application session, you can select the checkbox.  For this tutorial scenario, we will call Operation assessLoanRisk every time the page is loaded to determine whether the request is high risk or not.  So, we will not check the checkbox.  (Note: in case you need to remove calling the operation later, you can hover over “Call assessLoanRisk”, click on the three dot on the right-hand side and select “Delete”.)   Since no update is needed, you can click the “Cancel” button to exit.


7. To display the assessment result on the Confirmation page, in the right-hand side palette, search for Display Text and drag it to the “Drop content here” box inside the Panel in the page below the Yearly Income.
8. Change the Display Text from “This is placeholder text” to “Is High Risk?”, and click the Data Association icon (see screen shot below) and you will then see the right-hand side slide out that allows you to associate data.

9. Click on “Select existing” and then select “isHighRisk” from the drop down list to associate the Is High Risk Display Text to also display the value of the variable isHighRisk.


10. Click the “Preview” button at the top right hand side to Preview the page.

11. Fill in the Loan Approval Request form and the screen shot below is an example of the Confirmation page in Preview. If the Loan Amount is larger than the Yearly Income, the assessment result will show that this request is High Risk in the Confirmation page. 



0 comments
60 views

Permalink

https://community.ibm.com/community/user/blogs/walfrey-ng1/2021/12/17/calling-automatiion-services-on-page-load