Develop a Custom UI for an SAP S/4HANA Cloud System

SAP Business Application Studio is a subscription-based service in SAP BTP. The SAP trial account offers a Quick Tool Access directly from https://account.hanatrial.ondemand.com, however the following sequence describes the procedure via the global account in SAP BTP cockpit as needed for customer accounts. By choosing the trial specific Quick Tool Access (red dashed box) you can skip the following sequence.

1. In your web browser, open the SAP BTP Trial cockpit https://account.hanatrial.ondemand.com and Go To Your Trial Account, which is a so called global account.

   

2. On your global account page, select default subaccount trial.

   

3. In the navigation pane expand the Services section.

   

4. Select Instances and Subscriptions.

5. Click the link or the icon at the SAP Business Application Studio Subscription.

SAP Business Application Studio offers UI generators with a wizard approach to create UI projects.

1. Start your Dev Space in case it is not running

   

2. Open your Dev Space

   

3. Click the three lines on top of the navigation to open View > Command Palette….

   

4. Search for command >Fiori: Open Application Generator and execute it.

   

As UI project template choose List Report Page (1) and click Next (2).

During the Data Source and Service Selection step, you define which system and OData Service the UI is based on, so that data structure and action information is used to generate a UI. It’s also used for the preview to show and change data.

1. As your Data Source, select Connect to a System.

2. As your System, choose the destination you have created earlier in the tutorial Connect SAP Business Application Studio and SAP S/4HANA Cloud system.

3. Select the OData service of your custom business object which ends with _CDS, for example YY1_BONUSPLAN_CDS.

4. Click Next.

In this step you define the root node for your UI in the OData service.

1. As Main Entity, select the custom business object root node YY1_BONUSPLAN.

2. Choose Next.

In this step, you set project attributes and choose to add further optional configurations.

1. Define a Module name, which will later be the folder name of the UI Project and - in combination with optional namespace - the application ID in SAP S/4HANA Cloud system. Example: bonusplans

2. Set the Application title, which will be visible as the browser tab title and title within the app. Example: Bonus Plans

3. Choose to Add Deployment configuration within the wizard by selecting Yes.

4. Choose to Add FLP configuration within the wizard by selecting Yes.

5. Select Next.

In this step, you define where you want the UI project to be deployed to as a runnable application.

1. Leave the default ABAP as target platform and as Destination the one you have created earlier (see Connect SAP Business Application Studio and SAP S/4HANA Cloud system).

2. Enter a name for the SAPUI5 ABAP Repository. This is the repository that will be created and where the application will be deployed to. Example: YY1_BONUSPLAN. This repository name will be visible as your Custom UI App ID in your SAP S/4HANA Cloud system.

3. Enter a Deployment Description for the UI5 ABAP repository. This repository description will be visible as Custom UI App Description in your SAP S/4HANA Cloud system.

4. Select Next.

Note that you can also configure the deployment later via the command line interface by using the following command:

Shell/Bash

Copy

npx fiori add deploy-config

The SAP Fiori launchpad (FLP) configuration is required to embed your application as a tile into the FLP.

1. Set a Semantic Object, for example bonusplan

2. Define the general Action that you want to be executed on the semantic object with the app, for example manage

3. Enter a Title, which will be displayed as the tile title in the FLP, for example Manage Bonus Plans

4. Select Finish.

The UI project is now being generated and dependencies are being installed. This may take a while and is displayed at the bottom right.

Once the generation finished a pop up appears to ask if and how to open it. Choose Add project to workspace

Note that you can also configure the launchpad later via the command line interface by using the following command:

Shell/Bash

Copy

npx fiori add flp-config

In case your SAP Business Application Studio’s explorer does not show the project, do the following.

1. To view the newly created project in the explorer with all features, select Open Folder.

   

2. Choose the home/user/projects folder and select OK.

   

In this step, you can test the UI with the preview functionality.

1. After Opening the project, Business Application Studio also opens an Application Info tab. Click the Preview Application tile.

   

   Note that in case there is no Application Info tab you can open it from the context menu of the project:

   

2. Select the start option, which will perform a preview based on the configured data source system, retrieve real data and enable you to create, edit and delete data in that system.

   

   A terminal is opened that automatically executes the underlying command.

   

   Once the command has reached the required state, a new browser tab with the preview is opened.

   Alternatively to Preview from Application Info tab, you can open a terminal for your project by right-clicking it and choosing Open in Integrated Terminal from the context menu.

   

   In the cli (command line interface) terminal, enter the following command:

   Shell/Bash

   Copy

   npm run start
   

   Press return.

3. To view existing entries, select GO or Create to add a new entry.

   

Once the UI is set up to your needs, you can deploy it to the development SAP S/4HANA Cloud system, where it can be tested and transported to test or productive tenants.

1. In the Application Info tab, click the Deploy tile

   

   Alternatively to Application Info, in the cli (command line interface) terminal, enter the following command:

   Shell/Bash

   Copy

   npm run deploy
   

   

   Press return.

2. Check the deployment configuration.

   

3. Confirm the deployment by entering y

   

4. Deployment will start, which might take a while.

   

   Once the deployment is completed, a Deployment Successful. message is displayed in the log.