Applying Style and Layouting

After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Use themes 
  • Design the style in SAP Build Apps
  • Perform advanced layouting


With SAP Build Apps, you cannot only quickly build functional user interfaces, but also create applications that look appealing, are user-friendly, and allow individual components to be visually adapted to the needs of the user and company. Themes play an important role here and are used to determine the design and handling of an app. Many style properties are readily available in the menu to change the appearance of the application.

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. On the other hand, this has the advantage that developers can save time and focus more on development thanks to the rapid adjustment and configuration with themes.

To work on the design and change the look of your app, you can use the theme editor. You can access the theme editor on the upper part of the registration card. There you can find different color palettes and select an already available or create one that fits your needs or, for example, your company's corporate design.

SAP Build Apps benefits from smart colors. These can be used to optimize the user experience. After the configuration of the smart content color, the components automatically adjust to the background color, for example, if it is changed from a light background to a dark background.

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. For example, you can set the configuration for text size, border, shadow, spacing, and font with the given options. You can also easily set new theme variables. The big advantage is that you can also make all variables dynamic here using the binding option.

If you want to use the default themes, there are two theme groups (Universal theme and Fiori theme) currently available, with various design possibilities to adapt the design of the apps to your need.

SAP Build Apps Styles

When using components, a distinction must be made between it as a UI element with its properties and how it's procured with regards to the style. The style and appearance of a component don't affect the functions of this component. However, it is important to steer the desired usability of the app and the usage behavior.

In the example of a button component, it can contain a description and trigger actions at the touch of a button, but the same button can differ in color, shape, and size. The design then refers separately to the intention in a certain situation. This can, for example, that a button is red or green, depending on the status in an ordering process to show if all information is available and the button can be choosen or the size, to indicate whether it is an important main button to continue an action or a small button for an intermediate adjustment.

Style Classes

Depending on the type of the component, there are different style settings that come with it. But the focus is on the style classes. By default, there are always already fully defined, which you can select directly, such as "Primary", "Secondary", "Tertiary", "Danger", and "Success" and therefore already have a suitable style for many use cases.

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.

You can also edit style classes and create your own. This offers the advantage that you can adjust it even more precisely with the possibility of setting many other style settings, whether you now want the component to be rounded at the corners, have a shadow, or the font type is adjusted. There are countless possibilities. There is a great advantage for each setting that even more dynamics can be introduced by means of a binding.

Background Style

Apart from components, a page itself can also be changed in the Style tab. So you can make the background more appealing by adjusting the app background color or setting the padding. But there are also advanced options, such as disabling scrolling a page.

However, instead of coloring the background, you can also select a background image for the page that you can choose from, for example, the assets or binding. Here, the container is then used, whose layout itself can still be changed with regard to the margins, in order to optionally avoid a border.

Customize the Style of the Entry Page

Business Scenario

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

To learn, how to customize the style of the entry page, follow the simulation below.

If you have access to an SAP System, you can perform the steps, shown in this simulation. You will find a description of the steps in the PDF, which is shown on the first page. Just click on the link to download the PDF.

Page and Component Layout

You can use the layout tab to configure the layout of components and the layout of the selected page or component. The page layout can be achieved by choosing a space on a free area. This makes it possible to change the alignment of all components on this page at the same time, which are then aligned to the left, center, or right.

Other important categories in the Layout Tab are the setting of the components in terms of width and height, as well as the position. You can also manipulate your content there with the Z-index that enables a better user experience. Z-index is a property that allows you to control the order of elements on your page. It works by assigning each element a numerical value (the z-index) and then using this number to determine which element should be displayed in front of or behind another element. The higher the z-index, the closer an element displays to the viewer.

Space Between Components

When a component is selected, additional options appear in the Layuot tab. These options are influenced by the concept of Space between Components. Instead of using margins, the concept of component gap is introduced. The component gap determines the spacing between components, essentially acting as the "gap" between them. This approach significantly enhances the intuitive workflow for component spacing, while preserving the ability to customize every aspect as needed. Moreover, the component gap behaves consistently whether the layout is vertical or horizontal. This unified approach ensures a seamless experience in managing component spacing.

Customize the Layout of the Entry Page

Business Scenario

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

To learn, how to customize the layout of the entry page, follow the simulation below.

If you have access to an SAP System, you can perform the steps, shown in this simulation. You will find a description of the steps in the PDF, which is shown on the first page. Just click on the link to download the PDF.

How to Customize Style and Layout of the Event Page

Business Scenario

Since it has been demonstrated before, a demo now shows further steps on how style and layout could be adapted from the second page.

If you have access to an SAP System, you can perform the steps, shown in this simulation. You will find a description of the steps in the PDF, which is shown on the first page. Just click on the link to download the PDF.

Log in to track your progress & complete quizzes