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

SAP Business Application Studio is a subscription-based service in SAP BTP. The SAP trial account offers an easy 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.

1. In your web browser, open the SAP BTP Trial cockpit https://account.hanatrial.ondemand.com and Enter 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. Go to View > Find Command.

   

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

   

For Application Type, select the default SAP Fiori Elements, choose List Report Object Page as Floorplan and click Next.

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 an SAP System.

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

3. Select your the OData service of your custom business object 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 tenant. 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 set the 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 tenant).

2. Enter a Name that represents the UI5 ABAP repository 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 tenant.

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

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.

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

1. To view the newly created project in the Explorer, select Open Folder.

   

2. Choose the user/projects folder and select Open.

   

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

1. Right-click the project folder and choose Preview Application from the context menu.

   

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.

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 tenant, where it can be tested and transported to test or productive tenants.

1. Open a terminal for your project by right-clicking it and choosing Open in Terminal from the context menu.

   

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

   Shell/Bash

   Copy

   npm run deploy
   

   

   Press return.

3. Check the deployment configuration.

   

4. Confirm the deployment by entering y

   

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

   

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