Section Fragment Properties for Display in the Properties Pane

Define a custom layout of sections to display a fragment's most important properties on the Properties pane when the fragment is selected on the page or container that uses it.

Typically, when a fragment is added to a page or container, its input parameters display in alphabetical order on the Properties pane when the fragment is selected on the page or container. To provide a better design experience for those who use the fragment, you can organize its input parameters—as well as any other components you want to highlight—in sections.

The ability to section a fragment's properties is most useful in pages where a fragment is used as a page template. Here's an example of a page based on a Welcome Page Pattern fragment: what you see on the left is the standard view of input parameters; what you see on the right is the sectioned view:

Description of the illustration fragment-sections-comparison.png

Users will be able to drill down to view input parameters in each section, as shown in the image, where clicking User Info shows the avatar and days input parameters. Take note also of the Related Object property, which has been customized to show a component for selecting a business object.

Let's use the same Welcome Page Pattern example to see how to section a fragment's properties:

1. Open the fragment's Design Time editor.
   
   
   Description of the illustration fragment-designtimetab-empty.png
   
   
2. Review the list of input parameters, as well as dynamic components and slots (if any), and decide which ones you want to display as properties in the fragment's page or container. If you want to group them by sections, decide which properties go into each section.
3. Drag and drop an item onto the valid area under General, or simply select an item's check box in the Components palette to add it to the end of your layout:
   
   
   Description of the illustration fragment-designtimetab-dnd.png
   
   

   If you want, use the item's Properties pane to set additional properties. For example, you can use the Label field to display a user-friendly name for the fragment variable. The Label field is particularly useful for dynamic components with data that may take a while to display in the Page Designer. Instead of a generic "Dynamic Form" or "Dynamic Table" label, users can get a better idea of what the component will display.

4. To create a section and add properties to it:
   1. Click + Section, enter a section label in the pop-up (for example, User Info), and click Create.
   2. Optionally, in the newly created section's Properties pane, change the default icon to more easily identify the section: click the Default Icon, select an icon from the Icon Gallery, and click Select.
   3. Now drag the item you want to add to the section and drop it onto the section header (for example, drag the avatar input parameter and drop it onto the User Info header).

   To remove a parameter you added from a section, right-click the parameter and select Remove from Section, or deselect the item in the Components palette:
   
   Description of the illustration fragment-designtimetab-delete.png
   

   To delete a section, right-click the section and click Delete Section.

Now after the fragment is added to a page or a container, you'll see its properties display as sections in the Properties pane when the fragment is selected on the page. The sections also show in the Structure view.

Description of the illustration sectioned-result-page-designer.png

If the fragment is used as a page template to create a page, the sectioned view shows on the page's Properties pane as well as in the page's Structure view, with the fragment considered the root element instead of the page:

Description of the illustration sectioned-result-page-designer-rootview.png