Skip to Content

Create a Responsive User Interface Application

test
0 %
Create a Responsive User Interface Application
Details

Create a Responsive User Interface Application

Requires Customer/Partner License
November 14, 2021
Created by
November 14, 2021
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)
QR code

Prerequisites

  • You have access to your Application Development Lobby.


Step 1: Create an application
  1. From the home page, click the + of the User Interface tile.

    bas lcap launch create ui wizard
  2. For UI Application Details, choose the following, and choose Next.

    Step Parameter Value
    A Application name CapexReport
    B Description List of Expenses
    bas lcap launch create ui wizard - ui application details
  3. For UI Application Type, select Template-Based, Responsive Application, and choose Next.

    bas lcap launch create ui wizard - ui application type
  4. For UI Application Template, select List Report Object Page, and choose Next.

    bas lcap launch create ui wizard - ui application template
  5. For Data Objects, select the following, and choose Finish.

    Step Parameter Value
    A Main entity Capex
    B Automatically add table … Yes (default)
    bas lcap launch create ui wizard - data objects
  6. Wait for the success notification ( The files have been generated ) to appear.

    bas lcap launch create ui wizard - app generation completed

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

    The Page Map (CapitalExpendituresCapexReport) editor is opened side-by-side to the home page.

Log on to answer question
Step 2: Preview the app
  1. Choose the Preview option to preview (test run) the app.

    bas lcap preview app - launch preview
  2. Select the /launchpage.html link to launch a launch page with the app’s tile in it.

    bas lcap preview app - launch launch page
  3. Choose the application’s tile to launch the app.

    bas lcap preview app - launch app
  4. Choose Go to view the data in a list page.

    bas lcap preview app - present data

    You can view the data in a list page.

    bas lcap preview app - data presented
  5. You can optionally click one of the list items to view its object page.

    bas lcap preview app - present object page
  6. Choose the Back option to return to the list page or twice to return to the launch page.

    bas lcap preview app - return to list page
Log on to answer question
Step 3: Customize the app: Enable initial load of data in the list page

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.

  1. Click the Back button until you return to the launch page.

    bas lcap enable initial load - return to launch page
  2. Choose the application tile to launch the app.

    bas lcap enable initial load - launch 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.

    bas lcap enable initial load - launch app
  4. Go back to the homepage of SAP Business Application Studio for low-code development, and choose the edit button of the List Report page.

    bas lcap enable initial load - launch list report edit
  5. Choose the Table element.

    bas lcap enable initial load - launch table element properties
  6. For the Initial Load property, choose Enabled in the drop-down.

    bas lcap enable initial load - set table property to enabled
  7. Access application tab. Now, the data appears in the table without choosing the Go option.

    bas lcap enable initial load - table auto-reloaded
Why does the user need to click the Go button to see data?
×
Step 4: Customize the app: Update table column titles
  1. In the Page Map editor of SAP Business Application Studio for low-code development, expand Columns.

    bas lcap list page update columns title - expand columns
  2. Choose description.

    bas lcap list page update columns title - open description properties
  3. Change the Label to Description.

    bas lcap list page update columns title - change description label
  4. Repeat the previous steps to change total_cost Label to Total Cost.

    bas lcap list page update columns title - change total_cost label
  5. Repeat the previous steps to change contractor_contractor Label to Contractor.

    bas lcap list page update columns title - change contractor_contractor label
  6. you can see that in the application’s tab the column titles changed as per your updates.

    bas lcap list page update columns title - preview app
Log on to answer question
Step 5: Customize the app: Present contractor name
  1. In the Page Map editor of SAP Business Application Studio for low-code development, choose contractor/name for the Text property.

    bas lcap list page present contractor name - set text property
  2. Choose Text Only for the Text Arrangement property.

    bas lcap list page present contractor name - set text arrangement property
  3. You can see that in the application’s tab the ID is replaced by the name of the contractor.

    bas lcap list page present contractor name - preview app
Log on to answer question
Step 6: Customize the app: Change titles in the object page
  1. In the SAP Business Application Studio for low-code development, choose the Page Map option.

    bas lcap object page change titles - show page map
  2. Choose the edit option of the Object Page.

    bas lcap object page change titles - launch object page edit
  3. Expand General Information -> Form -> Fields.

    bas lcap object page change titles - expand
  4. 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
    bas lcap object page change titles - change titles
  5. You can see that in the app’s tab the titles are changed as per your updates.

    bas lcap object page change titles - preview app
Log on to answer question
Step 7: Customize the app: Add contractor section to the object page
  1. In the Page Map editor of SAP Business Application Studio for low-code development, hover over Sections, and choose the Add Sections option.

    bas lcap object page add section - add section
  2. Choose Add Form Section.

    bas lcap object page add section - add form section
  3. Set the Label to Contractors and choose Add.

    bas lcap object page add section - set form section label
  4. Expand Contractors -> Form.

    bas lcap object page add section - expand contractor form section
  5. Drag and drop Contractor from General Information -> Form -> Fields to Contractors -> Form.

    bas lcap object page add section - move contractor between form sections
  6. You can see that in the application’s tab, a new Contractor section appears with the Contractor field.

bas lcap object page add section - app preview

Log on to answer question
Step 8: Customize the app: Change object page title
  1. In the Page Map editor of SAP Business Application Studio for low-code development, choose Header.

    bas lcap object page change title - select header
  2. For the Title property choose description.

    bas lcap object page change title - change title property
  3. You can see that in the application’s tab the object page title changed as per your updates.

    bas lcap object page change title - app preview
Log on to answer question

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.


Next Steps

Back to top