Organize How Constants Are Listed in the Properties Pane

To help users who will be extending pages, you can customize how constants and components are organized and displayed in the Page Designer's Properties pane.

Typically, when extending a page in the Page Designer, the Properties pane contains two tabs—the Constants tab and the Components tab—where the page's extendable items are listed. Extendable items, which includes constants, dynamic components, and extendable items in embedded fragments, are listed under the appropriate tab. To provide a better design experience for users extending the page, you can organize how items are listed in the Properties pane by organizing items into folders, and by setting the order that they are listed.

You can also choose to hide any items you don't want listed in the Properties pane (they'll still be listed in the Variables and Rule Sets editors). This is particularly helpful when there are many extendable components and constants. If you decide not to organize any of the items, the items are listed in the Constants and Components tabs.

Here's an example of the Properties pane for a page with an extendable dynamic form and constants. The Properties pane is optimized so that the constants that are typically configured are visible directly in the pane. The page constants for configuring the header, which are used less frequently, are grouped under the Header section to be less distracting:

Description of the illustration page-customized-pi.png

To customize how items are displayed in the Properties pane:

1. Open the page's Design Time editor.
   The page's extendable items (including dynamic components from embedded fragments) are listed in the Components pane. By default, the items in the General pane are listed in the order they appear in the page, but you can change the order to organize how items are grouped and listed.
2. In the General pane, change the order items and sections are listed by grabbing the handle to the left of the item and moving it into the position you want:
   
   

   
   Description of the illustration page-designtime-itemhandle.png

   
   
3. Create a section and add items to it:
   1. Click + Section, enter a section label in the pop-up (for example, Header), 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.
      You can also associate the section with a page component. When the user selects the component in the Page Designer, the Properties pane displays the items in the associated section.

      To associate a component with a section:

      1. Open the Page Designer and select the component on the page.
      2. In the Properties pane, select the section in the Design Time Section dropdown list:
         
         
         Description of the illustration page-customize-selectdesignsection.png
         
         
   3. Now drag the items you want to add to the section and drop them onto the section header (for example, drag the Title constant and drop it onto the Header section).
   
   

   
   Description of the illustration page-designtime-pi.png

   
   

   To remove an item from a section, right-click the item and select Remove from Section, or deselect the item in the Components palette.

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

4. Under General, select each item to edit its properties in the Properties pane.

   Modify the Label and Description properties to customize the label and descrption the user will see in the Properties pane when configuring the page.

Now when the user configures the page in an extension, they'll see the items in the Properties pane displayed in the order you want them to appear, and grouped how you would like.

You can also customize how fields for editing constants are rendered in the Properties pane. See Configure How Variables are Customized in the Properties Pane.