Lesson 3 — Controls, events and responsive interfaces

Review the companion · Assignment

Build an Employee Profile form. It will check entered values and show feedback. It will not add a record yet; Lesson 4 introduces model-based data entry.

1. Start here

Environment: local. Business data/backend: none; values remain in the controls for this lesson.

Continue your Lesson 2 project or download its checkpoint. For a fresh download, run npm ci, then npm start. Verify that Say Hello displays Hello, SAPUI5 Developer! before replacing the screen.

2. Understand the idea

A UI5 control is a JavaScript object with a public API. XML creates/configures that object; it is not ordinary browser HTML.

API concept	Example	Meaning
Property	Button.text	A value configuring the control.
Aggregation	Page.content	Child objects owned by the control.
Association	Label.labelFor	A reference to another control.
Event	Button.press	A notification that an interaction occurred.
Method	Input.getValue()	An operation you can call on the control.

Open the Demo Kit API Reference for Button and Input. Locate text, press, value, valueState, getValue, change and liveChange. Methods inherited from a base class are still part of the control's API.

this.byId("employeeNameInput") finds the View's control using its local ID. UI5 handles the runtime prefix. Avoid constructing prefixed IDs yourself or using DOM methods for ordinary UI5 application behavior.

3. Build it

A. Add the layout library

In webapp/manifest.json, locate sap.ui5 → dependencies → libs. Add sap.ui.layout alongside the existing libraries. Replace only the libs object with this valid JSON object, preserving the rest of the manifest:

{
  "sap.m": {},
  "sap.ui.core": {},
  "sap.ui.layout": {}
}

SimpleForm belongs to this library. The declaration allows UI5 to load its library correctly.

B. Replace the Main View

Replace the entire webapp/view/Main.view.xml. Keep App.view.xml and the application's namespace unchanged.

webapp/view/Main.view.xml — complete file

<mvc:View
    controllerName="training.fiori.day1.controller.Main"
    displayBlock="true"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:f="sap.ui.layout.form">
    <Page id="mainPage" title="Employee Profile">
        <content>
            <f:SimpleForm id="employeeForm" editable="true" layout="ResponsiveGridLayout" class="sapUiSmallMargin">
                <Label id="employeeNameLabel" labelFor="employeeNameInput" text="Name" required="true" />
                <Input id="employeeNameInput" placeholder="Enter employee name" />
                <Label id="departmentLabel" labelFor="departmentSelect" text="Department" />
                <Select id="departmentSelect" selectedKey="IT">
                    <items>
                        <core:Item id="departmentItemIT" key="IT" text="IT" />
                        <core:Item id="departmentItemSales" key="Sales" text="Sales" />
                        <core:Item id="departmentItemFinance" key="Finance" text="Finance" />
                    </items>
                </Select>
                <Label id="checkStatusLabel" text="Check result" />
                <ObjectStatus id="checkStatus" text="Not checked" state="Information" />
            </f:SimpleForm>
            <HBox id="employeeActionBox" class="sapUiSmallMargin" wrap="Wrap">
                <Button id="checkEmployeeButton" text="Check Employee" type="Emphasized" press=".onCheckEmployee" class="sapUiTinyMarginEnd" />
                <Button id="clearEmployeeButton" text="Clear" press=".onClearEmployee" />
            </HBox>
        </content>
    </Page>
</mvc:View>

The f XML prefix refers to sap.ui.layout.form; core refers to sap.ui.core. Each Select item has a key used by the application and text shown to the user. The form uses a responsive layout; the action box can wrap on narrow screens.

The Name label is marked required, but that marker does not implement validation. You must still check the value. A placeholder is an example or hint, not a replacement for an associated label.

C. Replace the Main Controller

Replace the whole Controller. This removes the old onSayHello handler and Greeting import. Keep webapp/util/Greeting.js in the project as the previous lesson's reusable-module example.

webapp/controller/Main.controller.js — complete file

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast"
], function (Controller, MessageToast) {
    "use strict";

    return Controller.extend("training.fiori.day1.controller.Main", {
        onCheckEmployee: function () {
            const oNameInput = this.byId("employeeNameInput");
            const sName = oNameInput.getValue().trim();
            const sDepartment = this.byId("departmentSelect").getSelectedKey();
            const oStatus = this.byId("checkStatus");
            if (!sName) {
                oNameInput.setValueState("Error");
                oNameInput.setValueStateText("Enter an employee name.");
                oStatus.setText("Name required");
                oStatus.setState("Error");
                oNameInput.focus();
                return;
            }
            oNameInput.setValueState("None");
            oStatus.setText("Details valid");
            oStatus.setState("Success");
            MessageToast.show("Employee details are valid: " + sName + " / " + sDepartment);
        },
        onClearEmployee: function () {
            this.byId("employeeNameInput").setValue("").setValueState("None");
            this.byId("departmentSelect").setSelectedKey("IT");
            this.byId("checkStatus").setText("Not checked").setState("Information");
            this.byId("employeeNameInput").focus();
        }
    });
});

Follow the Check action: find controls → read values → trim the name → reject an empty value → show success feedback. The error message tells the user what to fix, and focus returns to the field.

The status reports the last check result. Editing the name afterward does not automatically run another check; select Check Employee again. Clear restores the initial values and resets the status. This lesson deliberately uses control setters so that Lesson 4 can show how data binding changes the approach.

D. Inspect the event source

An event handler can accept an event parameter. You do not need to add another handler in this lesson. Read this small illustration:

onExamplePress: function (oEvent) {
    const oSource = oEvent.getSource();
}

getSource() returns the UI5 control that fired the event. Lesson 4 uses this to identify which repeated row's button was selected.

Changed files: webapp/manifest.json, webapp/view/Main.view.xml, webapp/controller/Main.controller.js.

4. Verify your result

Action	Expected result
Leave Name empty; select Check Employee	Name shows an error and receives focus; status reads Name required.
Enter spaces only and check	Same validation error.
Enter Maria Silva, choose Finance, then check	Status reads Details valid; feedback includes the entered name and department.
Select Clear	Name empty, Department IT, status Not checked.
Reload	Initial values return; no employee record was created.
Set browser width to approximately 390 px	Fields and buttons remain usable; no action is clipped.
Use Tab, Shift+Tab and Enter/Space	You can reach and activate inputs and buttons without the mouse.

Expected screen: Employee Profile, Name and Department fields, a Check result status, and Check Employee/Clear buttons.

Completed Lesson 3 checkpoint. Commit your working result with a message such as Add employee details check.

5. Troubleshoot

Symptom	Likely cause	What to do
SimpleForm cannot load	Library or XML namespace missing	Check sap.ui.layout in the manifest and the xmlns:f declaration.
byId returns undefined	Wrong local ID or wrong View	Compare the exact XML ID with the controller lookup.
getValue is not a function	Wrong control/API	An Input uses getValue; a Select uses getSelectedKey. Check its API.
Old Hello button still appears	Wrong View edited	Replace Main.view.xml in the project being served; leave App.view.xml as the shell.
Feedback says details valid but no record appears	Expected for this lesson	The action validates control values. Model-backed creation starts in Lesson 4.

6. Check your understanding

1. How is a property different from an aggregation?
2. Why is labelFor useful?
3. Does required="true" reject empty input automatically?
4. Why is Check Employee an accurate button name here?

Suggested answers

1. A property is a value such as text; an aggregation holds owned child objects such as a Page's content.
2. It associates a label with its field, helping users and assistive technology understand the input.
3. No. It indicates a requirement; your validation logic enforces it.
4. The handler checks values and displays feedback. It does not add or persist a record.

7. Continue to Lesson 4

Keep your project. Lesson 4 replaces this form with an Employee Directory backed by a JSONModel. You will add, update and delete real records in browser memory. Open Lesson 4.

8. Official references

Use the SAPUI5 version selector to read the API for 1.148.12, the version used by these checkpoints. Documentation checked on 15 November 2026.

• SAPUI5 Demo Kit
• SAPUI5 best practices
• SimpleForm API
• Stable IDs
• SAP Fiori design guidelines