Appearance
Lesson 3 assignment — Extend the employee details check
Extend the Employee Profile form with a job title. Your goal is a form that explains every missing value and helps the user recover from an error.
1. Start here
Before starting: complete Lesson 3. Data/backend: values live in controls; this form checks details without creating a record.
Use a separate copy of your completed guided lesson project or the completed Lesson 3 checkpoint. Follow the workspace instructions. Run npm ci for a fresh copy, then npm start.
Starting check: an empty Name produces an error; a valid Name produces Details valid; Clear restores the initial form. Keep the existing sap.ui.layout dependency and SimpleForm.
2. Your brief
The form must contain Name, Job title, Department, a check-result status, Check Employee and Clear. Add Job title between Name and Department.
| Field | Control and initial value | Validation |
|---|---|---|
| Name | Existing Input; empty | Required after trimming whitespace. |
| Job title | New Input; empty | Required after trimming whitespace. |
| Department | Existing Select; IT | Keep IT, Sales and Finance options. |
Use jobTitleLabel and jobTitleInput as the new local IDs. Associate the label with its field using labelFor, mark the label required, and give the Input a helpful placeholder such as Enter job title.
When Check Employee is selected:
- Check both required fields. Show an Error value state and a field-specific message on every invalid field.
- Clear the error state of a field that is now valid.
- If either field is invalid, set the status to Check required fields, give it an Error state, focus the first invalid field in form order, and stop. Do not show success feedback.
- If both fields are valid, show Details valid with a Success state and a toast reading Employee details are valid: [name] / [job title] / [department]. Use the trimmed name and job title.
Clear must empty both Inputs, reset Department to IT, remove both error states, set the status to Not checked with an Information state, and focus Name.
3. Work through it
A. Extend the existing form
Edit Main.view.xml. Reuse the guided lesson's Label/Input pattern inside the SimpleForm. Preserve the existing control IDs and handler names. Keep the wrapping action layout.
Marking a label required communicates a requirement; your Controller still has to enforce it. Keep a visible label even when a placeholder is present.
B. Validate both values before reporting success
In onCheckEmployee, find both Inputs through this.byId, read their values and trim them. Work out whether each is valid before returning from the handler, so one missing value does not hide the other.
Use the public methods already practised: getValue, setValueState, setValueStateText and focus. Keep validation and feedback in the Controller. This assignment continues the control-based approach; model-driven creation begins in Lesson 4.
C. Complete the reset behavior
Extend onClearEmployee to handle Job title as well as the original fields. Test Clear after success and after failure.
The result describes the last check. Editing a field does not automatically run validation again. Keep that behavior consistent: select Check Employee again to refresh the result.
Application files to change: the Main View and Main Controller. Add assignment-day-03.md. The starting checkpoint already declares the layout library.
4. Verify your result
Select Clear before each independent input test. For keyboard and narrow-layout checks, retain enough data to test the actions.
| Test ID | Action | Expected result |
|---|---|---|
| D03-01 | Check with Name and Job title empty | Both fields show specific errors; status is Check required fields; Name receives focus. |
| D03-02 | Enter Maria Silva; leave Job title empty; check | Name has no error; Job title shows an error and receives focus; no success toast. |
| D03-03 | Enter Analyst as Job title; leave Name empty; check | Name shows an error and receives focus; Job title has no error. |
| D03-04 | Enter spaces in both fields; check | Both are rejected as missing values. |
| D03-05 | Enter Maria Silva and Analyst ; select Finance; check | Details valid; toast contains Maria Silva / Analyst / Finance with trimmed values. |
| D03-06 | After a failed check, correct both fields and check again | Both error states clear; success feedback appears. |
| D03-07 | After success, erase Job title without checking, then check again | Last result stays until the next check; the next check reports the missing Job title. |
| D03-08 | Select Clear after an error and again after a success | Empty Inputs, Department IT, no error states, Not checked; focus returns to Name. |
| D03-09 | Use keyboard navigation and test near 390 px width | Labels, Inputs and both actions remain usable; no essential control is clipped. |
| D03-10 | Reload and inspect Console | Initial values return; no record was saved and no unresolved application error remains. |
Check that field errors contain useful text. Color alone should not be the only explanation of a problem.
5. If you get stuck
Hint 1 — only the first empty field gets an error
An early return inside the Name check prevents the Job title check from running. Validate and update the state of both fields first. After that, decide whether to stop and where to move focus.
Hint 2 — an error stays after correcting the value
On every Check action, set a valid field's value state back to None. A previous Error does not disappear merely because your success branch displays a toast.
Hint 3 — Job title cannot be found
Compare this.byId("jobTitleInput") with the exact XML ID. Use the local ID, not the longer browser DOM ID. Check that the new Input belongs to Main.view.xml in the project being served.
For a missing SimpleForm or label association, revisit Lesson 3's View example.
6. Submit and reflect
Submit day-03-assignment.zip, including the source and assignment-day-03.md with all ten test results. Follow the Git and packaging instructions and include the final commit summary in your submission message.
Answer:
- Why does
required="true"on a Label not replace validation logic? - Why do you check both fields before deciding to return?
- Why is Check Employee more accurate than Save Employee for this application?
7. Optional challenge
Add Operations as a fourth Department option with its own semantic item ID. Verify that the success message includes Operations and that Clear still resets Department to IT. This change should not alter any required validation rule.
8. Continue and use references
Keep this assignment version separately. Lesson 4 starts from the Lesson 3 guided lesson form and introduces a JSONModel. The next assignment will give you a chance to carry Job title through that model-based flow.
- Lesson 3: controller methods and validation
- Next assignment: Lesson 4
- SAPUI5 Input API
- SAPUI5 Label API
- SAPUI5 ARIA labeling guidance
Use SAPUI5 1.148.12 for the course examples. References checked on 15 November 2026.