Exploring Fundamentals of Components

What is the role of User Interface (UI) in an app?

The UI covers what you will see and be able to do in the app. UI not only defines the elements that can be seen, but it also defines some of the basic interactions in the app. No-code development environments are typically equipped with a set of tools for creating a UI.

In SAP Build Apps, components are the powerful key to building apps easily and quickly that meet companies' most diverse needs and enrich work processes. A simple description of components is that they are prefabricated code pieces that can be used as building blocks with pre-defined functions to design the UI and enable the bridge to use logic.

Components can occur in any type of element, such as buttons, input fields, text areas, or images. There are no fixed limits to how big or small components can be. The smallest components can be like an individual icon or a divider line. The largest components can be a map component for geolocation or a video player. By prefabricating them, they promote an intuitive experience in the visual field of development and, with the provided functions, allow many development possibilities to be covered. However, if any specific additional requirements are needed, components can also be adapted and built based on appearance and functionality.

The components in SAP Build Apps are divided into several sections on the left side. At the top, you can find the image components that make it possible to add the most basic building blocks of an app. The title and text components are always present and combined with each other in different styles to prepare the information well. The card component combines text and title and is highlighted by the format of the component.

Primarily for the style, with image and icon components, an app can be designed to be user-friendly or more information targeted. The button components are predestined to stimulate interactions and start logic processes. Together with form components, the example app shown in the following exercise also depicts that most components occur frequently and, in combination with each other, often form the basis of an intuitive and dynamic app user interface.

Form components can be used to insert useful shapes in the app. These are particularly advantageous in order to exploit user information and enable interactions. It allows the user to trigger simple and more complex actions. The most frequently used component is the button component that is predestined to trigger an action by choosing it, even if other components are connected to logic and can also trigger actions by selecting it.

Input and password fields are essential for users to enter information that can be processed further, for example, to store and display or authenticate a user.

In addition, checkboxes, dropdown fields, and sliders provide a quick, intuitive way for users to select predefined values in these components. This information can then also be processed further by the app.

Creating lists using list components is an important and frequently used approach to SAP Build Apps. In order to display certain information using lists, the list components are usually connected to a database (source) where the stored data is located. Temporary information from the app combined with user input or new information that results from functions and forms can all be listed. Other options are, however, the connection through interfaces to data/information from the internet or other SAP or third-party solutions. The type of display with the components is diverse; there are those, using normal lists to which more than one piece of information is connected or to which images and icons will also display. With lists, in particular, it is important to use the properties component, which is explained in more detail in the next lesson, for a dynamic or targeted display.

By default, SAP Build Apps offers three layout components that allow you to design further options regarding the layout of the UI and to structure elements. You can just group components or do more complex actions, such as turn components in groups invisible or visible after a trigger as one section at the same time. In that way, layout components bring additional advantages for designing apps, such as:

• More clarity, especially with the layout tree.
• Display content sections side-by-side.
• Content and components can be easily proportioned and grouped.
• Enter several components at once as group.
• Intuitive display possible by scrolling in the defined area, so on.

Play the video to get an overview of the layout tree and learn how to use the layout tree offering of the SAP Build Apps.

Not only are the layout components useful for creating a clear structure, but - especially in combination with these - also the tree view, which can be found at the bottom right and provides a clear overview.

In the tree-view, the containers used are listed in their order to display the page layout. In this way, it can be advantageous to select components directly in the tree view since components display names that can be assigned to components also displays there.

Another useful method there is that you can move and restructure components using drag and drop with the support of a helper line that appears.

If a layout component is used, this also displays in the tree-view. However, there is still the advantage that you can use other components that are subordinate to the layout component and can be expanded and collapsed in the view.