UI5 in SAP Fiori | IT Canvass

UI5

SAPUI5 (and its open-source core, OpenUI5) is the JavaScript framework Fiori apps are built with. It provides the controls, MVC structure and data binding that make Fiori apps responsive and consistent. It is the developer’s toolkit for custom Fiori.

Quick answer

Modern UI5 development uses SAP Business Application Studio (or VS Code) with the UI5 tooling and templates, connecting to backend OData services.

Key takeaways

UI5 is an enterprise JavaScript/HTML5 framework: a large library of ready-made UI controls (tables, forms, charts), a…
Two build styles: Fiori Elements generates the app from an annotated OData/CDS model (fast, standard, low-code), while freestyle…
Views & controllers (MVC): separate UI from logic.
Watch out: Freestyle coding where Fiori Elements would suffice.

What UI5 is

UI5 is an enterprise JavaScript/HTML5 framework: a large library of ready-made UI controls (tables, forms, charts), a Model-View-Controller structure, powerful data binding (especially to OData models), internationalisation, and the Fiori look and feel built in. Standard Fiori apps are UI5 apps; custom ones are built the same way.

Key UI5 concepts

Views & controllers (MVC): separate UI from logic.
Models & binding: bind controls to data (OData/JSON models).
Components & routing: structure multi-view apps.
Fiori Elements: template-driven apps generated from CDS annotations, minimal hand-coding.

Fiori Elements vs freestyle

Two build styles: Fiori Elements generates the app from an annotated OData/CDS model (fast, standard, low-code), while freestyle UI5 is fully hand-coded for bespoke UIs. Prefer Fiori Elements where it fits, it is less code and easier to maintain.

Tooling

Modern UI5 development uses SAP Business Application Studio (or VS Code) with the UI5 tooling and templates, connecting to backend OData services. This is the modern front-end developer’s environment.

Common pitfalls

Freestyle coding where Fiori Elements would suffice.
Ignoring data binding and manipulating the DOM directly.
Heavy client logic that belongs in the backend/CDS.

Practice challenge

+0 XPStreak ×0

Question 1 of 3

Which statement is true of UI5?

Frequently asked questions

What does UI5 stand for in SAP?

What is another point to note about UI5?

Modern UI5 development uses SAP Business Application Studio (or VS Code) with the UI5 tooling and templates, connecting to backend OData services.

What else is worth knowing about UI5?

What tends to go wrong with UI5?

Freestyle coding where Fiori Elements would suffice. Ignoring data binding and manipulating the DOM directly. Heavy client logic that belongs in the backend/CDS.