Consume a CAP Service in SAP Build Apps

Open SAP Build Apps, by going to the SAP BTP cockpit, and under Instances and Subscriptions, click SAP Build Apps.

The SAP Build lobby should open.

First, download the skeleton project from RiskManagement.mtar.

Second, go to the SAP Build lobby and click on the Import button.

In the dialog, select the downloaded project file, and click Import.

The project should be added to the lobby.

Click the project to open it.

If the project cannot load because it conflicts with an existing project or you already imported it, there is a second way to import projects (from within an existing project), and we have provided a second version of the project for this purpose.

Download the file RiskManagement.zip.gpg.

From within an open SAP Build Apps project, make sure the project is saved. Then go to the upper-right corner, select the 3 dots and then Replace – this import replaces and deletes the current content of the project.

Select the gpg file and click Replace.

The first thing you need to do is connect the project to your CAP service via our destination, to retrieve the data. And in order to do this we need to enable SAP BTP authentication.

1. Go to the Auth tab.

2. Click Enable Authentication, then select SAP BTP Authentication.

   

   Click OK.

3. Go to the Data tab.

4. Click Add Integration.

   

   Note that there will be many error messages. This is because we already created data variables as well as bindings with those variables, but we deleted the data resources because we wanted you to do that part.

   

   You can ignore these error messages. As soon as you create the data resources, they will go away.

5. Click BTP Destinations, and then select the the destination.

   

6. Click Install Integration (upper right).

   

7. For each of the two entities, Risks and Mitigations, click the entity and then click Enable Data Entity.

   

You can now click Browse Real Data to see live data from the CAP service.

In addition, the errors should now be gone. Data variables were already set up on all 3 pages of the app, and now should be functioning properly.

When the first page loads, we want to do 2 things:

• Load the list of risks
• Check whether user has permission to read / write.

Click the UI Canvas tab again to go back to the UI, and then open the logic canvas.

You should see the page’s main canvas page (the one you get if you click away from any component/variable, that is, in the open gray area). We’ve added the following logic:

The logic is triggered when the page opens, and the following is performed:

• Retrieve Risks: A call is made to the CAP service to get all the risks.

• Check Write Permissions: If reading the CAP service succeeded, we now check if the user has write permission by making an empty update to the first record (the update does not change the record – PATCH update with no values). If the update fails, we set a page variable to indicate the user does not have write permission.

• Check Read Permissions: If reading the CAP service failed, we check if the reason was because of permissions (403 status error). If yes, we set page variables to indicate the user has neither read nor write permissions.

• Display User Permissions: After checking permissions, we display a toast message indicating what permission the user has.

Now we just want to enable the Add Risk button to navigate to the Manage Risks page.

Select the Add Risk button and open the logic panel.

Add an Open page flow function, and connect it to the Page mount event.

Set the page to open as Manage Risks.

Click Save (upper right).

Go to the Launch tab, then Open Preview Portal, then Web Preview.

Click Risk Management to open the app. You should see the first page with a list of risks.

In addition, you see a toast message indicating what permissions you. In this case, since you gave yourself manager permissions, it should say you are a manager.

Also, the Add Risk button should take you to the Manage Risks page (though that page will not let you add a risk yet, and clicking Create Risk will not do anything).

The Manage Risks page can be used to add a new risk or update an existing risk if navigating from an existing risk.

The page has a page parameter. If sent, the page is for updating; if it’s null, the page will be used to add a risk.

1. In the upper left, click the link for the Risks page.

   

   This will take you to the area for managing the app’s pages.

2. Click on the Manage Risks page.

   

   If you don’t go to the Manage Risks page, make sure to save your project (upper right).

3. Open the Variables.

   

   Click Data Variables. You have 2 data variables related to the Risks entity:

   • Risks1: This variable is specified as a New data record, meaning it is empty but has the schema appropriate for this data entity.

     

   • Risks2: This variable is specified as a Single data record, meaning it will retrieve the data of an existing risk if we navigated from an existing risk and we want to update that risk.

   We will be calling the CAP service using Risks1. But if we are updating an existing risk, we want to copy the existing values into Risks1 from Risks2.

4. Click Risk2 and open the logic canvas. You should see the basic logic flow for data variables of type Single data record (except we already deleted the Delay flow function).

   

   • Click the Get record flow function, and set the ID to the page parameter RiskID.

     

   • Add another Set data variable flow function to the end of the flow.

     

     Set Data variable name to the data variable Risks1.

     Set Record properties to the data variable Risks2 > Risks2.

1. Back on the View tab, click the Update Risk button and open its logic canvas.

2. Add logic flow functions and connect them as in the following:

   

   Be careful to use the top or bottom output of a flow function, as shown in the image.

3. Configure the flow functions as follows:

   • IF condition (first): Set the condition to the following formula (validates the prio field):

     JavaScript

     Copy

     NOT(LENGTH(data.Risks1.prio)>5) 
     

   • IF condition (second): Set the condition to the following formula (checks if we are updating a risk or creating a new one):

     JavaScript

     Copy

     NOT(IS_NULLY(params.RiskID))
     

   • Update record: Set the following:

     • Resource name: Risks

     • Risk ID: page parameter RiskID

     • Record: Set the following formula (allows us to make sure the integer fields receive a number value):

       JavaScript

       Copy

       {impact: NUMBER(data.Risks1.impact), title: data.Risks1.title, descr: data.Risks1.descr, prio: data.Risks1.prio, criticality: NUMBER(data.Risks1.criticality)}
       

   • Create record: Set the following:

     • Resource name: Risks

     • Record: Set the following formula:

       JavaScript

       Copy

       {impact: NUMBER(data.Risks1.impact), title: data.Risks1.title, descr: data.Risks1.descr, prio: data.Risks1.prio, criticality: NUMBER(data.Risks1.criticality)}
       

       This formula will show as read because we are not supplying an ID value. But the CAP service will assign an ID automatically when it is created. You can still save the formula.

4. Add Alert flow functions as follows:``

   

   Set the texts for each alert as follows:

   • 1

     Text

     Copy

     Priority can only be 5 characters
     

   • 2 (if update fails)

     Set to Output value of another node > Update record > Error > Message.

   • 3

     Text

     Copy

     New risk created
     

   • 4 (if create fails)

     Set to Output value of another node > Create record > Error > Message.

5. Click Save (upper right).

Again, go to the Launch tab, then Open Preview Portal, then Web Preview.

Click Risk Management to open the app.

Click Add a risk and enter values for the fields (test that priority cannot be more than 5 characters).

Click Create Risk.

Troubleshooting: If your risk does not get added, you may have inadvertently enabled draft mode. Go back to your CAP service, select the Risk entity, and check its settings.

If draft mode is enabled, uncheck the option and redeploy the CAP service.

Now use the navigation menu to return to the main page with all the risks, and make sure your new risk is there.

You should see your new risk.

We will check the update functionality later.

1. In the upper left, click the link for the Manage Risks page.

   

   This will take you to the area for managing the app’s pages.

2. Click on the Risk Details page.

   

   If you don’t go to the Risk Details page, make sure to save your project (upper right) and try again.

3. Click on the Edit button, and open the logic canvas.

   

4. Add an Open page flow function, and connect it to the Component tap event.

   

   Configure the Open page flow function to open the Manage Risks page, and set the ID to the RiskID page parameter.

   

We want to enable the user to see all the existing mitigations, and to click on one to make it the mitigation for the current risk.

Select the list item component (just under the All Mitigations text) and open the logic pane.

In this logic flow, we do the following:

• Check Need for Update: We check 2 things to see if we need to do the update at all:

  • Does the user have write permission?

  • Did the user select a different mitigation?

• Update Risk: If both checks are true, we update the risk.

• Refresh Risk Details: We retrieve the risk details in order o refresh the page.

The other flow functions set the changingMigration variable in order to display a spinner while we are updating the record.

Again, go to the Launch tab, then Open Preview Portal, then Web Preview.

Click Risk Management to open the app.

Click the risk we added earlier.

The risk will not have any mitigation. Click one of the mitigations to select it for this risk.

You can click Edit and change some of the fields.