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.

• 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:

Show Loading Progress Indicator

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: Not Supported

"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.