Adding a Mobile UI Application to Your Project

1. If not already done, set up your development environment.

   1. Follow the steps provided in the Unit Accelerating Development With SAP Business Application Studio, exercise: Set Up Your Account for Full-Stack Application Development to set up your development environment.

2. Create a clone of the project.

   1. In SAP Business Application Studio, select Simplified Git.

      If you already have the project you created in the unit Developing a Risk Management Application to Extend SAP S/4HANA available in your dev space, you can skip the first step to create a clone of the project in GitHub and continue with the second step.

   2. In the Simplified Git pane, select Clone Repository.

      You will be prompted to enter the URL of your repository.

   3. Select the folder in which you want to clone the project. For example: /home/user/projects.

   4. Choose OK.

      

   5. Enter your Git credentials, username, and token/password.

   6. Select Open to open the cloned repository.

      Wait for your workspace to be opened.

      You now have a dev space with all your progress up to Unit Developing a Risk Management Application to Extend SAP S/4HANA.

3. Deploy the application.

   1. Open the Project Overview.

   2. Choose the three little dots beside your Project name to open the context menu.

   3. Choose Deploy Project.

   4. Check that your application deploys.

      This can take a few minutes.

4. Check that role collections are associated with your application.

   1. Don’t forget to assign the role collections associated with your applications: RiskManagement-RiskManager-dev and RiskManagement-RiskViewer-dev.

1. Create the branch where we develop the mobile application.

   Now, let’s begin creating a branch to proceed with the activities of this unit.

   1. In the Simplified Git pane, choose the branch (main) and select Add New Branch.

      

   2. Provide the name for the new branch. For example: MobileApp.

      

   3. Select the branch to be based on main. Do not select origin/main, as Git does not allow creating a branch on a remote repository.

      In your Simplified Git pane, you should now see the branch you’ve created locally.

   4. To publish this branch into your repository, select the Publish Branch button.

      

   5. When prompted, enter your Git username and token.

      In the following steps, you will create the mobile application. When you commit changes into your Git repository, they will be in the new branch.

In this task, we will create an additional user interface (UI) for the application we created in the Unit Developing a Risk Management Application to Extend SAP S/4HANA. We will use the same data services we’ve already created and deployed. The UI will be in the form of a cross-platform mobile application for the iOS and Android platforms, using native UI controls.

1. Create a mobile application user interface.

   1. Navigate to the UI Applications tile of the Storyboard and choose the + icon to add a new user interface.

      You can create multiple UIs on top of the data services defined in the application.A new page displays.

   2. Edit the Display name to: RisksMobile. Enter a description of your choice.

   3. Select the Data source field and choose RiskManagementService from the drop-down list. This is the same data source that we’ve used for the UI application created in the Unit Developing a Risk Management Application to Extend SAP S/4HANA. Choose Next.

      

   4. As your UI Application Type choose Mobile-Centric, Freestyle Application.

      This option enables you to create native mobile applications for both Android and iOS systems with multiple device-specific features.

   5. Choose Next.

      

   6. As UI Application Template choose CRUD.

      CRUD stands for Create, Read, Update, and Delete. The CRUD template enables you to edit data in the pages of your application.

   7. Choose Next.

      

   8. As Data Objects choose Mitigations and Risks.

      Data objects define the types (entities) of data to be displayed in your mobile application.

   9. Choose Next.

      

   10. As List Picker choose BusinessPartnerFullName from the drop-down list.

       This determines the property, that is displayed in your mobile application as a selection option for the data objects, you selected in the step before (Risks and Mitigations).

   11. Choose Finish.

       

   12. Wait until the Page Map of the mobile UI application opens on the screen.

       This map portrays the overall structure of the mobile UI application developed using SAP Mobile Development Kit (MDK). It’s a metadata-based application development platform that enables development of multichannel applications, which can run natively on mobile devices and as web applications in the browser. For more information on MDK applications, see Mobile Development Kit.

       

   13. Navigate to the Main entity on the page map and choose the (Configure Page) icon to configure the page.

       

       In the Page Editor, you can see the data objects that you selected for the mobile UI application, Risks and Mitigations.

   14. Under the Properties tab, rename the Caption from Main to Risk Management.

   15. Similarly, change the Name to RiskManagement.

       Your mobile UI application now has an app title.

       

The Preview function allows you to quickly evaluate your application while running it within the workspace. For rapid development iterations, it is recommended to use the Preview function, as it doesn’t require deployment.

1. Preview your application.

   1. Navigate to the activity bar and choose the (Run Configurations) icon.

   2. Choose the + icon to create a new run configuration to preview your mobile UI application.

   3. From the drop-down list, choose Risk Management (PT).

      

   4. In the Create Run Configuration page, since we are going to preview our mobile UI application, rename the run configuration to Run RiskManagement-Mobile.

   5. Leave the remaining options as they are and choose Create.

   6. We have a new run configuration to preview our mobile UI application.

      

   7. Choose the Run Module icon for Run RiskManagement-Mobile to execute the run configuration.

      

      As described in the Unit Developing a Risk Management Application to Extend SAP S/4HANA, the procedure starts with a terminal at the bottom of the workspace, then a debug console, and finally ends up with the preview page in a new tab.

   8. In the new tab, choose the RisksMobile tile to preview the mobile UI application.

      

      You can now see the Risks and Mitigations tabs displayed in the mobile app, like what we saw in the Page Editor.

   9. Choose the Risks tab to look at the list of entries for Risks.

      

   10. Let’s edit an entry to verify the CRUD functionality of the app. Choose an entry to view its details and choose Edit.

       

       A pop-up form opens with the various fields of the Risks entry available to be edited.

   11. Make changes to the entry as per your choice and choose Save.

       

   12. Return to the list view and you can now see your updated entry.

       Note

       As the preview is using locally stored mock data, the changes you’ve made to the entries will only be persisted for the current preview session. Upon starting a new preview session, the data in the (local) database will be reset.

       

   13. Close the preview page and choose the (Stop) icon back in the SAP Business Application Studio workspace to stop the preview operation.

       

Once you are satisfied with the app’s functionality, you can try it on a mobile device. To run the application on your mobile device, bundle all relevant application metadata into a package and deploy it to the Mobile Services instance available in your SAP BTP subaccount. Mobile Services acts as a proxy between your mobile device and the deployed data source.

1. Deploy your application to mobile services.

   1. Navigate to the activity bar and choose the Project Overview icon to open the Project Overview.

   2. Expand the User Interface.

   3. Choose the three little dots (...) next to RisksMobile to open the context-menu and select Deploy to Mobile Services.

      This may take a few minutes.

      

      SAP Mobile Services is a cloud-based offering that comprises various development tools including MDK to deliver reusable services for mobile app development projects. These services help developers concentrate on delivering their business requirements rather than repeatedly building infrastructure features for every mobile project. For more information, see the SAP Mobile Services Documentation.

      Note

      You need to be logged in to Cloud Foundry to deploy your application. If you haven’t logged in to Cloud Foundry, choose Login on the notification pop-up that appears on deploying your app and then deploy again.

   4. Navigate back to the Project Overview and expand RisksMobile.

   5. Select Map to open the MDK Application Editor page for your mobile UI application where you can edit the properties and settings associated with your application.

   6. Choose Application QR Code.

      You can now see the QR Code that will help you onboard your mobile UI application.

      

Once your application is deployed to Mobile Services, the application is configured to consume the data service that was deployed to the cloud. This is all handled on the server side. However, you still need a mobile client app to run on your device. A generic mobile client app is available on the Apple App Store as well as the Google Play Store. After installing the SAP Mobile Services Client on your device, it needs to be set up for interfacing with your Mobile Service instance. This is done through a URL that is published as a QR code. The process of configuring the mobile client app is also referred to as ‘client onboarding’.

1. Verify your mobile application on a mobile device.

   1. Grab your mobile device, be it Android or iOS, and open your App/Play Store.

   2. Search for the SAP Mobile Services Client app, download, and install it on your mobile device.

      Note

      In case you run into issues with the mobile services app, it is advised to reinstall it.

      

   3. Open the app and select Scan.

      

   4. With your mobile phone, scan the QR Code on the MDK Application Editor in SAP Business Application Studio to onboard your mobile UI application to your mobile device.

   5. Select Continue.

   6. Log in to the app using your SAP credentials.

      

   7. Choose a passcode with at least eight characters which can be used to unlock your app. This passcode is part of the enterprise security policy.

      

   8. Select Next and re-enter the passcode.

   9. Select Done.

      

      You will now see a pop-up informing you of a new version available for your app. In this case, the app you are referring to is the application you have deployed to Mobile Services; not the client app itself.

   10. Select the required option to update to the new version.

       

       Congratulations! You can now see your mobile UI application downloaded to your mobile device.

   11. Choose the Risks tab to look at the list of entries for Risks.

       

       You can see that the entries are presented using live data unlike the preview of the mobile UI application that you saw earlier. This is because you cannot use data services running within the workspace with Mobile Services.

   12. Choose an entry to view its details and choose Edit.

       

2. Update the Risks Detail page.

   Use the following data:

   Field	Value
   Title	Deployment failure
   prio	1
   descr:	Deployment failure occurring frequently
   impact	100
   criticality	3
   supplier_BusinessPartner	Choose any from the list

   1. In the Update Risks Detail page, make changes to the entry as per your choice and choose Save.

      

   2. Return to the list view and you can now see your updated entry.

      

   3. Go back to your SAP Business Application Studio workspace.

   4. Select the View Last Deployed entry from the Project Overview by opening the Project Actions.

      This takes us to the application that we last deployed to the web server.

      

      Note

      The preceding screenshot shows an entry Home. It may happen that Home does not display in your landscape.

   5. Select the Risks tile.

      

   6. Choose Go.

      You can now see the Deployment failure entry that you edited on your mobile app.

3. Create a new risk entry.

   Use the following data:

   Field	Value
   title	File corruption
   prio	2
   descr	Backlog files are corrupted
   impact	500
   criticality	4
   supplier_BusinessPartner	Choose any from the list

   1. Choose Create.

      

4. Use a miti ID.

   We do not have a miti_ID for our entry which will help in associating the appropriate mitigation for the given risk. For demo purposes, let’s just copy one from another Risk entry.

   1. Go back to the list view.

   2. Choose Keep draft and select OK to save a draft of your entry.

      

      Note

      You need to perform this step only when you haven't chosen Create in step 3.

   3. Open another risk entry with a valid miti_ID and copy it.

   4. Go back to your draft risk entry and paste the miti_ID to the relevant field.

   5. Choose Create.

      

   6. Go back to your mobile app on the mobile device.

   7. Choose the Mitigation tab.

   8. Search for and select the mitigation entry based on the miti_id you copied to open the details page.

      

   9. Scroll down to the risk section.

      You can now see the File corruption risk associated with this mitigation entry.

      You have now verified the CRUD functionality of the mobile app and its real-time interoperability with the web application. Your data is persisted in the HANA Cloud database.