Module 5: UI5 Controls – Basics

Controls are the building blocks of SAPUI5 applications.
This module covers the most commonly used sap.m controls, their usage patterns, and best practices.

---

1. Text, Label & Title

sap.m.Text

Used to display read-only text.

<Text text="Welcome to SAPUI5" />

sap.m.Label

Used to describe input fields.

<Label text="User Name" labelFor="inpUser" />
<Input id="inpUser" />

Best Practice

Always use Label with inputs for accessibility.

sap.m.Title

Used for headings.

<Title text="User Details" level="H2" />

Control Comparison

Control	Usage
Text	Static text
Label	Input description
Title	Section heading

---

2. Button & Events

sap.m.Button

Used to trigger actions.

<Button
  text="Save"
  type="Emphasized"
  press="onSave" />

Event Handling in Controller

onSave: function () {
  // Handle save logic
}

UI5 Concept

Events are always handled in the controller, never in the view.

Button Types

Type	Usage
Default	Normal
Emphasized	Primary action
Reject / Accept	Confirmation actions

---

3. Input & TextArea

sap.m.Input

Single-line text input.

<Input
  value="{/username}"
  placeholder="Enter name" />

sap.m.TextArea

Multi-line input.

<TextArea
  value="{/description}"
  rows="4" />

Value Binding

<Input value="{path: '/amount', type: 'sap.ui.model.type.Float'}" />

Validation

Use data types for automatic validation.

---

4. Select & ComboBox

sap.m.Select

Dropdown with predefined options.

<Select items="{/countries}">
  <items>
    <core:Item key="{code}" text="{name}" />
  </items>
</Select>

sap.m.ComboBox

Allows typing + selection.

<ComboBox
  items="{/products}"
  selectedKey="{/productId}" />

Control Comparison

Control	Use Case
Select	Small fixed list
ComboBox	Large / searchable list

Recommendation

Use Select for small value lists, ComboBox for large lists.

---

5. CheckBox & RadioButton

sap.m.CheckBox

Multiple independent selections.

<CheckBox
  text="Accept Terms"
  selected="{/accepted}" />

sap.m.RadioButton

Single selection from a group.

<RadioButtonGroup selectedIndex="{/choice}">
  <buttons>
    <RadioButton text="Option A" />
    <RadioButton text="Option B" />
  </buttons>
</RadioButtonGroup>

---

6. MessageToast & MessageBox

MessageToast

Non-blocking notifications.

sap.m.MessageToast.show("Saved successfully");

MessageBox

Blocking messages (confirmation / error).

sap.m.MessageBox.confirm("Do you want to continue?", {
  onClose: function (oAction) {
    if (oAction === sap.m.MessageBox.Action.OK) {
      // Proceed
    }
  }
});

Control Comparison

Control	Use Case
MessageToast	Info / success
MessageBox	Error / confirmation

UX Rule

Do not overuse MessageBox — it interrupts the user.

---

7. Control Properties & Aggregations

Properties

<Button enabled="{/isEnabled}" />

Aggregations

<List items="{/items}">
  <StandardListItem title="{name}" />
</List>

UI5 Core Concept

Controls are configured using properties, aggregations, and events.

---

8. Best Practices for UI5 Controls

Follow These

• Use sap.m controls for responsive apps
• Bind data instead of setting values in JS
• Use semantic button types
• Prefer declarative XML
• Use i18n for texts

Avoid These

• Hardcoding text
• Direct DOM manipulation
• Using sap.ui.commons (obsolete)
• Business logic in views

---

9. Interview-Grade Explanation

Q: How do you handle user interaction in SAPUI5?

Answer:

User interactions are handled via control events defined in XML views and implemented in controllers, with data bound to models to keep UI and application state synchronized.

---

10. Summary

• Controls are UI building blocks
• Text, Label, Title handle display
• Buttons trigger actions via events
• Inputs bind data to models
• Select & ComboBox handle choices
• Message controls provide feedback

---

11. What's Next?

➡️ Module 6: Data Binding Fundamentals

Learning Tip

Mastering basic controls makes 80% of UI5 apps trivial to build.