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
![](https://sdk.openui5.org/docs/topics/loio2f629a95211f49afa367b60d233fb390_LowRes.png "A message toast displays the \\"Hello World\\" message")
A message toast displays the “Hello World” message
You can access the live preview by clicking on this link: 🔗 Live Preview of Step 6.
To download the solution for this step as a zip file, just choose the link here: 📥 Download Solution for Step 5.
Coding
webapp/controller/App.controller.ts
We now replace the native alert function with the show method of the sap.m.MessageToast control of OpenUI5. For this we extend the imports with the sap/m/MessageToast module.
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");
}
};
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