Page Fragments

Page fragments allow you to create reusable collections of widgets, like page headers or pop-up menus. Page fragments also update dynamically. If you make a change to a fragment, every instance of the fragment in the app updates to match, including those you've already added to pages.

Create page fragments

To create a page fragment, select Page Fragment instead of Page from the page creation dialog. The page fragment editor works like the page editor: place widgets on the canvas, add data bindings and scripts, and you've got an interface. The main difference between them is that the size of the root panel determines the fragment's default size when used on a page.

Add page fragments to a page

There are two ways to use page fragments:

• Add page fragments as widgets: Once you create a page fragment, it's available at the bottom of the widget panel on any page in your app.
• Use page fragments as pop-up dialogs: Use the showDialog() method on the fragment to open it as a pop-up dialog. For example, for a fragment named MenuFragment, use app.showDialog(app.pageFragments.MenuFragment);.

Use custom properties to customize page fragments

It's probably no surprise from the name, but custom properties are great for customizing each instance of a page fragment. Custom property values are unique to a fragment instance, so you can have multiple fragments with different values for the same property. For example, you could make an app header customizable by setting its titleLabel to a custom Title property. After that, simply change each header's Title property to whatever you'd like the page's title to be.

Add properties to your fragment with the Add Property button in the Property Editor. Edit them under the Custom Properties property group in the Property Editor.