Lesson 1 companion — How the first app fits together

Guided lesson · Assignment

Use this page while following the guide or catching up. It explains the patterns behind the complete files; the short snippets below are illustrations, not whole replacement files.

1. Keep these ideas distinct

Term	Meaning in this course
SAP Fiori	The UX approach and design system for business applications.
SAPUI5	The JavaScript framework used to build the interface.
SAP Fiori elements	An approach built on SAPUI5 that uses service metadata and annotations to create standard application patterns.
Local preview	A development server on your computer; it is not a deployed SAP business service.

In this lesson you create a small freestyle SAPUI5 app. No database or business-data service is involved.

2. Find the right file

File	What to look for
package.json	npm start and the development tooling.
webapp/manifest.json	Application ID, dependencies and the generated shell/routing configuration.
webapp/view/Main.view.xml	Visible controls and event-handler names.
webapp/controller/Main.controller.js	The behavior that runs after an interaction.

The wizard prefix training.fiori plus module name day1 produces the app ID training.fiori.day1. Keep that identity consistent. Renaming your outer working folder does not require changing the namespace.

3. Trace a button press

<Button id="sayHelloButton" text="Say Hello" press=".onSayHello" />

The View creates a Button. Its text property supplies the visible label. Its press event points to a Controller method; the leading dot asks UI5 to resolve that method on this View's Controller.

onSayHello: function () {
    MessageToast.show("Hello from SAPUI5!");
}

The handler calls the imported MessageToast module. It does not need to find or edit a browser HTML button. In the complete file, sap/m/MessageToast in the dependency array corresponds to MessageToast in the callback parameters.

4. Names and IDs to recognize

Example	Purpose
training.fiori.day1.controller.Main	Dotted Controller class name.
sap/m/MessageToast	Slash-based module dependency, without .js.
sayHelloButton	Semantic local control ID.
.onSayHello	Controller event-handler reference in XML.

UI5 prefixes local IDs with the View's identity. Use meaningful local IDs rather than copying long IDs from browser HTML. Stable naming supports later lookup, testing and adaptation.

5. Diagnose the first failure

Symptom	First check
The page fails to load	Console and the first failed Network request; check the Controller namespace and filename.
A button is visible but does nothing	Compare its event attribute and method name, including case.
MessageToast is undefined	Match the dependency array with the callback parameter order.
Edits do not appear	Save the file; check the folder served by the running terminal; reload.

Change one cause at a time. A blank page and a disconnected button usually need different investigations.

6. Check yourself

Before opening the answer, explain what changes if you edit only the Button's text property.

Compare your explanation

The visible button label changes. The handler and toast stay the same because press still points to the same method. To change the toast, edit the message passed to MessageToast in the Controller.

7. Recover and continue

Generate and configure your project using Lesson 1's setup steps. Use the completed checkpoint to compare the Hello interaction if needed. Confirm the original button works before beginning the welcome-page assignment. Keep the guided lesson folder for Lesson 2.

8. Official documentation and examples

These SAPUI5 links target 1.148.12, the version used by the supplied apps. References checked on 15 November 2026.

Reference	Use it to answer
SAPUI5 Demo Kit and examples	Where can I inspect controls, APIs and runnable samples?
Button API	Which properties and events does Button provide?
MessageToast API	What does show do?
SAPUI5 developer best practices	How should dependencies and Controller handlers be declared?
SAPUI5 ID handling	Why assign semantic IDs and let UI5 prefix them?
SAP's Fiori application generator	How does the generator create the project?