Designing the Extension App’s User Interface in SAP Build Apps

In this lesson, I’ll demonstrate how to design the extension app’s user interface (UI) and application logic using the App Editor in SAP Build Apps. Then I’ll show you how to run and preview the no-code extension app.

The following screen capture illustrates the App Editor with different areas highlighted that will be explained below.

1. Navigation Bar: Allows you to switch between the User Interface tab, Variables tab, and the Integrations tab. App Settings allow you to change Themes, Navigation, and Authentication details.
2. Page Selection: Shows the name of the current page (in the example Home Page) and contains a list of all other pages in your app, as well as an option to add a new page.
3. Component Library: Contains core components, such as containers, texts, and input fields that you can drag & drop to the View Canvas in the middle of the screen to build your app’s user interface. The Marketplace provides additional components with advanced features that you can add to your project. Find the components from the Marketplace in the Installed tab of the component library after you have added them.
4. View Canvas: This area displays the user interface of the page you’re currently working on.
5. Properties: Edit the properties, style, and layout of the component currently selected in the view canvas.
6. Logic Canvas: Allows you to visually compose the logic of your app by dragging and dropping flow functions from the library on the left to the designer area in the middle and connecting them.
7. Components Tree: It shows all components placed on the screen and their structure. You can use these options when working with deeply nested layouts.
8. Learning Status Bar: Access beginner tutorials regarding the basics of SAP Build Apps in written and video form.

For further details, please view the tutorials in the learning area at the bottom of the App Editor, refer to other learnings on learning.sap.com or review the documentation for SAP Build Apps in the SAP Help Portal.

Now that the project is created, you can start designing the app’s user interface. The image below is an example of what the user interface will look like after it’s been designed.

It consists of three design blocks:

1. Account and contact information.
2. Appointment information, such as date, time, and location.
3. Schedule button.

This allows the user to schedule a meeting according to the selected settings.

The following video demonstrates how to design the user interface.

The Container component is essential for structuring pages and creating different layouts from simple to complex by nesting components and further containers within itself. You can control their alignment with several settings on the Layout panel and adapt the container's appearance from the Style panel.

Three settings were shown in the video to demonstrate some of the capabilities:

• The layout was changed from vertical to horizontal.
• The option Clip overflowing content was disabled to allow the date drop-down to be fully visible and not cut off by the container's border.
• The Z-index of some components was modified to fix the date drop-down being displayed behind other components. Usually, the Z-index is controlled automatically with the value auto. The current version of the date field requires it.

A calendar component or widget allows users to select a date rather than requiring them to type it into a free text field. This is important because date formats can vary by region and user language, making it cumbersome and error-prone to parse them. The same principle applies to time values.

SAP Build Apps provides different components for date and time user inputs. The following screen capture displays the marketplace calendar components options.

The two highlighted components in the first row are visual flow functions that can be placed on the logic canvas. They prompt the user with a pop-up dialog to select either a date or a combined date and time. However, the current version of these components is only compatible with mobile devices. Therefore, I will use the Date field component from the second row, which provides a calendar pop-up for users, alongside a simple input field for entering the time value