Mission 9 - Multi Page Apps

Estimated time for completing this mission: 15 mins

Learning Objective

Learn to use multiple pages for your app using the header menu.

Background Information

In order to build complex apps it can be useful to create multiple pages.

BLOX used in this mission:

Logic BLOX

MyData/FinalData

Basics/Start

Database/Table

Database/GroupBy

Charts/Line Chart

App BLOX

Table

Chart

Panel

Label

Button (2x)

Goal

Chart Logic View

Data

We will use FinalData from the earlier missions. If you would like to download the data set, click here: FinalData.xlsx.

Steps

Please refer to Navigation Guide to perform the steps below

App Designer:

Switch pages

Create a new app called Multi Page in the Module4 folder
Create two pages via the left side bar

Place two buttons into the header area on top of the canvas
Enter the header logic on top of the logic section on the left side bar
Connect each button with its desired page. You can do this by double-clicking on each button and then select Go to Page for the "Action On Click" field and then chose the target page from the "Go to page" field

Add a logic for each page as shown in the previous missions
One should output a line chart of the sales and the other should output a table
As a challenge, you have to create a table containing "STATUS", "ORDERDATE" and "SALES" from the final dataset

Hint

Take a look at the screenshot above to implement the table logic. Select the three columns as outputs, connect them to a "Table" BLOX and then connect the result to a "Page/Table" component.

Then, implement the other logic according to the image above (one with the line chart)
In the "Group By" BLOX, specify ORDERDATE and sum as parameters
Next, in the "Line Charts" BLOX, specify X as "ORDERDATE", Y as "SALES" and set the first two options to yes
Finally, run the app and test the navigation buttons to switch pages

Results and Summary

Resulting App

Well done! Now let's move on to the next mission!