Skip to content

Latest commit

 

History

History
53 lines (27 loc) · 1.73 KB

step-6-modules-typescript-3510034.md

File metadata and controls

53 lines (27 loc) · 1.73 KB

Step 6: Modules (TypeScript)

In SAPUI5, 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

![A message toast displays the Hello World message](images/UI5_Walkthrough_Step_06_2f629a9.png "A message toast displays the "Hello World" message")

Coding

You can view all files at OpenUI5 TypeScript Walkthrough - Step 6: Modules and download the solution as a zip file.

webapp/controller/App.controller.ts

We now replace the native alert function with the show method of the sap/m/MessageToast control of SAPUI5. 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'll show how to load a translated text here in Step 8: Translatable Texts (TypeScript).

Related Information

API Reference: sap.m.MessageToast