Show TOC

Declarative SupportLocate this document in the navigation structure

Declarative programming allows you to define the UI within the HTML document as elements.

For this, SAPUI5 provides the sap.ui.core.plugin.DeclarativeSupport plugin that can be included either as required or marked as a module in the initial bootstrap script tag. The plugin parses the document and converts its tags with special attributes into SAPUI5 controls.

Declarative support is aware of properties, associations, events, and aggregations in a SAPUI5 control manner. This means that you can specify them within the markup of the HTML document either as data attributes or as child elements.

The following sections provide an overview of the declarative support and introduce the use of declarative support in SAPUI5.

Example

The following example shows the concept by combining a sap.ui.commons.TextField with a sap.ui.commons.Button control. When you click the button, the value of the text field is displayed in an alert box:

<!Doctype HTML>
<html>  <title>Declarative Programming for SAPUI5 - sample01</title>
<script id="sap-ui-bootstrap"
     type="text/javascript"
     src="resources/sap-ui-core.js"
     data-sap-ui-theme="sap_bluecrystal"
     data-sap-ui-libs="sap.ui.commons"
     data-sap-ui-modules="sap.ui.core.plugin.DeclarativeSupport"
     >
  </script>

</head>
<body class="sapUiBody">

  <div data-sap-ui-type="sap.ui.commons.TextField" id="message" class="my-button" data-value="Hello World"></div>
  <div data-sap-ui-type="sap.ui.commons.Button" data-text="Click me!" data-press="handlePress"></div>

</body>
</html>
Summary: Attributes Used by Declarative Support

The table summarizes the attributes used by declarative support and gives examples.

Attribute Description Example
data-sap-ui-type Type of control <div data-sap-ui-type="sap.ui.commons.Button"></div>
data-sap-ui-aggregation Defines the aggregation that shall be used for the element or child element <div data-sap-ui-type="sap.ui.commons.Panel"><div data-sap-ui-aggregation="title" data-sap-ui-type="sap.ui.commons.Title" data-text="My Panel"></div></div>
data-sap-ui.default-aggregation Sets or overrides the default aggregation of a control <div data-sap-ui-type="sap.ui.commons.Panel" data-sap-ui-default-aggregation="title"><div data-sap-ui-type="sap.ui.commons.Title" data-text="My Panel"></div></div>
id Defines the ID property of a control <div data-sap-ui-type="sap.ui.commons.Button" id="myButton"></div>
class Adds a style class to the control <div data-sap-ui-type="sap.ui.commons.Button" class="myButton"></div>
More Information

Start of the navigation path sap.ui.core Next navigation step DeclarativeSupport End of the navigation path.