Designing SAP Build Apps UIs for SAP S/4HANA Cloud Extensions

Open the SAP Build Apps lobby.

1. Navigate to your SAP BTP subaccount.

2. Select Instances and Subscriptions.

3. To open the SAP Build Apps lobby, select the Go to Application icon next to the SAP Build Apps application.

   

   Note

   If prompted, login with your user and password.

Import a template application.

1. Download the template from Github at: Github: Delivery-check-app.mtar.

   Note

   The link above may not work for everyone. You must be a registered user on Github.

2. Choose Import.

   

3. Choose Browse.

4. Choose the file in the dialog box.

   

5. To navigate to the application, select its name.

   

Set SAP BTP Authentication.

1. To switch to the authentication section, choose Auth.

2. Choose Enable Authentication.

   

3. Choose the SAP BTP authentication tile in the dialog box.

   

4. To confirm the addition of views and flows, choose OK.

   

Add SAP Systems integration.

1. Choose Add integration again. However, this time choose BTP Destinations.

   

2. In the destinations list, select S4HC_SAMLASSERTION_PO destination

   Note

   If you use a mock server, select MOCK_PURCHASE_ORDER.

   

3. Choose Install Integration.

   

4. Choose the PurchaseOrderItem entity and choose Enable Data Entity.

   

5. Repeat the previous steps with the following destinations and entities:

   • Destination S4HC_BASIC_PCLFN (or MOCK_PRODUCT_CLASSIFICATION in case of mock server usage), entity A_ProductCharcValue.
   • Destination S4HC_SAMLASSERTION_DEFECT (or MOCK_DEFECT in case of mock server usage), entity Defect.
   • Destination S4HC_SAMLASSERTION_GRCHECK (or MOCK_CUSTOM_OBJECT in case of mock server usage), entity YY1_GRCHECK.
   • Destination S4HC_SAMLASSERTION_CHECKLIST (or MOCK_CHECKLIST in case of mock server usage), entity YY1_CHECKLIST.

   For the YY1_CHECKLIST entity, ensure you marked the to_CHECKLIST_ITEM checkbox:

   

   Result

   The final SAP Systems integration list is similar to the list in the following figure:

   

   Later, we must known which internal ID is assigned to the product classification characteristic. It can be done on the fly with the help of several APIs. However, for the sake of tutorial simplicity, this ID is hard coded in the application. To get this ID, open the product classification integration and find the enabled entity

   

6. Choose Browse Real Data.

   

7. Select Search by Product in the list next to the search field.

8. Enter the product name that you classified in the back end.

   For the mock server scenario, use MAT003.

9. Choose Enter on your keyboard.

10. Scroll along the result list on the right until the CharcInternalID column appears.

11. Note the internal ID value. You need it in the next steps.

    

Create a data variable.

1. Choose a switch page button in the top left corner of the screen.

   

2. Select the tile with the Selection Screen page.

   

   The following figure shows a layout of the first page of the application:

   

3. To navigate to the variables section, select a switch View/variables.

   

4. Choose Data Variables on the left and select the Add Data Variable button.

   

5. In the dialog box menu, select the PurchaseOrderItem entity as a reference for the new variable.

   

6. A new data variable is always created with the default logic that reads the data from the back end every 5 seconds. We do not need this behavior. To delete it, select the new variable and choose Add Logic button on the bottom of the screen.

   

7. Select all three logic blocks and choose Delete on your keyboard.

   

8. Switch back to the layout view.

   

Add logic to read the data based on search criteria.

1. Select the Search button on the page layout

2. Choose the Show logic for SEARCHBUTTON button.

   

3. Drag the Get record collection logic block to the marked place in the logic builder.

   

4. On the Properties panel, set the resource name to PurchaseOrderItem.

5. Choose the Filter conditions button and select the Object with properties binding option.

   

6. Select PurchaseOrder in the Property list.

7. Choose the Compared value field and navigate to Data and Variables → Page Variables.

8. Choose the PurchaseOrder page variable.

9. Choose Add condition and add another condition for the Material page variable.

   

10. If you leave this filter as it is, the user must fill both selection fields on the screen to get the result. However, a standard search ignores the search fields if they are empty. To enable this standard search, for property PurchaseOrder, choose buttonABC → Formula and copy the following formula:

    IF(IS_EMPTY(pageVars.PurchaseOrder),"minimum","equal")

    

11. Repeat the step for the second condition using the following formula:

    IF(IS_EMPTY(pageVars.Material),"minimum","equal")

    Your final filter condition resembles what appears in the following screenshot:

    

12. Exit by choosing the Save button.

13. Connect the logic block with the Component tap event.

    

Save the result in the data variable.

1. Drag the Set data variable logic block to the marked place in the logic builder.

   

2. Connect the logic block input with the top output of the previous block.

   

3. On the Properties panel, set the data variable name to PurchaseOrderItem1.

4. Choose the Record collection button and return to Select Binding Type.

5. Select the Output value of another node binding option.

   

6. Choose Get record collection in the Select logic node field.

7. Choose Collection of records in the Select node output field.

8. Select the Save button.

   

Prepare a results list.

1. Select the list item at the bottom of the page layout and choose the button in the Repeat with field on the Properties panel.

   

2. Assign data variable PurchaseOrderItem1 as the binding for the Repeat with property.

3. Choose the Primary label field and choose Formula.

   Use the following formula: repeated.current.PurchaseOrderItemText + " (" + repeated.current.Material + ") "

   

4. Assign formula binding to the Secondary label.

   Use the following formula: repeated.current.PurchaseOrder + " / " + repeated.current.PurchaseOrderItem

   

   Result

   The Properties tab now resembles what is shown in the following figure:

   

Test the search functionality.

1. Select theLaunch button.

   

2. On the next screen, choose the Open Preview Portal button.

   

3. Select the Open Web Preview button.

   

   Result

   You get the page shown in the following figure:

   

   You can enter some search criteria or leave all the fields empty. Select the Search button. The results list is filled, based on your criteria. You can try to select any result item. There is no effect. The next step adds this functionality.

   

4. You can leave the preview tab open. All your updates during the design time immediately reload the preview.

Add the custom business object check.

1. Before going to the next page, we want to know if all the checks are done for this purchase order item. We try to read the corresponding custom business object instance and navigate only if we find nothing. Select the result list item component and choose the Add logic to RESULTSLIST button.

   

2. Drag the Get record collection logic block to the marked place in the logic builder.

   

3. On the Properties panel, set the resource name to YY1_GRCHECK.

4. Choose the Filter collection button.

5. Select the Object with properties binding option.

   

6. Select PurchaseOrder in the Property field.

7. Assign Data item in repeat binding option to the field Compared value.

8. Select the PurchaseOrder field.

9. Add another filter item with the Add condition button.

10. Select PurchaseOrderItem as the Property and PurchaseOrderItem repeated field as the Compared value.

11. Exit with the Save button.

    

12. Connect the logic block to the Component tap event.

    

Add a condition block.

1. Drag the If condition logic block to the marked place in the logic builder.

   

2. Connect it to other blocks as shown in the following screenshot:

   

3. On the Properties panel, choose the Condition button and select the formula binding option.

   

   Use the following formula:IS_EMPTY(outputs["Get record collection"].records)

   

4. Choose Save.

Add the navigation.

1. Drag the Open page logic block to the marked place in the logic builder.

   

2. On the Properties panel, fill the following data:

   • Set the Checklist to the field Page.
   • Assign the Data item in repeat binding option to the field Product and select the Material field.
   • Assign the Data item in repeat binding option to the field PurchaseOrder and select the PurchaseOrder field.
   • Assign the Data item in repeat binding option to the field PurchaseOrderItem and select the PurchaseOrderItem field.
   • Assign the Data item in repeat binding option to the field PurchaseOrderItemDescription and select the PurchaseOrderItemText field.

   

3. Connect the block to the If condition block like shown on the screenshot below:

   

Test the navigation.

1. Choose any result list item.

   Result

   You should navigate to the next page. However, the page containers are empty. We fix that in the next step.

   

Get all the checklists.

1. Select the page switch button in the top left corner of the screen.

   

2. Select the tile with the Checklist page.

   

3. Ensure that no component is selected on the screen.

   Only then can you access the page logic by choosing the button Show logic for CHECKLIST.

   

4. Drag the Get records collection logic block to the marked place in the logic builder.

   

5. On the Properties panel, set the resource name to YY1_CHECKLIST.

6. Set the block name to Get all checklists in the Advanced section of the Properties tab.

   

7. Connect the logic block to the Page mounted event.

   

Get the product classification data.

1. Drag Get records collection logic block to the marked place in the logic builder.

   

2. On the Properties panel, set the resource name to A_ProductCharcValue.

3. Assign the Object with properties binding option to the Filter condition field.

   

4. Set the following conditions and exit choosing the Save button.

   • Select ClassType in the Property field. Enter 001 in the Compared value field.
   • Select Product in the Property field. Assign the page parameter Product to the Compared value field. 
   • Select CharcInternalID in the Property field. Enter the value noted in the task 2, step 3(i) in the Compared value field (use 777 for the mock server scenario).

   

5. Set the block name to Get product classification in the Advanced section of the Properties tab.

   

6. Connect the logic block input to the top output of the Get all checklists node.

   

Match a product classification to the checklists.

1. Drag Set page variable logic block to the marked place in the logic builder.

   

2. Connect the logic block to other nodes as shown in the following screenshot:

   

3. On the Properties panel, set the variable name to Checklists. Assign Formula binding option to the Assigned value field.

   

4. Use the following formula:

   MAP(outputs["Get all checklists"].records, { name: item.Name, default: item.IsDefault, description: item.Description, instructions: item.Instructions, checks: MAP(item.to_CHECKLIST_ITEM, item.CheckText), checked: item.IsDefault || IS_IN_ARRAY_BY_KEY(outputs["Get product classification"].records, "CharcValue", item.Name) })

   

5. To exit the page, choose Save.

Test the checklist page layout.

1. You can preview the result again. Select the search button on the first screen and then select any item in the result list.

   Result

   You get the next screen with all the fields set based on your classification and checklists details.

   

2. Select the Save checks button.

   Result

   Nothing happens. This logic is added in the next step.

Save the detect data.

1. Return to the page layout designer.

2. Select the Save checks button.

3. Choose the Show logic for SAVEBUTTON button.

   

4. Drag the Create record logic block to the marked place in the logic builder.

   

5. On the Properties panel, set the resource name to Defect.

6. Assign the Formula binding option to the Record field.

   

   Use the following formula: {DefectText: "Checks for PO Item " + params.PurchaseOrder + "/" + params.PurchaseOrderItem, DefectCodeGroup: "DEF-PACK", DefectCode: "0001", "_DefectDetailedDescription": [{ LongTextInternalNumber: 1, Language: "EN", DefectLongText: "Failed checks:" + REDUCE_INIT(pageVars.Checks,"",IF(NOT(item.status),accumulator+"\n- "+item.name+" ("+item.result+")",accumulator)) }] }

   

7. Exit by choosing Save.

8. Connect the logic block to other nodes as shown in the following screenshot:

   

Save the custom object data.

1. Drag the Create record logic block to the marked place in the logic builder.

   

2. On the Properties panel, set the resource name to YY1_GRCHECK.

3. Assign the Formula binding option to the Record field.

   

   Use the following formula: { "PurchaseOrder": params.PurchaseOrder, "PurchaseOrderItem": params.PurchaseOrderItem, "to_GRCHECKITEM": MAP(pageVars.Checks, {"CheckName": item.name, "CheckResult": item.result, "CheckStatus": IF(item.status,"X","")}) }

   

4. Exit by choosing Save.

5. Connect the logic block to other nodes as shown in the following screenshot:

   

Test the application.

1. Now, the application is ready. You can search by using your own criteria. Afterwards, you can select the result item and do the checks based on the checklist data. You can even assign other checklists in the app. Try playing with different components of the second screen to understand how it works. After your "playing around" select the Save checks button the corresponding data will be saved to the back end (in case of the mock server scenario there will be only a save simulation).

   

2. Select the same purchase order item again (after the successful save).

   Result

   You get the following dialog box:

   

Check the save result for defect.

1. If you are connected to the real SAP System (not a mock server), check the save result of your application.

   You must save checks for any purchase order item. Ensure that some of the checks failed, as shown in the screenshot of step 1(a).

2. Navigate to the Process Defects app.

   

3. Set Today in the Created on filter field.

4. Choose the Go button to search.

   

5. Find your defect based on its description in the results list.

6. Select the corresponding line.

   

7. Check that the Defect Detailed Description field is filled only with the checks that failed.

   

Check the result for the custom object.

1. Navigate to the Custom Business Objects app.

   

2. Select the YY1_GRCHECK object.

   

3. Select the Go to Generated UI button.

   

4. Select the Go button in the search.

5. Find your object based on the Purchase Order and the Purchase Order Item fields.

   

6. Ensure that all the checks results are available in the GRCHECKITEMs section.

   

   Result

   You created and tested the front end application with the SAP Build Apps. We recommend you check and examine all the components and logic blocks in the template. Not all of them were covered in this tutorial.

   Further Reading / Reference Links

   See:

   • SAP Fiori @ SAP
   • SAP Fiori Foundations

Build your application.

1. In Application Development, choose LAUNCH.

2. Choose OPEN BUILD SERVICE.

   

3. Under Web App, choose CONFIGURE.

   

4. On the Bundle Settings tab, choose MTAR. Choose SAVE & NEXT.

   

5. On theImage Assets tab, choose SAVE & NEXT.

6. On Permissions, chooseSAVE & NEXT.

   

7. In the Web App section, choose BUILD.

   

8. Choose the MTAR file type.

9. Choose the latest runtime version.

10. Enter a version number 0.0.1.

11. Choose BUILD.

    

    Note

    The Build page does not notify by e-mail when the build completes. You must refresh the browser to check if the build completes. The build can take more than 10 minutes.

12. To check if the build completes, refresh the browser.

    

13. Refresh the browser until the status changes from created to queued. The last status is delivered, when a DEPLOY MTA button displays.

    Note

    This can take several minutes.

    

Deploy your application.

1. In Web App, choose DEPLOY_MTA.

   You must authorize with your identity provider when you first do this.

2. Select the organization and space.

3. Choose DEPLOY_MTA.

   

4. Wait until the deployment completes and choose CLOSE.

   

Check the deployment.

1. In SAP BTP Cockpint, navigate to your subaccount.

2. From the left-side subaccount menu, navigate to HTML5 Applications.

3. Find a list of applications at Managed Application Router provided by SAP Build Work Zone standard edition.

   

4. Choose the Application Name.

   This is the build number.

   Result

   Your application opens.

5. If required, choose the IAS and login.

   This step depends on the configuration of your subaccount.

Integrate with SAP Build Work Zone, Standard Edition.

1. Open your subaccount and search for Instances and Subscriptions.

2. Search for the application SAP Build Work Zone standard edition and, to open it, choose the icon.

3. Choose the icon for the Channel Manager from the left-side menu.

4. To fetch updated content, choose Refresh.

   

5. Choose Content Manager in the left menu and choose the Content Explorer button.

   

6. Select the title HTML5 Apps with your respective subdomain name

   

7. In the table, set the checkmark for your application and choose the Add button

   

8. Return to the Content Manager tab, choose the Create button, and select Group in the dropdown.

   

9. Provide a group Title such as DeliveryCheck and find your application in the table. In the Assignment Status row, switch on the toggle button and then choose the Save button.

   

10. Return to the content manager and, for Role, select Everyone.

    

11. Choose Edit button and find your application in the table.

12. In the Assignment Status row, switch on the toggle button and then choose the Save button.

    

Create a site.

1. In the left-side menu, navigate to Site Directory.

2. Choose Create Site.

   

3. Enter the name for the site and choose Create.

   You are forwarded to the site editor.

4. Navigate to Site directory.

   

5. Find your created site and, to open it, choose Go to site.

   

6. Choose the tile to test the application.

   

   Result

   You have deployed the application that you developed in SAP Build Apps to SAP BTP as an HTML5 application. It can be consumed using an URL. It is integrated with SAP Build Work Zone, standard edition service, to have one central entry point to show all of your SAP BTP applications.

   Further Reading / Reference Links

   See:

   • SAP Developers
   • SAP Build Work Zone, standard edition