Step 3: Controls

Now it is time to build our first little UI by replacing the “Hello World” text in the HTML body by the SAPUI5 control sap.m.Text. In the beginning, we will use the JavaScript control interface to set up the UI, the control instance is then placed into the HTML body.

Preview

Figure 1: The "Hello World" text is now displayed by a SAPUI5 control

Coding

You can view and download all files in the Explored app in the Demo Kit under Walkthrough - Step 3.

webapp/index.html

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
      <script
         id="sap-ui-bootstrap"
         src="/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_bluecrystal"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-preload="async" >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
            new sap.m.Text({
               text : "Hello World"
            }).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>

Instead of using native JavaScript to display a dialog we want to use a simple SAPUI5 control. Controls are used to define appearance and behavior of parts of the screen.

In the example above, the callback of the init event is where we now instantiate a SAPUI5 text control. The name of the control is prefixed by the namespace of its control library sap.m and the options are passed to the constructor with a JavaScript object. For our control we set the text property to the value “Hello World”.

We chain the constructor call of the control to the standard method placeAt that is used to place SAPUI5 controls inside a node of the document object model (DOM) or any other SAPUI5 control instance. We pass the ID of a DOM node as an argument. As the target node we use the body tag of the HTML document and give it the ID content. The class sapUiBody adds additional theme-dependent styles for displaying SAPUI5 apps.

All controls of SAPUI5 have a fixed set of properties, aggregations, and associations for configuration. You can find their descriptions in the Explored app in the Demo Kit. In addition, each controls comes with a set of public functions that you can look up in the API reference.

Don’t forget to remove the “Hello World” p.

Note

Only instances of sap.ui.core.Control or their subclasses can be rendered stand-alone and have a placeAt function. Each control extends sap.ui.core.Element that can only be rendered inside controls. Check the API reference to learn more about the inheritance hierarchy of controls. The API documentation of each control refers to the directly known subclasses.