ui5-typescript-walkthrough
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 OpenUI5 control sap/m/Text. In the beginning, we will use the TypeScript control API to set up the UI, the control instance is then placed into the HTML body.
Preview
![](https://sdk.openui5.org/docs/topics/loio30a42d381b9e4388bf7fdc0b941e5381_LowRes.png "The \\"Hello World\\" text is now displayed by a OpenUI5 control")
The “Hello World” text is now displayed by an OpenUI5 control
You can access the live preview by clicking on this link: 🔗 Live Preview of Step 3.
To download the solution for this step as a zip file, just choose the link here: 📥 Download Solution for Step 3.
Tooling
package.json
To get the type definitions for OpenUI5, we need to install them to our project. We open a terminal in the root folder of our app and exectue the following command:
npm install @types/openui5 --save-dev
Coding
webapp/index.ts
Now we make some changes to our index.ts file: We remove the alert method and instantiate an OpenUI5 text control instead. We create an instance of the text control by passing its options as a TypeScript object to the constructor. In our case, we want the text control to display the message “Hello World”, so we’ll set the text property accordingly.
To place the text control to our HTML document, we chain the constructor call of the control with the placeAt method. This method is used to position OpenUI5 controls. In our case, we add the text control to the DOM element with the ID content.
import Text from "sap/m/Text";
new Text({
text: "Hello World"
}).placeAt("content");
Controls are used to define appearance and behavior of parts of the screen.
All controls of OpenUI5 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.
📌 Important:
Only instances ofsap.ui.core.Controlor their subclasses can be rendered stand-alone and have aplaceAtfunction. Each control extendssap.ui.core.Elementthat 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.
webapp/index.html
We replace the <div> tag in our webapp/index.html file with a <body> tag and assign it the ID content. The body tag of the HTML document thus becomes the target node for the text control we defined in the index script.
We also add the sapUiBody class, which provides additional theme-dependent styles.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UI5 TypeScript Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
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>
In the example above, the callback of the on-init event is where we now instantiate an OpenUI5 text control.
UI5 Tooling
As we now use the sap.m library with our app, we need to add the dependency to this library to our UI5 Tooling setup.
We open a terminal in the root folder of our app and exectue the following command:
ui5 add sap.m`
Next: Step 4: XML Views
Previous: Step 2: Bootstrap
Related Information
TypeScript definitions for OpenUI5
API Reference: sap.ui.core.Control