Appearance
Lesson 4 assignment — Extend the Employee Directory
Add Job title to the model-backed Employee Directory. The field should travel from the form into a record and appear in that record's table row. Keep creation, status changes, deletion and loading errors working.
1. Start here
Before starting: complete Lesson 4. Data: local employees.json. Persistence: session changes reset on reload.
Use a separate assignment copy of the completed Lesson 4 guided lesson project or the completed Lesson 4 checkpoint. Follow the workspace instructions. Run npm ci for a fresh copy, then npm start.
Starting check: Anna Meyer and David Costa load; Add Employee, Toggle status and Delete work. This assignment begins with that directory, not the control-based Lesson 3 assignment form.
2. Your brief
Add a required Job title field to the creation form and a Job title column to the table. Use the model property jobTitle consistently.
| Location | Required addition |
|---|---|
| Anna's seed record, ID 1 | "jobTitle": "Account Manager" |
| David's seed record, ID 2 | "jobTitle": "Developer" |
Seed JSON's draft object | "jobTitle": "" |
Empty model created in onInit | Add jobTitle: "" inside draft. |
| Form Input binding | {/draft/jobTitle} |
| New employee object | A jobTitle property containing the trimmed draft value. |
| Cell inside the bound row | Relative binding {jobTitle} |
| Draft reset after a successful add | Empty name and jobTitle; Department IT. |
Keep each seed employee's existing ID, name, department and status. Name and Job title are required; an empty or spaces-only value must prevent creation. Mark all invalid fields, clear corrected field errors on the next Add attempt and focus the first invalid field.
The existing row actions must still update or delete only the chosen employee. Loading failure must leave Add disabled and show the error strip.
3. Work through it
A. Extend both data shapes
Update webapp/model/employees.json and the initial model in onInit. The initial shape exists while the asynchronous request is pending; the seed data replaces it when loading succeeds. Both should contain the new draft property.
Reload and verify the edited seed file still parses. Preserve the existing request handlers and owned-model cleanup.
B. Bind the new form field and table cell
In the existing SimpleForm, add a required Label associated with newEmployeeJobTitleInput. Bind that Input to /draft/jobTitle and set valueLiveUpdate="true", matching the Name Input.
Add a semantic-ID Column and a matching Text cell to the table. For example: employeeJobTitleColumn, employeeJobTitleHeader and employeeJobTitleText. Put the column and its cell in corresponding positions; use importance="Low" for the new column so the existing automatic pop-in behavior can move it on narrow screens.
Use {jobTitle} in the row, without a leading slash. Keep the existing semantic template IDs and templateShareable: false.
C. Extend creation and validation
In onAddEmployee, read Name and Job title from the model, trim them and validate both before creating a record. Use this.byId for field feedback and focus; read and reset the form data through the JSONModel.
Add the trimmed Job title to the new record. Keep the existing numeric-ID calculation, new-record status Active, array replacement through setProperty, and success feedback. Reset the entire draft with all three fields after success. Invalid submission must preserve the entered draft so the user can correct it.
You can reuse yesterday's validation ideas, but keep the data flow model-based. Clearing a field by changing /draft demonstrates that the binding updates the Input.
D. Recheck the whole flow
Creation changes often reveal missing fields in the seed file or reset object. Test those before changing the row handlers. The existing context-based Toggle/Delete handlers should continue to work without special handling for Job title.
Application files to change: employees.json, the Main View and Main Controller. Add assignment-day-04.md.
4. Verify your result
Run D04-01 to D04-08 in order. Reload to restore the seed data before each failure test.
| Test ID | Action | Expected result |
|---|---|---|
| D04-01 | Load the app | Anna is Account Manager; David is Developer; both are Active. |
| D04-02 | Add with both required fields empty, then with spaces only | No row added; both fields show useful errors; focus goes to Name. |
| D04-03 | Fill only one required field and add; repeat with the other field | No row added; the missing field is identified; the entered draft is preserved. |
| D04-04 | Add Maria Silva , Analyst , Finance | Exactly one new Active row; Name/Job title stored without outer spaces; draft resets to empty/empty/IT and errors clear. |
| D04-05 | Toggle David twice | Only David changes Active → Inactive → Active; his Job title remains Developer. |
| D04-06 | Delete Anna, then toggle David | Only Anna disappears; David's action still targets David after his position changes. |
| D04-07 | Delete all records, then add a valid employee | New record appears with all required properties and an unused numeric ID. |
| D04-08 | Reload | Original two seed employees and their Job titles return; session changes disappear. |
| D04-09 | Temporarily make the seed file unavailable, then restore it | Error strip shown and Add disabled on failure; reload after restoration recovers the two seed rows. |
| D04-10 | Temporarily introduce invalid JSON, then restore it | Failure feedback appears; Add remains disabled; valid JSON and reload recover the app. |
| D04-11 | Use keyboard controls and test near 390 px wide | New field is labeled; Job title remains available in the table/pop-in; row actions remain reachable. |
| D04-12 | Inspect Console after restoring all deliberate faults | No unresolved application errors from your changes. |
For D04-09, stop the server, rename employees.json to employees-backup.json, restart and reload. Restore the filename afterward. For D04-10, keep a backup, introduce one known syntax error such as a trailing comma, then save and reload. Restore the valid file afterward. Confirm the final committed seed file is valid; deliberate failures belong only in your test notes.
5. If you get stuck
Hint 1 — seed Job titles appear, but added records are blank
Trace all three stages: the Input writes to /draft/jobTitle; the handler reads that exact path; the new object includes jobTitle. Adding a table column alone does not put a property into new records.
Hint 2 — all Job title cells are blank
Inside the row template, {jobTitle} resolves relative to the row's employee context. {/jobTitle} looks for a root property that this model does not contain. Also compare the capitalization in the JSON and binding.
Hint 3 — the field works once but does not reset correctly
Inspect the object passed to setProperty("/draft", ...). Include name, department and jobTitle every time you reset the draft. Keep the initialized model shape and the seed shape aligned too.
Hint 4 — the wrong employee changes after deletion
Get the binding context from the row button's event source at the time of the action. Use the context path for a property update and the record ID for deletion. Array positions and generated control IDs are not permanent employee identities.
6. Submit and reflect
Submit day-04-assignment.zip with source and assignment-day-04.md. Record all twelve checks, restore any temporary faults, then commit using the shared instructions. Include the final commit summary in the submission message.
Answer:
- Why does the form use
{/draft/jobTitle}while the row uses{jobTitle}? - Why must Job title appear in both the record-creation object and the draft-reset object?
- Why does reloading restore the seed records rather than your last changes?
7. Optional challenge
Add a row action named Set Active. It must set only that row's status to Active using its current binding context. Test it on an Inactive employee, on an already Active employee, and after deleting a different row. Preserve Toggle status and Delete.
8. Continue and use references
Preserve this directory app. Lesson 5 starts Employee Task Manager in its own folder and transfers the same create/update/delete patterns to tasks.
- Lesson 4: complete model and handler example
- Next assignment: Lesson 5
- SAPUI5 JSONModel API
- SAPUI5 Table API
- SAPUI5 ID handling and binding templates
Use SAPUI5 1.148.12 for the course examples. References checked on 15 November 2026.