Skip to content

Fragments

Fragments are reusable UI parts that can be added to your pages.

It is most useful when you want a certain part of your UI to be reusable across multiple pages.

You can take part of that UI that are often duplicated in other pages and put it into a fragment and then reference the fragment in those pages.

When you need to make changes to that piece of the UI, you can modify it in the fragment and all the pages that reference the fragment will pick up the new UI change when you deploy your application.

Fragment

  • Fragment can be a single control or an array.
    • A single control Fragment is a fragment that contain only a single control definition represented by an object definition (e.g. {})
    • An array Fragment is a fragment that contain an array of controls definition represented by an array definition (e.g. [])
  • Developers can have fragment within fragment (there is no limit how deep it can go)

You can drag and drop any UI controls into a fragment using the Fragment Editor.

Once a Fragment has been created, it is added to the Control Palete. You can drag this Fragment and drop this to other Pages or Fragments to consume it.

Note

Fragment is resolved during bundling time, at runtime, there's no concept of fragment.

E.g. Return different fragments conditionally in a rule is not supported, since rules are executed at runtime.

For example:

ProductObjectCell.fragment is a single control fragment

{
  "_Type": "Control.Type.ObjectCell",
  "AccessoryType": "disclosureIndicator",
  "Title": "{ProductName}",
  "Subhead": "{Supplier/CompanyName}",
  "Status": "{ProductID}",
  "Footnote": "{Category/CategoryName}",
  "StatusText": "{UnitPrice}",
  "SubstatusText": "{UnitsInStock}",
  "PreserveIconStackSpacing": false,
  "OnPress": "/MyApp/Actions/NavToProductDetail.action"
}

ProductSection.fragment - you can also define another fragment inside a fragment:

{
    "_Type": "Section.Type.ObjectTable",
    "_Name": "ProductTable",
    "ObjectCell": "/MyApp/Fragments/ProductObjectCell.fragment",
    "Target": {
        "EntitySet": "Products",
        "Service": "/MyApp/Services/SomeOData.service"
    }
}

Consuming the fragment in a Sectioned Table:

{
  "OnRendered": "/NorthwindApp/Rules/OnRendered.js",
  "Sections": [
    "/MyApp/Fragments/ProductSection.fragment",
    {
      ... // You can mix with other non-fragmented sections too
    }
  ],
  "_Type": "Control.Type.SectionedTable",
  "_Name": "SectionedTable"
}

Overriding Fragment

You can override the properties of a fragment that you want to consume. This allows you to reuse an existing fragment in different pages with slightly different properties instead of creating multiple similar fragments.

  • Existing properties can be modified.
  • Non-existent properties can be added. (as long as the control inside the fragment supports it)
  • Existing properties can be deleted i.e. setting it to undefine value, as if it was never defined.

For example, Consuming the ProductObjectCell.fragment in a Sectioned Table:

{
    "_Type": "Section.Type.ObjectTable",
    "_Name": "ProductTable",
    "ObjectCell": {
        "_Type": "Fragment",
        "Fragment": "/MyApp/Fragments/ProductObjectCell.fragment",
        "Properties": {
          "DetailImageText": "/My/Rules/GetDetailImageText.js",  // <--- Adding new properties that isn't exist in the Fragment
          "AccessoryType": "detailButton",  // <--- Modifying existing properties in the Fragment
          "SubstatusText": null  // <--- Deleting properties that exist in the Fragment
        }
    }
    "Target": {
        "EntitySet": "Products",
        "Service": "/MyApp/Services/SomeOData.service"
    }
}

Example 2, override properties through #Name

ActionBarItems.fragment is an array Fragment

[
      {
        "_Name": "UserProfileItem",
        "_Type": "Control.Type.ActionBarItem",
        "OnPress": "/MyApp/Actions/NavToUserProfile.action",
        "Position": "Right",
        "Icon": "sap-icon://account",
        "Text": "Profile"
      },
      {
        "_Name": "RefreshItem",
        "_Type": "Control.Type.ActionBarItem",
        "OnPress": "/MyApp/Rules/Sync.js",
        "Position": "Right",
        "SystemItem": "Refresh",
        "Text": "Refresh"
      }
]

Consuming the array fragment:

{
  "Caption": "My Page",
  "ActionBar": {
    "Items": {
      "_Type": "Fragment",
      "Fragment": "/MyApp/Fragments/ActionBarItems.fragment"
      "Properties": {
        "#Name:RefreshItem": {
          "Text": "Sync"
        }
      }
    }
  },
  "_Type": "Page",
  "_Name": "Products_List"
}

Last update: November 22, 2021