Skip to Content

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

test
0 %
Develop a Custom UI for an SAP S/4HANA Cloud Tenant
Details

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

Requires Customer/Partner License
Ulrike Liebherr
Ulrike Liebherr
July 13, 2021
Created by
Ulrike Liebherr
July 13, 2021
Beginner
25 min.
ABAP Extensibility, Beginner, Cloud, Tutorial, SAP Business Technology Platform, SAP Business Application Studio
Develop a custom UI based on a custom business object OData service in SAP Business Application Studio for an SAP S/4HANA Cloud tenant.

You will learn

  • How to generate a Fiori elements list report with object page UI
  • How to preview the UI
  • How to deploy the UI as custom application to your SAP S/4HANA Cloud tenant
  • This process of custom UI development is the way to go if the UI generated within the SAP S/4HANA Cloud tenant does not match your needs
QR code

Prerequisites

  • You have an SAP S/4HANA Cloud tenant for development and a business user with UI Development authorization (this requires a business role with unrestricted write access containing business catalog Extensibility - Fiori App Development SAP_CORE_BC_EXT_UI).
  • You have a custom business object with OData service running in the SAP S/4HANA Cloud tenant, for example YY1_BONUSPLAN, see Create a Custom Business Object and first two steps of Expose Custom Business Object as External Web Service
  • You have an SAP Business Technology Platform (SAP BTP) trial account with an SAP Business Application Studio subscription and a dev space within that, see preceding tutorials of this tutorial group

You can get a generated UI for your custom business object and adapt it to your needs within the SAP S/4HANA Cloud tenant (in-app-extensibility). As building UIs in SAP BTP (side-by-side extensibility) offers more possibilities than in-app-extensibility, this tutorial gives you an idea how to build a UI based on a custom business object’s OData service in SAP Business Application Studio, test it, and get it into the SAP S/4HANA Cloud tenant.

Tutorial last updated in May 2021

Step 1: Launch SAP Business Application Studio

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.

    Enter Global Trial Account

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

    Enter trial Subaccount

  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.

Open SAP Business Application Studio from Subaccount
Done
Log on to answer question
Step 2: Open UI project creation wizard

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

    Start Dev Space

  2. Open your Dev Space

    Open Dev Space

  3. Go to View > Find Command.

    Open “Find Command”

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

    search and choose “Fiori: Open Application Generator” command
Done
Log on to answer question
Step 3: Select floorplan

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

UI Wizard: Floorplan Selection
Done
Log on to answer question
Step 4: Select Data Source

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.

UI Wizard: Select Data Source

  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.

Done
Log on to answer question
Step 5: Select entity

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

UI Wizard: Select Entity

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

  2. Choose Next.

Done
Log on to answer question
Step 6: Set Project Attributes

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

UI Wizard: Set Project Attributes

  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.

Done
Log on to answer question
Step 7: Configure deployment settings
View Full Instructions

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

UI Wizard: Configure Deployment Settings

  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:

npx fiori add deploy-config
Done
Log on to answer question
Step 8: Configure SAP Fiori launchpad settings and generate
View Full Instructions

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

UI Wizard: Configure FLP settings

  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.

Installation toast on bottom Right

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

npx fiori add flp-config
Done
Log on to answer question
Step 9: Open UI project folder

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

    Choose Open Folder Option

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

    Choose projects folder to open
Done
Log on to answer question
Step 10: Preview UI

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.

    Start Preview

  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.

    Choose start preview option

    A terminal is opened that automatically executes the underlying command.

    At preview opening terminal

    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.

    Resulting preview browser tab
Done
Log on to answer question
Step 11: Deploy UI to S/4HANA ABAP tenant
View Full Instructions

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.

    Open Project in Terminal

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

    npm run deploy
    Enter deploy command in cli

    Press return.

  3. Check the deployment configuration.

    Check deployment configuration in command output

  4. Confirm the deployment by entering y

    Confirm deployment configuration

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

    Deployment log

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

Done
Log on to answer question
Step 12: Test yourself
Does the app work if you deploy it to another system than the one that was set as data source for development?
×

Next Steps

Navigate tutorial steps

QR Code

QR code
Back to top