sap-ui5-fiori

SAPUI5 and Fiori Application Development

Related Skills

• sap-fiori-testing — OPA5, wdi5, accessibility testing for the apps built here
• sap-odata — OData v2/v4 service design and consumption (the backend for most Fiori apps)
• sap-rap-comprehensive — RAP backends that auto-generate OData for UI5 consumption
• sap-cap-advanced — CAP backends with CDS-based OData services
• sap-build-apps — Low-code alternative when full UI5 is overkill

Quick Start

Scaffold a new freestyle UI5 app (Fiori Tools):

npm install -g @sap/generator-fiori
yo @sap/fiori
# Select: SAPUI5 freestyle → Basic → OData V4 service → project details

Scaffold a Fiori Elements app (zero-code UI):

yo @sap/fiori
# Select: SAPUI5 Fiori Elements → List Report Object Page (LROP)

Run locally with live-reload:

npm start                     # Starts ui5 serve with local OData mock or proxy

Build for deployment:

npm run build                 # Produces dist/ folder
npm run deploy                # Deploys to ABAP, CF, or HTML5 repo

Core Concepts

MVC architecture

app/
├── webapp/
│   ├── Component.js          # Component: root, manifest, models, router
│   ├── manifest.json         # App descriptor (routes, models, data sources)
│   ├── view/                 # XML views (declarative UI)
│   │   ├── App.view.xml
│   │   ├── Worklist.view.xml
│   │   └── Object.view.xml
│   ├── controller/           # Controller logic (event handlers, business logic)
│   │   ├── App.controller.js
│   │   ├── Worklist.controller.js
│   │   └── Object.controller.js
│   ├── model/                # Formatters, grouping, custom models
│   │   └── formatter.js
│   ├── i18n/                 # Translations
│   │   └── i18n.properties
│   ├── css/                  # Custom styles
│   └── test/                 # QUnit/OPA5 tests
├── ui5.yaml                  # UI5 tooling config
└── package.json

Models (critical to understand)

Model	Use case	Binding syntax
JSONModel	Client-side state, mock data, view state	{/path/to/value}
ODataModel (v4)	Primary for SAPUI5 + modern SAP backends	{propertyName} or {BindingPath}
ODataModel (v2)	Legacy OData services, Gateway services	{propertyName}
ResourceModel	i18n texts from .properties files	{i18n>textKey}
DeviceModel	Device info (phone/tablet/desktop, orientation)	{device>/system/phone}