SAP ABAP INTERVIEW SERIES • PART 12

SAP Fiori and UI5 Integration: MVC, OData, Routing and Launchpad

Interview-ready architecture, manifest configuration, binding, navigation, security and real production troubleshooting.

Series: All parts · Previous: Part 11 OData/Gateway · Next: Part 13 S/4HANA Migration

1. End-to-end architecture

1. Fiori Launchpad

2. UI5 component

3. XML views + controllers

4. OData V2/V4 model

5. Gateway/RAP service

6. ABAP/CDS + HANA

The Launchpad resolves a target intent, loads a UI5 component and its descriptor, then the application binds controls to models. OData requests reach Gateway or RAP, where authorization and business logic protect backend data.

2. MVC in SAPUI5

Model: application data and binding state—OData, JSON, resource or other supported models.
View: declarative UI, commonly XML, with controls and bindings.
Controller: event handling and view coordination. Keep heavy business logic in services, not controllers.

Why XML views?

They separate UI structure from controller code, support tooling and make bindings, fragments and reuse easier to review.

3. Component.js and manifest.json

Component.js defines the application component and normally declares metadata: { manifest: "json" }. manifest.json is the central descriptor for application metadata, dependencies, models, data sources, root view and routing.

{
  "sap.app": {
    "id": "com.demo.sales",
    "type": "application",
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata/sap/ZSO_SRV/",
        "type": "OData",
        "settings": { "odataVersion": "2.0" }
      }
    }
  },
  "sap.ui5": {
    "dependencies": { "libs": { "sap.m": {} } },
    "models": {
      "": { "dataSource": "mainService", "preload": true }
    },
    "routing": {
      "config": { "routerClass": "sap.m.routing.Router", "type": "View", "path": "com.demo.sales.view", "controlId": "app", "controlAggregation": "pages" },
      "routes": [{ "pattern": "orders/{orderId}", "name": "order", "target": "order" }],
      "targets": { "order": { "id": "Order", "name": "Order" } }
    }
  }
}

Release note: Manifest schema and routing properties evolve. Use the documentation for the UI5 version deployed in your landscape; modern versions favor asynchronous, manifest-first loading.

4. Binding interview questions

Property, aggregation and element binding?

Property binding connects one control property, for example text="{CustomerName}".
Aggregation binding creates repeated child controls from a collection, such as table items.
Element/context binding binds a view or container to one object path so relative child bindings share the context.

One-way vs two-way binding?

One-way moves model changes to the UI. Two-way also propagates supported control changes back to the model. OData changes may remain pending until submitted, depending on model version and update groups.

5. OData V2 vs V4 model

The V2 and V4 models have different APIs and binding semantics; do not mix their methods. SAP recommends OData V4 for new services where the backend and application scenario support it. Many S/4HANA landscapes still use V2 services, so interview answers should state the project context.

Why avoid manual AJAX for normal OData binding?

The UI5 OData models handle metadata, binding, batching, messages, refresh and protocol details. Manual calls are harder to keep consistent with lifecycle, busy state and error handling.

6. Routing and navigation

onOrderPress: function (oEvent) {
  const sOrderId = oEvent.getSource()
    .getBindingContext()
    .getProperty("SalesOrder");

  this.getOwnerComponent().getRouter().navTo("order", {
    orderId: encodeURIComponent(sOrderId)
  });
}

Routes match browser-hash patterns; targets define which view/component is loaded and where. Encode parameters and never use a route value as authorization—backend authorization remains mandatory.

7. Launchpad concepts

Intent-based navigation?

An intent combines a semantic object and action, for example #SalesOrder-display. Target mappings resolve that intent to an application. Catalog/space/page assignments control discoverability, but backend roles still control data access.

App works standalone but not in Launchpad—what do you check?

Target mapping, semantic object/action and component ID.
App index/cache and deployed resources.
Destination/system alias and service activation.
User catalog/space/page assignments.
Backend and front-end authorizations.
Browser network trace and UI5 diagnostics for failed modules or OData calls.

8. Fiori elements vs freestyle UI5

Approach	Best fit
Fiori elements	Metadata-driven standard floorplans with high consistency and less custom code.
Flexible Programming Model	Fiori elements building blocks plus controlled custom sections.
Freestyle UI5	Complex interactions or layouts not covered by standard floorplans.

9. Performance and error handling

Load only required libraries and data; use component preload and async APIs.
Use server paging, $select, appropriate $expand and batch groups.
Avoid repeated model refreshes and growing lists without paging.
Use MessageManager and centralized request-failure handling; show business-safe messages.
Profile with browser network/performance tools, UI5 diagnostics and backend traces.

10. Common mistakes

Putting database/business logic in controllers.
Hard-coding service hosts instead of using destinations/relative URLs.
Using deprecated synchronous APIs.
Mixing OData V2 and V4 methods.
Assuming Launchpad visibility equals data authorization.
Skipping accessibility, responsiveness and keyboard tests.

11. Exercise and rapid revision

Design a responsive Sales Order list-detail app. Define the manifest data source, routes, list binding with server paging, detail context binding, busy/message handling, intent navigation and five authorization/error tests.

Descriptor holds metadata, models, dependencies and routing.
XML view = structure; controller = UI coordination; model = data.
Routes match hashes; targets load views/components.
Launchpad intents use semantic object + action.
Backend always enforces authorization.

12. Official SAP references

Next: Part 13 — S/4HANA migration interview questions.

Sap 4 All

SAP Fiori and UI5 Interview Questions: MVC, OData Models, Routing and Launchpad

SAP Fiori and UI5 Integration: MVC, OData, Routing and Launchpad

1. End-to-end architecture