MVC, XML views and fragments
Full lesson currently free to read · AI practice limits apply separately
Separate the component's ownership from view rendering and controller behavior. A fragment provides reusable UI pieces but requires deliberate identifier, model and lifecycle handling. Asynchronous creation means the owning view may disappear before a delayed fragment resolves, so cleanup and ownership need tests.
Visual overview
Explanation
Tutorial outcome
Separate the component's ownership from view rendering and controller behavior. A fragment provides reusable UI pieces but requires deliberate identifier, model and lifecycle handling. Asynchronous creation means the owning view may disappear before a delayed fragment resolves, so cleanup and ownership need tests.
Prerequisites
Complete chapters 1–2 in this module. Use synthetic fixtures or an authorized sandbox.
Worked case — fictional
Opening a mock approval dialog twice creates duplicate identifiers and retained event handlers.
Step-by-step investigation
1. Own
Assign the dialog to its owning view using the supported API for the selected UI5 runtime.
Expected evidence: One view owns one dialog instance.
2. Create
Resolve asynchronous fragment loading once and use view-prefixed identifiers rather than unscoped global IDs.
Expected evidence: Two app instances have distinct dialog IDs.
3. Bind
Pass the selected order context when opening and clear stale context on the next selection.
Expected evidence: Order B never displays order A details.
4. Dispose
Close and destroy owned UI resources through lifecycle cleanup; test delayed resolution after navigation.
Expected evidence: Repeated open and navigation leave no duplicate dialog.
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
A second open reuses or cleanly recreates the intended dialog and displays the current order.
Common failure to avoid
Avoid global fragment IDs, repeated untracked creation and handlers that survive their owner.
Self-check
Why can a reusable fragment still leak resources?
Expected reasoning: Its ownership and lifecycle were not connected to the containing view.
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 Help — UI5 developer best practices](https://help.sap.com/docs/SAPUI5/b2f662dd9d7a4ec680056733050b4d34/28fcd55b04654977b63dacbee0552712.html?version=1.143) — Asynchronous modules, components, views, fragments and dependencies; source version 1.143
Code example
// Pseudocode: adapt fragment APIs to the selected UI5 runtime.owner = "OrderView"; dialogKey = owner + "--approvalDialog";selectedOrder = "B";MVC, XML views and fragments: evidence walkthrough
Simulated training case. These observations are authored fixtures, not screenshots or results from a customer SAP system.
Opening a mock approval dialog twice creates duplicate identifiers and retained event handlers.
Before you start
- Complete chapters 1–2 in this module. Use synthetic fixtures or an authorized sandbox.
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.
Own
Assign the dialog to its owning view using the supported API for the selected UI5 runtime.
Expected evidence · simulated
One view owns one dialog instance.
Automatic playback is disabled by your reduced-motion preference. All steps remain available.
Try it, then verify
A second open reuses or cleanly recreates the intended dialog and displays the current order.
Watch for: Avoid global fragment IDs, repeated untracked creation and handlers that survive their owner.
Open the ERPClimb lesson diagram at full sizeSAP references and release scope
References checked 2026-10-30. The linked SAP material supports the named concepts; the scenario, fixtures and acceptance checks are original ERPClimb teaching material. This is not an SAP certification or a tenant-execution claim.
- SAP Learning — UI development foundations
UI technologies, MVC, development responsibilities
- SAP Help — UI5 developer best practices
Asynchronous modules, components, views, fragments and dependencies; source version 1.143
Real project scenario
Opening a mock approval dialog twice creates duplicate identifiers and retained event handlers.
Common mistakes
Avoid global fragment IDs, repeated untracked creation and handlers that survive their owner.
Best practices
A second open reuses or cleanly recreates the intended dialog and displays the current order. 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.
Interview angle
Why can a reusable fragment still leak resources? Its ownership and lifecycle were not connected to the containing view.
Practice this lesson
Original educational case studies for SAP consultants, not official SAP certification exam questions. Verify product edition and implementation details against the current SAP documentation.
Quick check
0 of 3 questions attempted
1. What is the preferred view type in SAPUI5 apps?
2. When should you use a fragment?
3. Where should event handlers for an XML view be implemented?
Interview questions
1. How do you structure views, fragments and controllers in a UI5 app?
Answer it in your own words first, then compare.
2. A dialog fragment shows data from the wrong record. What could be wrong?
Answer it in your own words first, then compare.
Check before use: lesson examples are educational, not a guarantee of correctness for your SAP edition or release. Sample code has not been executed on your SAP system. Confirm API availability, syntax, authorizations and business impact in an approved development or test environment.