Appearance
Lesson 2 assignment — Make a reusable greeting reliable
Improve the greeting module so it produces useful output for different string inputs. Reuse the same function from three buttons and record a clean Git checkpoint.
1. Start here
Before starting: complete Lesson 2. Data/backend: none.
Use a separate assignment copy of the completed guided lesson project, or recover from the completed Lesson 2 checkpoint. Follow the workspace instructions; run npm ci for a fresh copy, then npm start.
Starting check: Say Hello displays Hello, SAPUI5 Developer!, using webapp/util/Greeting.js. This assignment starts from the Lesson 2 guided lesson app; Lesson 1's extra assignment buttons are not needed.
2. Your brief
Keep Greeting.buildGreeting(sName) as the single place that creates greeting text. For this assignment, its argument is always a string.
The function must remove spaces from the start and end of the name. If nothing remains, use Developer. Preserve spaces within a name.
| Input string | Returned string |
|---|---|
"SAPUI5 Developer" | "Hello, SAPUI5 Developer!" |
" Maria Silva " | "Hello, Maria Silva!" |
"" | "Hello, Developer!" |
" " | "Hello, Developer!" |
Provide three buttons:
| Button | Handler | Argument passed to buildGreeting |
|---|---|---|
| Say Hello | onSayHello | "SAPUI5 Developer" |
| Preview Name | onPreviewName | " Maria Silva " |
| Preview Fallback | onPreviewFallback | " " |
Each handler calls the same helper and passes its returned text to MessageToast. The helper returns text only; it must not display a toast or access a View. User-input controls are introduced in Lesson 3, so these preview buttons use literal strings.
3. Work through it
A. Improve the helper
Edit webapp/util/Greeting.js while keeping the exported function name. JavaScript's trim() returns a string without leading/trailing whitespace. For example, " Alex Costa ".trim() returns "Alex Costa". It does not alter the original string, so use the returned value.
Decide the sequence before writing code: clean the input → choose the cleaned name or fallback → return the greeting. Put the fallback logic in the module, so every caller gets the same behavior.
B. Reuse it from the interface
Add the two preview buttons to Main.view.xml, with semantic IDs such as previewNameButton and previewFallbackButton. Add their handlers to Main.controller.js. Reuse the existing Greeting and MessageToast imports; a second dependency for the same module is unnecessary.
Check one button before adding the next. Avoid copying the greeting-building logic into the Controller.
C. Test the empty-string case
Temporarily pass "" from Preview Fallback. Verify its output, record the result, then restore the argument to " ". The final submitted button must test spaces-only input. Keep Say Hello's original argument unchanged.
D. Diagnose an import error and commit the repair
Temporarily change the Greeting dependency path to training/fiori/day1/utils/Greeting. Reload and inspect Console and Network. Identify the failed module path, then restore training/fiori/day1/util/Greeting. Retest the three buttons.
Follow Lesson 2's Git procedure. Check .gitignore, inspect the staged diff and commit the repaired app and completed notes. Use a descriptive message such as Handle empty names in reusable greeting.
Application files to change: webapp/util/Greeting.js, the Main View and Main Controller; .gitignore only if an exclusion is missing. Add assignment-day-02.md.
4. Verify your result
| Test ID | Action | Expected result |
|---|---|---|
| D02-01 | Select Say Hello | Hello, SAPUI5 Developer! |
| D02-02 | Select Preview Name | Hello, Maria Silva!, with no extra spaces around the name. |
| D02-03 | Select Preview Fallback with its final spaces-only argument | Hello, Developer! |
| D02-04 | Run the temporary empty-string check, then restore spaces | Empty input also uses Developer; final source contains the spaces-only argument. |
| D02-05 | Read Greeting.js | It returns text, has no MessageToast dependency and contains the shared fallback logic. |
| D02-06 | Reload after repairing the deliberately wrong module path | No failed Greeting module request; all buttons work. |
| D02-07 | Use Tab and Enter/Space | All three actions are reachable and work. |
| D02-08 | Run git log -1 --oneline and git status after the final commit | Commit recorded; intended source and notes committed; working tree clean. |
Before committing, confirm the staged list contains no dependency folder, build output or credentials. Remember that a new untracked file appears in git status; plain git diff does not show its contents until it is tracked.
5. If you get stuck
Hint 1 — a spaces-only name still appears
Choose the fallback after trimming, not before. A string containing spaces is not the same as an empty string until you remove the surrounding whitespace.
Hint 2 — the helper's return value is undefined
Check that your function returns the final string on every path. Creating a variable inside a function does not return it automatically.
Hint 3 — the function cannot be called
Check the slash-based dependency path, capitalization, callback parameter order and returned object property buildGreeting. Do not add .js to the module dependency path.
For Git identity or staging problems, use the troubleshooting guidance in Lesson 2. Set repository-local identity values to your own details if Git requests them.
6. Submit and reflect
Submit day-02-assignment.zip with source and assignment-day-02.md, following the packaging instructions. Include all eight verification results, the module-path diagnosis and the final commit summary in the submission message.
Answer:
- Why should the fallback rule live in Greeting rather than in each event handler?
- Why must trimming happen before checking whether the name is empty?
- How do saving, staging and committing differ?
7. Optional challenge
Add buildStudyTip(sTopic) to the same module. It should trim a string topic, use SAPUI5 when empty, and return Practise [topic] by building a small example. Call it from a new button. Record normal, padded and empty-topic checks. Keep all required greeting checks passing.
8. Continue and use references
Keep this assignment copy. Start Lesson 3 from your completed Lesson 2 guided lesson project or its checkpoint.
- Lesson 2: modules and dependencies
- Next assignment: Lesson 3
- SAPUI5 modules and dependencies
- JavaScript
trim()reference - Official Git diff reference
Use SAPUI5 1.148.12 for the course examples. References checked on 15 November 2026.