Creating an App Page
Creating a Start Page in the Layout Designer using the App Page
Last updated
Creating a Start Page in the Layout Designer using the App Page
Last updated
As mentioned before, the App page will the main page the user will see when entering the application. To create a new App Page, click in the➕New Page in the Layouts windows and click on App Page.
This brings us directly to our new page's Page Configuration window. On the left will be a list of different Templates and Controls.
Templates are prebuilt layouts that are commonly used and which you can take advantage of to speed up the construction of your application's user interface.
You can also make use of the various Controls available to customise how the user interacts with your application, which we will be having a closer look at in the upcoming section of this guide.
Firstly, we want to name this new page Start Page. Click on Page Settings⚙️on top, and in the Page Properties enter Start Page in the Name field.
We are now ready to move to the next sections and start building the user interface.
Usually, when designing a page, we want to split it into a Header, Body and Footer sections. The Layout Container achieves just that and will give us a base to work with when creating our user interface.
To add a control to our application, simply find it in the list then click and drag it to the designer are. You can filter through controls by typing its name in the Filter box.
The Layout Container will be divided into 3 distinct sections, in which we can nest Controls to build the user interface.
Now it's time to add a header our application to nicely display its name. We will go through the basics of working with Controls by manipulating the Header Component. Just like we did in Layout Container, filter through the components to find the Header Control, and drag and drop it to the topmost slot of the Layout Container.
To interact with controls in the Layout Designer, click on the control which will reveal the following buttons :
Move Control
Control Properties
Focus on current element
Delete Control
To change the text in our header, click on the Control Properties Button and enter the application name in the Text field, for example, "My ToDos". Now our header looks like this :
The body will be where the bulk of the interaction between the user and the application will happen and in this section, we will be working we will be building the actual content of the start page.
As this part of the application will contain a lot of content, which depending on screen size might not fit in a single page, we start by adding a Scroll Panel which we will later nest other Controls and as its name suggest will allow the user to scroll through them.
Filter the list and find Scroll Panel, then click and drag it into the middle/body section of the Layout Container
Next, we will be adding components to visualise the following.
Due Today
My Tasks
All Tasks
Completed Tasks
Note that those match the queries we created in the Creating Queries section of the tutorial and we will be essentially visualising the result of those queries using the Action Control and also the Chart Control.
To view the result of the Due Today query we created earlier, we need to add an Action Control to our Scroll Panel.
Filter the controls and find the Action Control, click and drag it to our Scroll Panel.
In its properties, we change the Text toDue Todayand we can also change the Icon to Calendar. This is optional but improves the look of our application.
Down under Action, we choose Show result list, and in Type of data Source, we select our Due Today query.
Repeat the steps above for the My Tasks, setting the Text, Icon and Selection Data accordingly.
Before adding the rest of the Actions, we add a Horizontal Line Control to create group our selections into two sections and make the design cleaner. Search for Horizontal Line, click and drag it underneath the My Todos Action.
At this point, this is what Scroll Panel should look like:
Now we can add our All Tasks and Completed Tasks Actions following the same steps as above.
To preview the look the application, you can click on the Preview Button at the top of the designer.
If all was done correctly, this is what the preview should look like :
In this last part of creating our App page, we will add a pie chart to display a comparison between the completed and outstanding tasks, and for this, we will make use of the List Control.
To start, we add a List Context Control, and then proceed to add a List Control inside. For this tutorial, we will not be diving too deep into setting up the List Context Control, but it is good practice to include one.
Let's start configuring out List Control. Like Action Control we want to retrieve our data from the Completed Tasks query. In the List Control Properties window, under Data Source :
After setting up our Data Source, we can now start customising our chart by clicking on Chart Options under the List Control in the designer.
For the X-AXIS we want theisCompletedfield. We set the Title to Completed. And be sure to set the Display Type to Pie.
In the Chart Options :
Click on Apply and our Pie chart is all set up!
After adding some data, this is what our App Page should look like
We can now move on to learn how to create an Object Page
