Page
Last updated
Last updated
A Page is a web page built with XMPro's No Code App Designer. Applications can have one or more Pages in them and can navigate and pass data between Pages. One of the Pages is marked as a Landing Page, which means it functions as a home page and is the first page that will be navigated to when opening an App.
Pages can be edited by clicking on a page in the App Pages list while editing an Application, or by clicking the edit button in the top right of a page while viewing an Application if you have edit access.
When editing a Page you can click and drag the grey header to scroll left and view the list of Pages for the whole App.
The Page editor has the following sections:
Area | Description |
Blocks and Properties | You can switch between the tabs by clicking on the commands at the top. You can drag and drop blocks from the Blocks (Toolbox) tab into the Canvas, customize Block styling and properties from their respective tabs, manage Parameters, Variables, and Data Sources from the Page Data Tab, and see a hierarchical view of the Canvas in the Page Layers tab. For more details on each concept, visit the Page Layers article, Blocks article, Block Styling article, Navigation and Parameters article, Variables and Expressions article, and Data Integration article. |
Actions | Actions can be performed on the page by clicking on commands here. The commands in the middle of the command bar switch between different screen widths and apply a media query to any Block Styles applied while selected |
Devices | The commands in the middle of the command bar switch between different screen widths or Devices and apply a media query to any Block Styles applied while selected. |
Canvas | The Canvas is a no-code drag and drop editor for creating customized web pages. UI elements and blocks such as text boxes, graphs, or other various controls can be dragged onto the Canvas from the toolbox to build the contents of the Page. See the Canvas article for more detail on the canvas. |
You can select from two themes for Pages: Light and Dark. An example of each theme is shown below.
When a Page is created there is a choice between 12 different Page Layouts. The layouts have built-in responsive styles and reshape into a single column in a smaller screen layout. The layouts are as follows:
Page Layout | Order of Cards on Mobile |
Action | Description |
Save | Saves any changes made to the Page up to this point. |
Discard | Discards any changes made to the Page up to this point. |
Undo | Undo any changes made to the Page up to this point. |
Redo | Redo any changes made to the Page up to this point. |
Show Borders | Switches the Canvas between two modes: Bordered, in which every block has a dotted outline around them (invisible when viewing the Page), and Unbordered, in which blocks do not have outlines and are shown as they will be when viewing the Page. |
Exports the Page layout. Does not include Data Sources. | |
Settings | Opens the Page Settings, where you can change the Name and Theme, and delete the page. |
Launch | Launches the page as it will be viewed in the Application. |
Delete | Deletes the Page. |
