Using Properties

Objectives

After completing this lesson, you will be able to:

  • Describe properties fundamentals and bindings
  • Explain advanced properties
  • Explain the repeating components function

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. The settings in the properties differ depending on the chosen component and allow easy adjustment of the components on the UI.

The properties of the currently selected components display in the Properties panel on the right. The default property is defined depending on the component. For static property values, you can also add them directly in the properties panel. The component properties can be bound using the binding in front of the value of a property.

Bindings

Components have properties that can be bound to static values, variables, formulas, and also other component properties. This makes it possible to use the same component in different ways and adapt it to your needs. For example, if a text component is selected, it can simply be assigned a static name, which would be the default method. Another example is that you can link a data variable to a UI component to display the data.

However, there are many other ways to make the content dynamic instead. In this case, a connection can be used, for example, to display a text or name adapted to the user from a variable assigned to that user or also time and date, and more. The options are unlimited and are made possible by the different types of binding that can be selected in the properties of each component.

Advanced Properties

Under the Advanced Properties, you can find a field for the component display name which allows you to customize the component name in the view canvas and tree view. Giving components custom names can be very useful when working with more complex layouts and more components.

There is also the properties setting Visible that is very useful to have a dynamic control about how users can see components and content they need. The visible property can be bound using the binding that enables dynamic control of the component visibility.

Note that if you set the default visibility to false, you need to use the tree view to select the component again.

Repeating Components

An important and useful option for SAP Build Apps is the Repeat with function in the properties to create components automatically and dynamically with a simple binding.

For this, you need a source for a list of objects. The component will then be repeated for each single item in the list. This is a frequently used function for the list components in particular. However, this property setting can be applied to all available components.

Set the Properties of the Components

Business Scenario

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

Exercise Options

To start the exercise, choose Start Exercise in the figure below.

A pop-up opens. You have the following options:

  • Start: the simulation starts. Follow the simulation to learn how to set the properties of the components.
  • Open PDF Document: a pdf opens. Based on the steps described in this document, you can perform the exercises in your own system landscape.

Log in to track your progress & complete quizzes