Lesson 4 companion — Follow the data and the row context

Guided lesson · Assignment

Use this page to trace one employee through the app. The guide contains the complete View and Controller; this reference explains why their paths and operations work.

1. Separate stored records from unfinished input

Model path	Meaning
/employees	The collection displayed by the table.
/draft/name	The form's unfinished name.
/draft/department	The form's selected department.
/employees/1/status	The status at array position 1, not employee ID 1.

The draft object is ordinary local form state. It is unrelated to the OData draft feature used later. Typing changes the form state; a valid Add action creates the record.

2. Read absolute and relative bindings

<Input id="newEmployeeNameInput"
    value="{/draft/name}" valueLiveUpdate="true" />

The leading slash starts from the model root. valueLiveUpdate updates the Input's bound value as the user types. Without that option, the Input normally updates on a committed change, such as leaving the field.

Inside the employee row, {name} starts from that row's binding context. The same template can therefore display Anna in one row and David in another. {/name} would look for an unrelated root property.

All business-data bindings in this lesson use the default model. A named model must be specified consistently in both bindings and context/model lookups; do not mix those forms while adapting this example.

3. Wait for loading to finish

loadData requests the JSON asynchronously. The following JavaScript statement is not evidence that records have arrived. The supplied Controller initializes an empty model shape, marks the View busy and enables Add only after successful completion.

On request failure, including invalid JSON from the request, the app clears busy state, displays its error strip and keeps Add disabled. Restore the file and reload to recover. The Controller destroys the model it created when the View exits.

Keep these supplied lifecycle patterns while learning CRUD. Read the Network response when loading fails before changing bindings at random.

4. Trace each operation

Operation	Pattern	Why it matters
Create	Read and validate draft; calculate an unused ID; concatenate the record; call setProperty.	Bindings are notified of the new collection.
Reset form	Replace /draft with its initial object.	Bound controls show the reset values.
Update	Read the row context and update its status path.	The selected employee changes.
Delete	Read the selected record ID; filter by ID; replace the collection.	Display position is not treated as permanent identity.

const oContext = oEvent.getSource().getBindingContext();
const sStatus = oContext.getProperty("status");

The source is the selected row button. It inherits its employee context from the row. Read that context on every action: deleting an earlier record changes array positions.

reduce, concat and filter are JavaScript array methods. The ID calculation is suitable for this small local dataset; deleted IDs may be reused. A backend normally owns persistent identifiers.

5. Extend a property all the way through

For the assignment's jobTitle, update the seed records, seed draft, initial model draft, form binding, creation object, reset object and table cell. Missing one stage causes partial behavior: existing rows may display the field while newly created records do not.

Keep semantic IDs on the row template and its controls. UI5 assigns distinct IDs to clones. With templateShareable: false, the framework manages the template lifecycle. Control IDs and employee IDs serve different purposes.

6. Check yourself

Anna is deleted and David moves to the first row. Why should David's status button still work?

Compare your explanation

The handler reads the button's current binding context. David's path may now be /employees/0, but the context still represents David. A hard-coded array index or a saved old path could target the wrong object.

7. Recover and continue

The completed Lesson 4 checkpoint contains working employee CRUD and loading feedback. It is the guided lesson baseline; the assignment adds Job title. Changes remain in memory and disappear after reload because the application never writes back to the seed file.

8. Official documentation and examples

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

Reference	What to look up
JSONModel API	loadData, getProperty, setProperty and inherited request events.
Context API	getPath, getModel and getProperty.
SAP walkthrough: JSONModel	An official model and live-input example.
SAP binding-context tutorial	How event sources expose binding contexts.
Binding-template lifecycle	Why explicitly set templateShareable.
Table API	Aggregation binding and automatic pop-ins.
Column API	Column importance and responsive placement.