Developing Apps with SAP Build Apps — part 2

So let’s move to the part 2 of the SAP Build apps where we will talk about the components which helps in Building UI of an APP.

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.

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.

The components in SAP Build Apps are divided into several sections

1. Image and Icon Components : Add most basic building blocks of an app
2. Title and text components
3. card components
4. Button Components : Stimulate interactions and start logic processes by triggering actions
5. Form components : it extracts user information and enable interactions
6. List Components:
7. layout components: it helps in building the layout of the Ui

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.

Using properties:

To ensure that the UI of an application is adapted to its requirements regarding the context, dynamic appearance, and functionality, the properties of the components, in particular, are an advantageous factor.

Components have properties that can be bound to static values, variables, formulas, and also other component properties.

For eg: link a data variable to a UI component to display the data.

Business scenario :

Adjust the properties of the components and the pages after the components are integrated.

Applying Style and Layouting

The advantage of themes is that they bring different styles, colors, or fonts with different collections, on one hand, to ensure that the design always appears consistent.

SAP Build Apps benefits from smart colors. These can be used to optimise the user experience.

Using the theme variable, the design can also be set apart from the colors, which then adapt all elements of the app as the chosen setting.

Style Class: A style class defines values for all the style properties of the component, so switching to a different style class will completely change the way your component looks.

Customise the Style of the Entry Page

Business Scenario:

The next step to complete the UI is to customise the style properties so that the design of the pages, components, and font matches the functionality of the app as well as appearance.

Customise the Layout of the Entry Page

Business Scenario

The last step to customise the UI is to configure the layout so that the positions and arrangements of the components fit and are user-friendly.

Using Marketplace and Own Components

if you want to develop a more customised app and add special components, you can use the Components Marketplace.SAP Build Apps as a component marketplace provides more than 500 prebuilt drag and drop components, which you can quickly install and use with or without customisation.

Use Components from the Marketplace

Business Scenario

Explore the Marketplace and install a component to evaluate the tracker function.

Create Your Own Component

Business Scenario

After using the main components and a component from the Marketplace, you will now build a custom component that maps the data from the tracker history. A separate page will be used for this.

Binding Types that are available for a text Component are as below

Static Value

Component Properties

Formula

Some of the predefine style classes of the button component exist in sap build apps

a. primary button

b. secondary button

c. Danger Button

This is the page which i build using all the components , their properties, also created a component from the marketplace in the page which i created in the first part for which i will provide the link below

The link for the first part is below for your reference

Developing Apps with SAP Build Apps— part 1

Hope you learned something from this content. Stay tuned for the next part. Give a thumbs up or claps to support my content. That will motivate me.

Disclaimer: This is my learning from sap learning hub — i am posting my learning so as to help anybody like me who is trying to learn new skill in 2025. Happy learning!