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

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Describe App Builder features

App Builder Features

Usage Scenario

Developing UI applications through SAP Build Apps tools simplifies creating user-friendly interfaces. It eliminates the need for coding expertise, making app development accessible to a wider audience. With intuitive drag-and-drop interfaces and prebuilt components, users can easily prototype, design, and customize their applications. By integrating with data sources and APIs, SAP Build Apps enables the creation of dynamic and interactive UI applications without writing complex code.

You must guide the warehouse operator through the check procedure for the new goods arrived to the warehouse. To do this, the user interface (UI) application provides a search feature for the purchase orders in the SAP S/4HANA Cloud system. It enables selection of the correct item, gives a checklist detail for the selected product, and enables the operator to mark and note all found issues.

App Builder Features

The App Builder or SAP Build Apps - Web & Mobile, is the core of SAP Build Apps. It enables you to do the following things:

  • Define your app's structure and navigation logic.
  • Build pixel-perfect user interfaces.
  • Create complex logic with visual programming.
  • Integrate with external data resources and SAP systems.
  • Bind data to your components to create dynamic views and more.

For more information on the App Builder, refer to the SAP Help portal at:SAP Help: App Builder

The UI application is normally designed to display and handle the data stored in one or several back end applications. So, the data integration is often the main pillar of the UI application design. With SAP Build Apps, you can use SAP BTP integration to access your SAP Systems using destinations or get the data directly from your SAP Build Apps back end application created with Visual Cloud Functions.

For more information on SAP BTP integration, refer to the SAP Help portal at:BTP Integration at Help.SAP.com

There are many visual components and flow functions provided by SAP Build Apps. In this learning journey, we only use some of them so you can read the corresponding documentation before you start an exercise.

View Components Are:

  • Title
  • Text
  • Container
  • Input Field
  • Button
  • List Item
  • Checkbox field
  • Toggle

For more information on viewing components, refer to the SAP Help portal at: Viewing Components on Help.SAP.com.

Flow Functions

A key concept in the App Builder is the ability to bind component properties (Help.sap.com Binding-data) to data stored in variables. The basic use case is binding a property directly to a variable. Bindings resolve automatically. For example, whenever you fetch new data from the back end and store it to your data variable using the set data variable flow function, the component updates to show the new data.

The most widely used binding types are so called formula functions (Help.sap.com: Formula-functions) or simply formulas - expressions that allow you to build algorithms in your app. They follow the same concept as Excel spreadsheet formulas, borrowing the context-aware functionality from them.

Summary

You now understand what App Builder can do and how the data integration works in SAP Build Apps. You are familiar with some visual components and flow functions and understand how to change their properties using the bindings. You can test the application with the Preview Portal.

Further Reading

  • For more on SAP Build Apps, refer to the documentation in the SAP Help portal at:Help.sap.com: Build-apps
  • For more on AppGyver reference, refer to the SAP Help portal at: Appgyver.com

Create a Front End Application with SAP Build Apps

Business Scenario

The front end application provides access to all previously prepared data. The warehouse user can search for the specific purchase order item and observe all checks relevant for the product. The user can decide if they need additional checks and can store all the information found after all checks. If any check fails, they create the corresponding defect in the SAP System, which the back office manages later.

Task Flow

In this exercise, you perform the following tasks:

  1. Create a new application from a template.
  2. Install integration with the data from the SAP System and from Visual Cloud Functions.
  3. Create a data variable used for search.
  4. Add search button logic.
  5. Add search results list.
  6. Add next page navigation logic.
  7. Add checklists page initialization logic.
  8. Add save checks button logic.
  9. Test the application.

Prerequisites

  • You have successfully completed all previous exercises.
  • Ideally, you have initial SAP Build Apps skills.

How to Obtain Support

To get support during the exercises, add your question in our SAP BTP Learning Group: Groups: SAP-BTP-Learning.

Exercise Options

You can perform this exercise in two ways:

  1. Live Environment: Using the instructions below, you can perform the steps in the SAP BTP Free Tier account.
  2. Simulation: Follow the step-by-step instructions within the simulation.
Note
We strongly recommend you perform the steps in the live environment first.

Task 1: Create a New Application

Steps

  1. 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.
  2. 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.

Task 2: Install Data Integration

Steps

  1. 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.

  2. 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.

Task 3: Create a Data Variable

Steps

  1. 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.

Task 4: Add Search Button Logic

Steps

  1. 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 VariablesPage 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 buttonABCFormula 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.

  2. 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.

Task 5: Add Results List

Steps

  1. 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:
  2. 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.

Task 6: Add Navigation Logic

Steps

  1. 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.

  2. 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.

  3. 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:

  4. 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.

Task 7: Add Checklists Page Logic

Steps

  1. 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.

  2. 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.

  3. 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.

  4. 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.

Task 8: Add Save Button Logic

Steps

  1. 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:

  2. 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:

Task 9: Test the Application

Steps

  1. 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:
  2. 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.

  3. 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

Build and Deploy Your SAP Build Apps Application to SAP BTP

Business Scenario

In this exercise, you build the application you created using SAP Build Apps and deploy it to SAP BTP as an HTML5 application. The application connects with SAP Build Work Zone, standard edition. This enables you to have one central entry point to show all of your SAP BTP applications.

Task Flow

In this exercise, you will perform the following tasks:

  1. Build your Application.
  2. Deploy your Application.
  3. Check the Deployment.
  4. Integrate your Application with SAP Build Work Zone, standard edition.

Prerequisites

  • You successfully completed the exercise: Create a Front End Application with SAP Build Apps.
  • To deploy, you must be a member of the Cloud Foundry org and the space to which you deploy to.

How to Obtain Support

To get support during the exercises, add your question in our SAP BTP Learning Grouphttps://groups.community.sap.com/t5/sap-btp-learning/gh-p/SAP-BTP-Learning.

Exercise Options

You can perform this exercise in two ways:

  1. Live Environment: Using the instructions below, you can perform the steps in the SAP BTP Free Tier account.
  2. Simulation: Follow the step-by-step instructions within the simulation.
Note
We strongly recommend you perform the steps in the live environment first.

Task 1: Build Your Application

Steps

  1. 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.

Task 2: Deploy Your Application

Steps

  1. 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.

Task 3: Check the Deployment

Steps

  1. 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.

Task 4: Integrate With SAP Build Work Zone, Standard Edition

Steps

  1. 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.

  2. 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

The Preview Portal

When you want to test the changes made in the application, you can use the preview functionality. The preview portal enables you to check the application in a web environment or using a mobile device. All changes are reflected immediately in real time.

For more information on the Preview Portal, refer to the SAP Help portal at: Help.sap.com: Web-app-preview.

Log in to track your progress & complete quizzes