Step 3: Controls

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 API to set up the UI, the control instance is then placed into the HTML body.

Preview

Hello World

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

Coding

You can view and download all files at Walkthrough - Step 3.

webapp/index.html

Hidden
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="resources/sap-ui-core.js"
		data-sap-ui-theme="sap_horizon"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compat-version="edge"
		data-sap-ui-async="true"
		data-sap-ui-on-init="module:ui5/walkthrough/index"
		data-sap-ui-resource-roots='{
			"ui5.walkthrough": "./"
		}'>
	</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

The class sapUiBody adds additional theme-dependent styles for displaying SAPUI5 apps.

webapp/index.js

Hidden
sap.ui.define([
	"sap/m/Text"
], (Text) => {
	"use strict";

	new Text({
		text: "Hello World"
	}).placeAt("content");
});

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.

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

Don't forget to remove the <div>Hello World</div> from the index.html.

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.


Parent topic: Walkthrough Tutorial (JavaScript)

Previous: Step 2: Bootstrap

Next: Step 4: XML Views

Related information