Page Designer¶

Elements panel¶

The Elements panel is on the left side of the Page Designer. In this panel, you can select components for your page, configure models, create and set up action flows, and include JavaScript files.

• Components: Use components to design the visual elements of your page. They display and allow you to interact with the data in your Models. For more information, see Components.
• Index: An expandable and collapsible list of a page’s components and its child elements.
• Models: Models provide components with data from objects, as well as external objects and services, providing the fields used on the page.
• Action flows: Create reusable, named action flows that can be triggered by user interactions, events, or hotkeys.
• Display Logic: Display logic statements control whether a component is rendered, enabled, selected, and styled. They are based on one or more rules.
• JavaScript : Include custom JS in your page. For more details, see JavaScript

Index and Surfaces¶

The Index shows the page’s components and child elements in a tree view, displaying how they are arranged. Use the Index to drag new components onto the page or rearrange existing ones.

Surfaces are overlays, like sliding panels and modals, that appear on top of the main content to show details without leaving the page. The Surfaces area provides a centralized view of all overlays on the page.

Properties panel¶

The Properties panel is on the right side of the Page Designer. It shows the options and settings for the element currently in focus, such as components, models, or snippets. When you select an element in the Page Designer, its properties appear in collapsible sections within the panel.

Global page actions¶

The global page actions, also known as the navigation bar, are at the top of the Page Designer. These actions include:

• The navigation menu: Provides links to manage Connections, Data, Design systems, and other Settings.
• Canvas preview settings: Allows you to change how the canvas is rendered in the designer.
• Undo and Redo: Click to undo the last action (keyboard shortcut: Cmd+Z on Mac, Ctrl+Z on Windows) or redo an undone action (keyboard shortcut: Cmd+Shift+Z or Cmd+Y on , Ctrl+Y on ). Use these buttons to undo or redo actions on the page, in components, or within the models, action flows, or JavaScript tabs in the Elements panel
• Preview: Click to preview the live version of your page.
• Other options: Click on the dots-vertical to view other options.
  • Revisions: Click to view the list of revisions at different points in the page history. Revisions allow you to roll back a page to a previous point in the development process.
  • Clone: Create a duplicate of the current page.
  • Download as XML file: Download the current page as an XML file.
  • Delete: Delete the current page.
• View XML: Click to view the XML version of the page you created.
• Save: Click to save ( keyboard shortcut Ctrl+S on , ⌘ +S on ).
• Cancel: Click to discard the changes.

Canvas¶

This is the area in the Page Designer where you drag and drop components, organizing the layout and functionality of your page.

View XML¶

After saving a page, click View XML to access and interact with the XML version of the page. Here, you can copy the XML to export your pages to other tenants. Sharing the XML is helpful for troubleshooting page issues, as it enables others to recreate the page and resolve problems more efficiently.