Create a Responsive User Interface Application

Requires Customer/Partner License

Beginner

15 min.

SAP Business Application Studio, Beginner, SAP Fiori, SAP HANA Cloud, Tutorial, SAP BTP, Cloud Foundry environment, Free Tier, Mobile

Create a responsive application (user interface) that connects to your data through a service you previously created, using low-code capabilities of SAP Business Application Studio.

You will learn

How to create a responsive application for a service
How to preview your application
How to customize your application (for example, auto reload initial data and change titles)

Raz KornJanuary 24, 2022

Created byNovember 14, 2021

Contributors

Prerequisites

You have access to your Application Development Lobby.

Congratulations!

With this, you have successfully completed developing a business application using low-code capabilities of SAP Business Application Studio.

During the development you have modelled your business data. You have created a service through which data in the data model is accessed. You have created a user interface, which is actually an app, from which an application user can interact with the data. Throughout the development process, you continually test run the app, which is a development best practice to make sure the development is on-track.

And in this tutorial, you learned about high-productivity tools that are available out-of-the-box in SAP Business Applications Studio, such as: home page, project explorer, data model editor, service editor, templates and wizards, application editors, application preview, and much more.

Step 1
From the home page, click the + of the User Interface tile.

For UI Application Details, choose the following, and choose Next.
Step Parameter Value
A Display name Capex Report
B Application name CapexReport
C Description List of Expenses

For UI Application Type, select Template-Based, Responsive Application, and choose Next.

For UI Application Template, select List Report Object Page, and choose Next.

For Data Objects, select the following, and choose Finish.
Step Parameter Value
A Main entity Capex
B Automatically add table … Yes (default)

Wait for the success notification ( The files have been generated ) to appear.

The app is added to the User Interface tab in the home page.

The Page Map (CapexReport) editor is opened side-by-side to the home page.
Step 2
If the preview is running, choose Stop Preview. If the Project Preview tab is open, close it.

Choose Preview > With Sample Data to preview (test run) the app.

In the Project Preview tab, choose the Capex Report application’s tile to launch the app.

Choose Go to view the data in a list page.

You can view the data in a list page.

You can optionally click one of the list items to view its object page.

Choose the Back option to return to the list page or twice to return to the launch page.
Step 3
To avoid clicking on Go option every time you want to present the information in the list page, in this section you’ll configure the page to load the initial data as soon as it is loaded.

Close the browser tab where the Capex Report application is running.

In the Project Preview tab, choose the Capex Report application’s tile to launch the app.

The app is loaded with an empty list page.
From this step onwards you’ll leverage the auto-refresh capability of the development environment. Every time you make any new change to the app, it gets refreshed automatically and you can view the updated changes.

Go back to the homepage of SAP Business Application Studio for low-code development, and choose the edit button of the List Report page.

Choose the Table element.

For the Initial Load property, choose Enabled in the drop-down.

Access application tab. Now, the data appears in the table without choosing the Go option.

Why does the user need to click the Go button to see data?
In order to save database resources
By default the load initial data property is not set to enabled
To establish a secured tunnel between the app ad the on-premise system
There's a race condition that is solved by clicking the Go button.
Step 4
In the Page Map editor of SAP Business Application Studio for low-code development, expand Columns.

Choose description.

Change the Label to Description.

Repeat the previous steps to change total_cost Label to Total Cost.

Repeat the previous steps to change contractor_contractor Label to Contractor.

you can see that in the application’s tab the column titles changed as per your updates.
Step 5
In the Page Map editor of SAP Business Application Studio for low-code development, choose contractor/name for the Text property.

Choose Text Only for the Text Arrangement property.

You can see that in the application’s tab the ID is replaced by the name of the contractor.
Step 6
In the SAP Business Application Studio for low-code development, choose the Page Map option.

Choose the edit option of the Object Page.

Expand General Information -> Form -> Fields.

Repeat previous steps to make the following changes to the Fields Label property.
Hint: Trigger the Label update, by pressing [ENTER] or clicking somewhere on the screen.
Step Parameter Value
A description Description
B total_cost Total Cost
C contractor_contracotr Contractor

You can see that in the app’s tab the titles are changed as per your updates.
Step 7
In the Page Map editor of SAP Business Application Studio for low-code development, hover over Sections, and choose the Add Sections option.

Choose Add Form Section.

Set the Label to Contractors and choose Add.

Expand Contractors -> Form.

Drag and drop Contractor from General Information -> Form -> Fields to Contractors -> Form.

You can see that in the application’s tab, a new Contractor section appears with the Contractor field.
Step 8
In the Page Map editor of SAP Business Application Studio for low-code development, choose Header.

For the Title property choose description.

You can see that in the application’s tab the object page title changed as per your updates.