Skip to main content

Module 14: Fragments & Reusability

Fragments enable UI reuse without creating full views.
They are essential for building clean, modular, and maintainable SAPUI5 applications.

This module explains:

  • What fragments are
  • How to use XML fragments
  • Dialogs and popovers
  • Fragment lifecycle and reuse best practices

1. What are Fragments?​

Definition​

A fragment is a reusable UI part that:

  • Has no controller of its own
  • Is loaded into an existing view
  • Shares the parent controller
Key Concept

Fragments are UI-only building blocks.

When to Use Fragments​

Use fragments for:

  • Dialogs
  • Popovers
  • Reusable form sections
  • Repeated UI patterns
Rule of Thumb

If UI repeats, use a fragment.

2. XML Fragments​

Basic XML Fragment Example​

<core:FragmentDefinition
  xmlns="sap.m"
  xmlns:core="sap.ui.core">

  <Text text="This is a fragment" />

</core:FragmentDefinition>
sap.ui.core.Fragment.load({
  name: "com.app.demo.view.MyFragment",
  controller: this
}).then(function (oFragment) {
  this.getView().addDependent(oFragment);
  oFragment.open();
}.bind(this));
Best Practice

Always use async Fragment.load().

3. Dialog Fragments​

Why Dialog Fragments?​

Dialogs:

  • Are not full views
  • Should be reusable
  • Must be destroyed properly

Dialog Fragment Example​

<Dialog
  title="Confirm"
  xmlns="sap.m">

  <Text text="Do you want to continue?" />

  <beginButton>
    <Button text="OK" press="onConfirm" />
  </beginButton>

  <endButton>
    <Button text="Cancel" press="onCancel" />
  </endButton>

</Dialog>

Opening Dialog Fragment​

onOpenDialog: function () {
  if (!this._oDialog) {
    sap.ui.core.Fragment.load({
      name: "com.app.demo.view.ConfirmDialog",
      controller: this
    }).then(function (oDialog) {
      this._oDialog = oDialog;
      this.getView().addDependent(oDialog);
      oDialog.open();
    }.bind(this));
  } else {
    this._oDialog.open();
  }
}

4. Popovers​

What is a Popover?​

Popovers display:

  • Contextual information
  • Actions related to a control

Popover Fragment Example​

<Popover
  placement="Bottom"
  xmlns="sap.m">

  <Text text="More details here" />

</Popover>

Opening Popover​

this._oPopover.openBy(oEvent.getSource());
UX Rule

Use Popovers for contextual actions, not full workflows.

5. Reusable UI Components (Fragment vs View)​

Fragment vs View​

AspectFragmentView
Controller❌✅
Routing❌✅
ReusabilityHighMedium
LifecycleManaged manuallyAutomatic
Design Guideline

Use views for navigation, fragments for reuse.

6. Fragment Lifecycle Management​

Why Lifecycle Management Matters​

Poor fragment handling leads to:

  • Memory leaks
  • Duplicate dialogs
  • Performance issues

Best Practices​

Follow These
  • Load fragments lazily
  • Cache fragment instances
  • Add fragment as dependent
  • Destroy fragments on exit if needed

Destroying Fragments​

onExit: function () {
  if (this._oDialog) {
    this._oDialog.destroy();
  }
}

7. Fragment Events & Controller Access​

Event Handling​

Fragment events are handled in:

  • The parent controller
<Button text="Save" press="onSave" />
onSave: function () {
  // Controller logic
}
Important

Fragments reuse the same controller.

8. Common Fragment Mistakes​

Avoid These
  • Loading fragment every time without caching
  • Not adding as dependent
  • Creating controllers for fragments
  • Putting business logic in fragments

9. Interview-Grade Explanation​

Q: What is the difference between a view and a fragment in SAPUI5?

Answer:

A view represents a complete UI screen with its own controller and routing support, while a fragment is a reusable UI part without its own controller, used for dialogs, popovers, or repeated UI sections.

10. Summary​

  • Fragments enable UI reuse
  • XML fragments are preferred
  • Dialogs and popovers are common fragment use cases
  • Fragments share the parent controller
  • Lifecycle management is critical
  • Proper reuse improves performance

11. What's Next?​

➡️ Module 15: Styling & Theming

Learning Tip

Fragments keep your UI DRY — Don't Repeat Yourself.