Page

A page is like a master container. You can add multiple controls and containers within a page. You can add multiple pages to the app by clicking on the '+' icon at the top of the left pane (tree view).

When adding a new page, you can pick one of the templates from the pop-up window. You can pick from several templates, including dashboards, forms, lists, and other. If you want to start with a fresh page, select Blank Page.

General

• Description- Description of the page. Useful for App creators to define what the page is about. This information is not visible in runtime.
• Tooltip - Tooltip to be displayed on the container. Use this to provide additional information on the control.
• Data Context - A container for a single entity record. When this is set on a page, all controls that are part of that page can access the data context bound to the page.

• Show Loading Progress Indicator - If enabled, will allow the app users to interact only after the page is loaded. This is enabled by default

Note:

Disabling this flag will allow the end-users to interact with the app during the page load. This is especially useful when there are complex pages in an app and the users don't want to wait till the entire page loads.

Based on the need, the App creator can decide whether to show a progress indicator till the page completely loads or allow the end-users to interact with the page while it loads.

Events

• Loaded - Configure what happens when the page is loaded.

  Important: "Clicked On" event is no longer supported for Page

Style

• Layout - Determine how the controls within the page are positioned

  • Direction (Horizontal/Vertical) - Controls are arranged one below the other (vertical) or side by side (horizontal).
  • Alignment- Controls alignment within the page ( Left, Center, Right & Stretch for Vertical direction and Top, Middle, Bottom, Stretch for Horizontal direction).
  • Justify- Top, Middle, Bottom & Distribute for Vertical direction and Left, Center, Right & Distribute for Horizontal direction.

  • Allow wrapping - if enabled, it wraps the control on the page if there isn't enough space.

    
    

    

    
    
• Background Color - Sets the background color of the page.
• Border - Sets the border for the page. Border Thickness, Border Color, and Corner Radius can be configured for the border.
• Font - Sets the font family for the page. All the controls within the page will have the same font family as that of the page.
• Margin- Sets the margin of the page. By default 0px margin is set. Top/Bottom and Left/Right margin properties are combined. These properties can be unlinked using the unlink button on the right side of the Margin section heading.
• Padding - Sets the padding of the container. Top/Bottom and Left/Right padding properties are combined. These properties can be unlinked using the unlink icon on the right side of the padding section heading if different padding values needed to set for each side.
• Size - The width and height of the page can be set in the size section. By default, Full width is set for the page which is 100% of the width available. If the user wants a specific width for the page, 'Full width' should be unselected and width can be set in pixels for the page.