ui5-typescript-walkthrough
Step 6: Modules
In OpenUI5, resources are often referred to as modules. In this step, we replace the alert from the last exercise with a proper Message Toast from the sap.m library.
Preview
A message toast displays the “Hello World” message
You can access the live preview by clicking on this link: 🔗 Live Preview of Step 6.
Coding
You can download the solution for this step here: [📥 Download step 6](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06.zip).
You can download the solution for this step here: [📥 Download step 6](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06-js.zip).
webapp/controller/App.controller.?s
We now replace the native alert function with the show method of the sap.m.MessageToast control of OpenUI5.
import MessageToast from "sap/m/MessageToast";
import Controller from "sap/ui/core/mvc/Controller";
/**
* @name ui5.walkthrough.controller.App
*/
export default class AppController extends Controller {
onShowHello(): void {
MessageToast.show("Hello World");
}
};
sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller"], function (MessageToast, Controller) {
"use strict";
/**
* @name ui5.walkthrough.controller.App
*/
const AppController = Controller.extend("ui5.walkthrough.controller.App", {
onShowHello() {
MessageToast.show("Hello World");
}
});
;
return AppController;
});
For now, the message toast just displays a static “Hello World” message. We will show how to load a translated text here in Step 8: Translatable Texts.
Next: Step 7: JSON Model
Previous: Step 5: Controllers
Related Information