Lesson 2 companion — Files, modules and Git

Guided lesson · Assignment

Use this reference to explain why each piece of the app belongs in its file. The guide supplies the complete implementation; the assignment applies it to more inputs.

1. Assign one responsibility to each part

Part	Responsibility	Example
View	Declare the interface.	The Say Hello button.
Controller	Coordinate an interaction.	Request a greeting and display it.
Utility module	Return reusable results.	Build a greeting string.
Model	Hold or expose data for binding.	Business-data binding starts in Lesson 4.

The generated device and i18n models already exist in the shell. You are not editing those models in this lesson. The greeting uses a literal string argument.

2. Understand the import contract

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "training/fiori/day1/util/Greeting"
], function (Controller, MessageToast, Greeting) {
    // The complete Controller definition belongs here.
});

UI5 loads the dependencies and passes their exported values to the callback in the same order. A correct module path with the wrong callback position can still produce an incorrect value.

webapp/util/Greeting.js is addressed as training/fiori/day1/util/Greeting: the resource root maps the app namespace to webapp. Do not create extra physical training/fiori/day1 folders. Paths use slashes and omit .js; class names such as Controller.extend(...) use dots.

3. Follow the value

const sMessage = Greeting.buildGreeting("SAPUI5 Developer");
MessageToast.show(sMessage);

The helper receives a string and returns a string. The Controller decides what to do with the result. Keeping MessageToast outside the helper allows another caller to use the same text in a different way.

In the assignment, clean the input before choosing a fallback. trim() returns a new string with surrounding whitespace removed. " " becomes ""; " Maria Silva " becomes "Maria Silva". Internal spaces remain. The assignment accepts string arguments, so you do not need to invent handling for every possible JavaScript value.

4. Keep project metadata clear

File	Role
manifest.json	UI5 app identity, libraries, models and Views.
Component.js	Initialize the generated application shell.
package.json	Tooling dependencies and command names.
package-lock.json	Record dependency versions for npm ci.
.gitignore	Exclude generated/local files from normal Git staging.

Keep the lockfile. The generated App View and default route remain in place; implementing navigation comes later.

5. Read Git's three stages

Stage	What it contains	Useful inspection
Working files	Your current saved edits.	git status, git diff
Staging area	Changes selected for the next commit.	git diff --staged
Commit	A recorded repository version.	git log -1 --oneline

New untracked files appear in git status; ordinary git diff does not show their contents. Inspect the staged diff after adding them. A commit does not upload to a remote repository. An ignore rule does not automatically stop tracking files already committed.

6. Check yourself

A helper contains const sMessage = "Hello!"; but its caller receives undefined. What is missing?

Compare your explanation

The function needs to return the result. Declaring a local variable does not return it. Separately, confirm that the module exports the object containing the function and that the Controller imports that module in the expected position.

7. Recover and continue

Open the completed Lesson 2 checkpoint beside your work and compare the import path, returned module object and handler. Its ZIP does not contain your Git history. Create your own commit after the assignment checks.

8. Official documentation and examples

SAPUI5 references use 1.148.12. References checked on 15 November 2026.

Reference	What to look up
SAPUI5 modules and dependencies	Defining and importing reusable modules.
sap.ui.define API	Dependency lists, callback values and module exports.
Application descriptor	The purpose of sap.app and sap.ui5.
SAPUI5 developer best practices	Framework conventions for modules and app structure.
Official Git basics	Working files, staging and commits.
Official gitignore reference	Why ignored and tracked files behave differently.
MDN JavaScript trim() reference	The JavaScript string operation used in the assignment.