Appearance
Lesson 1 assignment — Build your welcome page
Turn the guided lesson's Hello app into a small learning welcome page. You will practise choosing controls, connecting events and finding a deliberate mistake.
1. Start here
Before starting: complete Lesson 1. Data/backend: none.
Use a separate assignment copy of your completed app, following the workspace instructions. If you need to recover, download the completed Lesson 1 checkpoint. Open the folder containing package.json, run npm ci for a fresh copy, then npm start.
Starting check: the page opens and Say Hello displays Hello from SAPUI5!. Recover this behavior before adding anything.
2. Your brief
Build one page that welcomes a learner to SAPUI5. Use the controls from the guided lesson: Page, VBox, Title, Text and Button.
Your page must contain:
- The existing Say Hello button and its original behavior.
- A heading reading My SAPUI5 learning space.
- A short learner name or alias and one sentence describing a learning goal. Example: Goal: connect a button to a controller method.
- A Course Info button that displays This app uses an XML View and a Controller. in a MessageToast.
- A Study Tip button that displays Change one thing, then test it. in a MessageToast.
Give each new control a meaningful, unique local ID. Put the controls in the existing VBox and use the UI5 margin classes demonstrated in the lesson. All three buttons must be usable with the keyboard.
This is one screen with static text and button feedback. Inputs and data models come later.
3. Work through it
A. Make a small implementation plan
In your assignment notes, map each visible item to its control and file. Plan courseInfoButton → .onCourseInfo and studyTipButton → .onStudyTip. The method names in the Controller omit the leading dot.
B. Implement one interaction at a time
Edit webapp/view/Main.view.xml and webapp/controller/Main.controller.js. Keep the existing application ID and controller class name.
Add the heading and descriptive text, then implement Course Info. Run it before implementing Study Tip. For the second button, try writing the control and handler from your plan before looking back at the guided lesson example.
Keep one sap.ui.define block in the Controller. Reuse its existing MessageToast dependency. Add your methods inside the object passed to Controller.extend; separate sibling methods with commas.
C. Diagnose a controlled mistake
Once all buttons work, temporarily change only Course Info's XML event attribute to press=".onCourseInformation", leaving the Controller method named onCourseInfo.
Save and reload. Inspect DevTools → Console and try the button. Record the symptom and the relevant message if one appears; exact messages can vary. Compare the two names, restore .onCourseInfo, then retest all buttons. Finish with the deliberate mistake repaired.
Application files to change: the Main View and Main Controller. Add your notes as assignment-day-01.md in the project root.
4. Verify your result
Run these checks on the repaired app and record every result in your notes.
| Test ID | Action | Expected result |
|---|---|---|
| D01-01 | Open or reload the page | Heading, learner text, learning goal and three buttons are visible. |
| D01-02 | Select Say Hello | Toast: Hello from SAPUI5! |
| D01-03 | Select Course Info | Toast: This app uses an XML View and a Controller. |
| D01-04 | Select Study Tip | Toast: Change one thing, then test it. |
| D01-05 | Use Tab and Shift+Tab; activate each button with Enter or Space | Each button receives visible focus and performs the correct action. |
| D01-06 | Reload and inspect Console | No unresolved application errors caused by your edits; all three actions still work. |
An app that displays correctly but has a broken button is not complete. Optional decoration does not replace any required behavior.
5. If you get stuck
Hint 1 — the button appears but does nothing
Compare the XML event name with the Controller method character by character, including capitalization. Use press=".onCourseInfo" in XML and onCourseInfo: function () { ... } in the Controller. The dots in the application namespace serve a different purpose.
Hint 2 — the Controller no longer loads
Check for a missing comma between methods, unmatched braces or a second pasted sap.ui.define block. Use the guided lesson Controller as a structural reference. Keep your new handlers inside its returned controller definition.
Hint 3 — MessageToast is undefined
The dependency sap/m/MessageToast and the callback parameter MessageToast must occupy matching positions. Call MessageToast.show(...) inside the handler.
If the browser still shows old content, check which folder your running terminal serves, save the files and reload. Return to the lesson's troubleshooting table for setup problems.
6. Submit and reflect
Package day-01-assignment.zip using the submission instructions. Include the working source and assignment-day-01.md with the six verification results and your debugging observation. A Git commit is not required for this assignment.
Answer in your own words:
- Which file controls the button text, and which controls the toast text?
- How does Course Info find the correct Controller method?
- Why can the page appear correctly while one interaction is broken?
7. Optional challenge
After all required checks pass, add a My Next Step button with a new handler and a useful study message. Choose its ID yourself. Add one test row for it and explain how you checked that its handler was connected correctly.
8. Continue and use references
Keep this assignment folder as your assignment. Begin the next guided lesson with your saved guided lesson project or its linked checkpoint.
- Lesson 1: View and Controller examples
- Next assignment: Lesson 2 — complete the Lesson 2 guided lesson first.
- SAPUI5 Button API
- SAPUI5 MessageToast API
- SAPUI5 best practices
Use the course runtime version, 1.148.12, when reading the API. References checked on 15 November 2026.