Create a Responsive User Interface Application

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

   

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

   

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

   

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

   

5. For Data Objects, select the following, and choose Finish.

   Step	Parameter	Value
   A	Main entity	Capex
   B	Automatically add table …	Yes (default)

   

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

1. If the preview is running, choose Stop Preview. If the Project Preview tab is open, close it.

2. Choose Preview and select Run CapitalExpenditures-1..

   

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

   

4. Choose Go to view the data in a list page.

   

   You can view the data in a list page.

   

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

   

6. Choose the Back option to return to the list page or twice to return to the launch page.

   

To avoid clicking on the 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.

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

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

   

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

   

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

   

5. Choose the Table element.

   

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

   

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

   

1. In the Page Map editor of SAP Business Application Studio for low-code development, expand Columns.

   

2. Choose description.

   

3. Change the Label to Description.

   

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

   

5. Repeat the previous steps to change the contractor_contractor Label to Contractor.

   

6. Go back to the application’s tab. You can see that the column titles changed as per your updates.

   

1. In the Page Map editor of SAP Business Application Studio for low-code development, choose contractor/name for the Text property.

   

2. Choose Text Only for the Text Arrangement property.

   

3. Go back to the application’s tab. You can see that the ID is replaced by the name of the contractor.

   

1. In the application’s tab select one object, for example, Bicycles. The column titles are not updated yet. In this step we will change the column titles for the single objects.
   

   

2. In the SAP Business Application Studio for low-code development, choose the Page Map option.

   

3. Choose the edit option of the Object Page.

   

4. Expand General Information -> Form -> Fields.

   

5. Make the following changes to the Fields Label property. (Repeat the steps listed in the two previous sections.)

   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_contractor	Contractor

   

6. Go back to the application’s tab. You can see that the titles are changed as per your updates.

   

1. In the Page Map editor of SAP Business Application Studio for low-code development, hover over Sections, and choose the Add Sections option.

   

2. Choose Add Form Section.

   

3. Set the Label to Contractors and choose Add.

   

4. Expand Contractors -> Form.

   

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

   

6. Go back to the application’s tab. You can see that a new Contractors section appears with the Contractor field.

   

1. In the Page Map editor of SAP Business Application Studio for low-code development, choose Header.

   

2. For the Title property choose description.

   

3. Go back to the application’s tab. You can see that the object page title changed as per your updates.

   

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.