Pages

Introduction

Pages as the name suggests are the different web pages or interfaces of the application you are building. You drag and drop the components which are required in your application, lay them out, size them and design them as per your needs.

Creating a Page

You can creare a new page in your application by clicking on the + icon next to the Pages section of the left navigation.

You can also create folders inside your pages section. Folders are used to group multiple pages that are a part of a specific function of your application. For example: Login.

Simply drag and drop pages from the left navifation and drop them inside a folder to add a page inside a folder. Vice-versa if you want to remove any page from a folder.

Configuration

Each pages comes with a set configurations that can be configured through it's properties panel. Click on the page on the left navigation to bring up it's properties.

Properties

• Name & Key Add a name through which you want to idenify the page in the Name field. A name that best describes this page. The key field will automatically be generated in camelCase based on the name you enter. The key is then used to access the page inside the project.

  

  Once you deploy your app, you'll not be able to change the key of a page.

• Background Color The backround color property is used to set the background color of the page. When you click on it, it opens a color selector popup where either you can:

  • Select a color manually
  • Enter the HEX, RGB, etc values directly

  

• Primay Color Setting the primary color for a page makes the primary color of all the components in the page the same by default when added to it. For example if I set the primary color property as Orange, notice when you drag any components inside, their primary color will come as orange by default.

  

• Page Alignment Page alignment is used to align the contents of the page (components). Three types of alignment are available:

  • Right
  • Center
  • Left
• Size Size represents the frame of the page for which you want to design your interface. The following screen sizes are available: | Size | Description | |---|---| | Desktop HD | The frame of the page is set to (1440 x 900). If you open the page inside a screen size that is smaller than this, then the interface will scroll horizontally. If you open it inside a screen size that is bigger than it, then extra space will be visible at the right and bottom. | | Desktop | The frame of the page is set to (1280 x 720). If you open the page inside a screen size that is smaller than this, then the interface will scroll horizontally. If you open it inside a screen size that is bigger than it, then extra space will be visible at the right and bottom. | | Tablet | The frame of the page is set to (1024 x 768). If you open the page inside a screen size that is smaller than this, then the interface will scroll horizontally. If you open it inside a screen size that is bigger than it, then extra space will be visible at the right and bottom. | | Mobile | The frame of the page is set to (768 x 1024). If you open the page inside a screen size that is smaller than this, then the interface will scroll horizontally. If you open it inside a screen size that is bigger than it, then extra space will be visible at the right and bottom. | | Responsive | This takes the screen size of the device on which the page is opened. The componenets inside the page will automatically adjust if opened inside a smaller or bigger screen size. | | Custom | You can set custom height and width for the page. If you open the page inside a screen size that is smaller than what you set, then the interface will scroll horizontally. If you open it inside a screen size that is bigger what you set, then extra space will be visible at the right and bottom. |

Handlers

When you want to perform various actions based on certain trigger actions of a page such as onLoad (when the page loads) or onExit (when the page is exited), handlers are used.

Creating Hanlders

• Select the page you want to set a handler
• In the properties panel, under the handlers section, click on + Handler to add a new handler
• Select the action to trigger on (Load / Exit / Click)
• Configure the action

You can read more about how handlers work and to how add multiple actions here

Access Control

Page access control is used to limit the access for an entire page based on certain roles or permissions. You can add simple conditional checks here and accordingly will be shown to the user.

Adding access check

• Select the page you want to set a access for
• In the properties panel, under the access control section, click on + Check to add a new access check
• Enter the name of the check and the condition that needs to be met for the user to be shown the page

Setting Home Page

For applications that have multiple pages inside them, you can set a page as Homepage. The page selected as Homepage will be opened and shown to the user by default when they open the application in their browser.

You can set the homepage

Only one page can be selected as Homepage by simply right clicking on the page item in the left navigation bar and selecting homepage.

Deleting a Page

A page can be deleted by simply right clicking on the page item in the left navigation bar and selecting delete.