Show TOC

Declarative Support: PropertiesLocate this document in the navigation structure

For setting a property, define the property as a data attribute of the corresponding HTML tag.

To add text to the button, add the attribute data-text to its HTML tag: 

<div data-sap-ui-type="sap.ui.commons.Button" data-text="HelloWorld"></div>
Note

To define a property with upper case characters, you have to "escape" them with a dash character, similar to CSS attributes. The following code gives an example:

<div data-sap-ui-type="sap.ui.commons.ApplicationHeader" data-display-logoff="false" data-display-welcome="false"></div>

As the name of the attributes of HTML tags are case-insensitive, the properties displayLogoff and displayWelcome of the ApplicationHeader control have to be "escaped" as data-display-logoff and data-display-welcome for the name of the attributes of the HTML tag. Keep this in mind when matching properties, associations, or events as an attribute of the HTML tag.

The id attribute defines the ID of a control: 

<div data-sap-ui-type="sap.ui.commons.Button" id="myButton"></div>

To add a CSS class to the control, use the class attribute: 

<div data-sap-ui-type="sap.ui.commons.Button" class="my-button"></div>