Custom UI5 Applications using SAP Business Application Studio and SAP BTP

---

What is SAP Business Application Studio (BAS)?

SAP BAS is the new cloud-based development environment tailored for the efficient development of business applications for SAP’s Multi-cloud environment (an evolution of SAP Web IDE). SAP Business Application Studio supports SAP users in developing and extending SAP solutions, seamlessly integrating SAP services, technologies, and solutions.

Business Application Studio is based on an open-source IDE – “Eclipse Theia.” It is a cloud service and provides developers a desktop-like experience similar to market-leading IDEs while accelerating time-to-market with high-productivity development tools such as wizards and templates, graphical editors, quick deployment, and local test runs, providing more control over the environment.

Benefits of SAP BAS:

• It does not require local installation and setup.
• It gives the provision of a single environment for all kinds of applications.
• No JRE dependency.
• Industry best practices for developers without the need to switch between multiple applications.
• Provide flexibility for all the developers, e.g., Git, templates, Mock servers, OPA5 testing for FIORI apps, etc.
• Integration with on-premise, on-cloud, API HUB.
• The productivity is enhanced with direct command execution through an integrated command line.
• Run configuration feature makes it simpler and offers a single click to simulate the test locally or directly deploy your app on the cloud.

Creating Custom UI5 Applications using SAP BAS

Let us take a small example of how to develop a custom Ui5 Application using SAP Business Application Studio on BTP to create, display and edit sales-based documents through mobile devices and in Fiori Launchpad on an On-premise Server.

Business Requirement:

Custom UI5 Application to be created using BAS on SAP Business Technology Platform (BTP) which can be used to create, display and edit the Business Document (Ex: SALES ORDER, QUOTATION OR CONTRACT)  easily through mobile devices and in Fiori Launchpad on On-premise Server. OData Service will provide information required.

Prerequisites:

1. Creation of SAP BTP Account
2. Installation of cloud connector
3. Configuration of SAP BTP account on cloud connector
4. Configuration of on-premise SAP System
5. Assign developer role to the SAP BTP user
6. Creation of Destination for on-premise SAP system on SAP BTP for consuming the ODATA Service

Technical Architectural Diagram:

Setting up BAS for UI5 development

A.   Set Up SAP Business Application Studio for Development

https://developers.sap.com/tutorials/appstudio-onboarding.html

B. Create a Dev Space for SAP Fiori Apps

https://developers.sap.com/tutorials/appstudio-devspace-fiori-create.html

C. Deploy Your SAPUI5 App

1.  Start a new SAPUI5 project by clicking on Start from template option.
   
2. To Create a SAPUI5 application select SAP Fiori Application as the template from the 3 options.
   
3. Choose the application type as SAPUI5 freestyle and SAPUI5 application as floor plan to create a custom SAP UI5 application from scratch.
   
4. You could choose to add a Data Source (OData Service) at this step itself from an SAP backend system with Connect to a System option only if the SAP BAS is configured with the respective backend destination. Else you could choose a NorthWind service for learning purpose using Connect to an OData Service option and provide the service URL as shown below.
   
5. Else you could choose None option if you don’t want to add an OData service at this point. Enter a name for the view which gets created initially.
   
6. Enter a module name (app name) with Z namespace as all the applications created other than SAP should be in Z namespace in the next step and click on Finish.
   
7. After developing the code for the application, the application could be run in the BAS by opening the app in terminal using Right Click -> Open in Terminal option. Then execute the command “npm run start” command in the terminal which would run the application in a new tab.
   .  
8. To deploy the application to the SAP system, run the command “npm run deploy-config” for configuring the TR details, package name and module name (BSP name). The destination of the respective system should be configured in the SAP BAS before deploying.
   
9. The above step will configure the deployment and then run the command “npm run deploy” for deploying the application using the above configuration.
10. After running the above command, a new BSP (Business Server Page) will be deployed to the provided package which could be checked from SE80. For Example, it can be checked the same way as below:
    
11. After the BSP is deployed successfully, the application should be configured in SAP Fiori launchpad of the system in which the BSP was deployed to.
12. Business catalog and Business group should be configured or created for the app tile.
13. Open the tcode /n/UI2/FLPD_CONF if the changes needed to be captured in a Workbench Request. Else if the changes need to be made only for the respective system and client, then open the tcode /n/UI2/FLPD_CUST which captures the changes in customer layer.
14. This opens a URL in internet explorer. Copy the URL from internet explorer and open it in chrome.
    
15. Press the settings icon on top right corner to choose a Workbench TR and package where all the changes need to be captured. In case of /n/UI2/FLPD_CUST no TR needs to be provided as the changes are done only in the respective system on customer layer.
16. Ignore the below two steps if a Business Catalog and Business Group is already present that could be reused for the use case.
17. Then create a Business Catalog, from bottom left corner ADD (+) icon. Fill in the Title for catalog and provide the catalog id in a standard format of Z***_BC_*Catalogabbrevation*. Example ZTSP_BC_CUSTOMER.
18. Press the Groups tab from top left corner and create a group in the same way of catalog with a standard format of Z***_BCG_*Catalogabbrevation*. Example ZTSP_BCG_CUSTOMER.
19. Create a new unique semantic object with Z namespace as shown below for the application from the TCode /n/UI2/SEMOBJ using the new entries option and save the changes in a workbench TR.
    
20. Go back to Catalog section on the chrome portal and choose the second tiles facet to create a new tile using Create Tile option at bottom. Choose app launcher-static as tile type.
    
21. Fill in the title and choose the semantic object which was created before and an action from the list of actions and create a new tile.

NOTE: The combination of semantic object and action should always be unique for each app. For example, the combination ZSalesContract-manage should be used only for a single app. If the same semantic object needs to be used for different, you could keep changing the action names.

22. Select Target Mapping facet and press Create Target Mapping button. Choose the same semantic object and action combination as the Tile. The ID for the target mapping should be filled with the ID from manifest file of the UI5 application. In the example used above the module name is ztest which was provided during the creation wizard.
    
23. The URL Field should be filled with the path to the BSP application which is combination of /sap/bc/ui5_ui5/sap/ and the BSP name. For e.g.: if the BSP name is ztest, the URL would be “/sap/bc/ui5_ui5/sap/ztest”.
24. The completed Business catalog should look like below with a tile and target mapping for each app.
    
25. In the groups tab, search for the business group which was created before and choose the add option in Show as tiles section.
    
26. In the next screen search for the Business catalog in value help and then press the add button for the tile created. This creates a reference of the tile in the Business Group from Business Catalog to be shown in the launchpad.
27. Once both the business catalog and business group are configured, they must be added to the Business Role for which the app should be accessible. Open PFCG transaction and search for the Business Role. If needed a new business role could be created which can be captured in a customizing request.

NOTE: The below steps could be ignored if a new business catalog or business group isn’t created but reused and a new role isn’t created. i.e the business catalog and business group is already configured to a business role.

28. Go to Edit view of the business role and then select Menu facet. From the transaction drop down, choose SAP Fiori Launchpad -> Launchpad Catalog.
    
29. Search for Business Catalog which was created newly in the value help and continue. This will map the Business Catalog to the Business Role. Do the same steps for Launchpad Group from the transaction drop down and map the Business Group to the Business Role.
30. Once all the above steps are completed successfully, the app tile will be visible to the user once the role is assigned to the user.

The launchpad can be opened using the TCode /n/ui2/flp.

Troubleshooting:

If the app is still not opening from launchpad, then go to SICF transaction and search for the BSP path in the service path and execute.

Right click on the bsp name and check whether the service is activated or not. If not press activate service and refresh the launchpad and check again.

Debug Your SAPUI5 App with SAP Business Application Studio

https://developers.sap.com/tutorials/appstudio-sapui5-debug.html

In a nutshell, SAP introduced Business Application Studio to overcome SAP Web IDE limitations and extend support for modern application development in intelligent enterprise scenarios. SAP Business Application Studio takes the developer experience to a whole new level, offers more value, a better time to market with many new capabilities, more control over the environment, an improved extensibility framework, and more content. Developers may find it especially useful for SAP Cloud Platform ABAP environment development, Cloud Application Programming (CAP) model development, and native SAPUI5 development. Connect with TSP experts anytime to develop intuitive, end-to-end applications for your critical business scenarios.