What Are Fragments?

When you look at the App UIs tab in the Navigator, you may notice a section called Fragments, as shown here:

Description of the illustration pagefragment.png

A fragment is a reuseable piece of UI that you can include in an App UI, or even a configuration of another App UI. For example, suppose you had a large app with many complex pages—pages with a foldout layout, for example, or with multiple panels or tabs—that had become unwieldy to work on and costly to render. By isolating the content of a given tab or panel within a fragment, you effectively can modularize your App UI's logic, which allows you to maintain each panel or tab separately. In addition, fragments created for one page can be reused in other parts of pages, and can even serve as entire page templates.

Besides the benefits of reuse, fragments provide performance gains. Typically, all components used in a page load when the page renders. But sometimes you don't need all components, especially those triggered by UI events or hidden behind other UI components, to load right away. For example, you don't need components in a panel's edit version to show until the user clicks the edit icon. If you define the edit panel in a fragment, you could delay rendering until you actually need to show the fragment to improve the time it takes for the page to render initially.

As you work with fragments, keep in mind that the same fragment can be used in more than one App UI within the same extension. If you want to use a fragment in another extension, just add the extension containing the fragment as a dependency to the new extension.

Work With Fragments tells you more about fragments and how to use them. Also see Work With Fragments From Dependencies if you are customizing an App UI to suit your business needs.