Multi-page

Multi-page applications allow you to organize your data and visualizations into separate pages, making it easier to navigate and focus on specific insights. At Taipy, we understand how important clear and effective data visualization is, which is why we've created a multi-page feature that lets you build user-friendly dashboards that are easy to understand.

In the following, we propose a Taipy Designer version of this Taipy Multi-page tutorial.

Building a Multi-Page Application

While it's possible to create a multi-page Taipy application in a single script, it's often a good practice to organize your code into a folder structure like this:

app/
├─ main.py
├─ pages/
│ ├─ home.py
│ ├─ temperature.py

In this arrangement, every submodule in the pages folder (like home.py and temperature.py) holds the code for each page in our application. We're demonstrating with just two pages in this example, but you can add as many as you need.

Defining the Pages

To make it simple, we'll ensure that each page does not affect any other page. In other words, when you do something on one page, it won't affect the other pages. We'll discuss how pages interact with each other in the second part of this series.

Now, let's examine the code for each of our page modules:

home.py

from taipy.designer import Page

text = "Welcome to the Taipy Designer multi-page tutorial app. Follow this link to go to [Temperature Converter](/temperature) Page"

home_page = Page("home.xprjson")

temperature.py

from taipy.designer import Page

def fahrenheit_to_celsius(fahrenheit):
    return (fahrenheit - 32) * 5 / 9

fahrenheit = 100
celsius = fahrenheit_to_celsius(fahrenheit)

def on_change(state, var, val):
    if var == "fahrenheit":
        state.celsius = fahrenheit_to_celsius(val) 

temperature_page = Page("temperature.xprjson")

Designing the application

Up to this point, we've structured our multi-page Taipy application by keeping two one-page applications in a sub-folder named pages.

Now, the next step is to create and define our main module, main.py within the app/ folder. After that, we'll initialize our multi-page Gui object.

Here is the code:

main.py

from taipy.gui import Gui
from pages.home import home_page
from pages.temperature import temperature_page

pages = {
    "home": home_page,
    "temperature": temperature_page,
}
page_names = [page for page in pages.keys() if page != "/"]

Gui(pages=pages).run(design=True)

We started by importing two Taipy Designer Page objects, home_page and temperature_page from the two scripts we previously created. Then, we made a dictionary called pages:

1. Each key in the dictionary specifies the URL where you can access that page.
2. Each value in the dictionary is the Taipy Designer Page object for that page.

In the end, we provided this pages dictionary as an argument to the pages parameter of the Gui object. Then, we called its (Gui.)run() method, and that's how we got our first Taipy multi-page application working!

If you open your web browser and go to http://127.0.0.1:5000 (assuming you're using the default port), you'll see the following:

You're directed to the /home URL automatically because it was the first page listed in the pages dictionary, and that's where you'll find our first page!

Drag and drop a Markdown widget from Annotation & Video category, and bind it to the text variable. This should render the markdown text:

If you change the URL from /home to /temperature, you will see the following:

The navigate function

The navigate() function is self-explanatory in its purpose, it is used to navigate to other pages. For example, this is a code snippet of the navigate() function being used to navigate to the home page when a button control is clicked:

from taipy.gui import navigate

def go_home(state):
    navigate(state, "home")

Naturally, this function is only used within callbacks. To use navigate(), we simply pass along the state variable present in all callbacks, as well as the name of the page we wish to go to. In the example above, the user will be directed to the /home page.

The navigate() function provides a lot of flexibility to the developer to manage navigation in the application beyond what the navbar offers. For example, we can manage:

1. After executing some process, direct the user to either the "/success" or "/failure" page depending on the process status.

2. Direct the user back to the "/home" page when an exception occurs by using navigate() in the on_exception callback.

Consider our "temperature" page, you can extend your Python code by adding the go_home() function as follows:

home.py

from taipy.designer import Page

text = "Welcome to the Taipy Designer multi-page tutorial app. Follow this link to go to [Temperature Converter](/temperature) Page"

home_page = Page("home.xprjson")

temperature.py

from taipy.designer import Page

def fahrenheit_to_celsius(fahrenheit):
    return (fahrenheit - 32) * 5 / 9

fahrenheit = 100
celsius = fahrenheit_to_celsius(fahrenheit)

def on_change(state, var, val):
    if var == "fahrenheit":
        state.celsius = fahrenheit_to_celsius(val) 

temperature_page = Page("temperature.xprjson")

Always inside the edition mode of Taipy Designer, you can upgrade the dashboard by adding:

• a Label widget displaying a page title
• a Numeric input for the temperature in Fahrenheit, to bind to the fahrenheit variable
• a Value dispaly for the temperature in Celsius, to bind to the celsius variable
• a Trigger button, to bind to go_home() Python function

Running the Multi-Page Application

In main.py, set:

gui.run(design=False)

Run the python code, the home page is first displayed:

If you click the temperature link, you should navigate to the temperature page.

If you click to the Go to home page button, you should be back to the home page.

Limitations

Legacy Taipy navbar features are not currently supported with Taipy Designer, but will be available soon in a next release.

For more info

Taipy Designer multi-page system is an extension of Taipy legacy multi-page system. You can get more information on this topic in this page.