Foundations and app architecture

What you should be able to explain

SAP Fiori describes an application experience; SAPUI5 is a web UI toolkit. A launchpad entry can open different supported UI technologies, so seeing a tile does not prove the target is a custom UI5 app. Fiori elements supplies metadata-driven application patterns built on SAPUI5. OData exposes a service contract; it does not supply the entire application experience.

Decide before coding

For a purchase-order exception list with familiar filtering and an object page, evaluate Fiori elements against the required floorplan and the supported OData version. Choose freestyle UI5 when the interaction requires a custom layout or behavior outside appropriate extension points. Record the UI5 runtime and service version first. V2 and V4 model APIs differ: do not copy a V2 update example into a V4 application and assume equivalent behavior.

Trace the contract

The launchpad resolves a semantic intent and target. The app descriptor declares dependencies, models and routing. Views display bindings; controllers coordinate interactions. The service metadata describes entity types, properties and supported operations. The backend applies authorization and business rules. Hiding a button in the browser is useful UX but cannot replace backend authorization.

Worked investigation: a list opens but shows no orders

This is a fictional training case. First check whether the intended component loaded. Next inspect the actual network request, response status, response body and metadata. A successful response containing an empty collection points toward filters or data visibility; a forbidden response points toward access; a missing property suggests a contract or binding mismatch. These observations justify different next steps. Rebuilding the launchpad tile before inspecting the request does not test the failed data path.

Guided practice

Create a mock order collection with one visible and one filtered record. Bind the list to the correct collection, then intentionally change a property name. Capture the binding error, restore the contract and verify the list. Add a forbidden-response test and confirm the UI displays a useful error without exposing backend details. Finally test keyboard navigation and a narrow viewport.

Check your understanding

If the app opens but a save fails with a concurrency conflict, is the tile definition the first place to change? No: inspect the update request, ETag behavior and the backend conflict. Confirm the selected model supports the update pattern being used.

Scope and references

This introduction describes architectural responsibilities, not universal configuration steps. Runtime support, service activation, deployment and extension options depend on SAP product and release.
[Official SAP Learning: UI technologies and development](https://learning.sap.com/courses/learning-the-basics-of-sap-fiori/explaining-user-interfaces_c2d82120-6a0c-49d2-b872-8b5352c0dfad)
[UI5 Demo Kit and version-specific APIs](https://ui5.sap.com/)

---

Tutorial outcome

Treat experience design, UI implementation, service contract and authorization as different responsibilities. A launchpad tile only resolves navigation; it does not prove data binding or backend permission. Choose a metadata-driven floorplan when it meets the interaction requirements, then justify any custom UI.

Prerequisites

Basic business-process knowledge; synthetic fixtures or an authorized sandbox.

Worked case — fictional

A fictional buyer opens an order app successfully but sees an empty list.

Step-by-step investigation

1. Intent

Resolve the semantic object and action to the intended application before debugging the data path.

Expected evidence: Intent PurchaseOrder-display reaches the expected component.

2. Model

Identify the declared data source and collection, then inspect the service response without changing filters blindly.

Expected evidence: GET Orders returns two synthetic records.

3. Binding

Compare case-sensitive collection and property names in the view with the returned service metadata.

Expected evidence: PurchaseOrder exists; purchaseorder does not.

4. Permission

Test the same operation with a restricted test role and confirm the service enforces access independently of the UI.

Expected evidence: Restricted company-code request is denied.

Try it yourself

Reproduce the synthetic input from the example below in a local fixture or authorized sandbox. Follow each step, record the observed result, and explain any mismatch before continuing. Do not treat the expected evidence as a result observed in your SAP tenant.

Acceptance check

The mock list contains order 4500000101 only when its binding and access context match.

Common failure to avoid

A visible tile and a loaded component do not establish successful service consumption.

Self-check

The component opens but the service returns an empty collection. Which evidence comes next?

Expected reasoning: Inspect filters and permitted data for that request.

Edition and release scope

Check the linked SAP documentation for your product, runtime, region and enabled service plan. The worked case is a simulation; these steps were not executed in a customer SAP tenant.

SAP references

References checked 2026-10-30. SAP material supports the named concepts; the case, fixture and acceptance checks are original ERPClimb teaching material. No SAP tenant execution or certification is claimed.

[SAP Learning — UI development foundations](https://learning.sap.com/courses/learning-the-basics-of-sap-fiori/explaining-user-interfaces_c2d82120-6a0c-49d2-b872-8b5352c0dfad) — UI technologies, MVC, development responsibilities

[SAP Learning — Flexible programming model](https://learning.sap.com/courses/developing-an-sap-fiori-elements-app-based-on-a-cap-odata-v4-service/getting-an-overview-of-the-flexible-programming-model_fc9ea1ee-20a8-4add-b3f9-c8c8e3701ae0) — Fiori elements OData V4 extensions; check supported runtime

A fictional buyer opens an order app successfully but sees an empty list.

A visible tile and a loaded component do not establish successful service consumption.

The mock list contains order 4500000101 only when its binding and access context match. Check the linked SAP documentation for your product, runtime, region and enabled service plan. The worked case is a simulation; these steps were not executed in a customer SAP tenant.

The component opens but the service returns an empty collection. Which evidence comes next? Inspect filters and permitted data for that request.