Applying Style and 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.

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 be, for example, that a button displays in red or green, depending on the status in an ordering process. This is to show if all information is available and the button can be selected. Or, another possibility is the size, to indicate whether it is an important main button to continue an action or a small button for an intermediate adjustment.

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.

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.

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 will display in front of or behind another element. The higher the z-index, the closer an element displays to the viewer.

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.