Skip to content

Dynamic page content

Partials can be used within multiple objects in Taipy: part, dialog and pane. They can be used as a static resusable component like so.

from taipy.gui import Gui

# Define the main page layout
page = """
<|part|partial={partial}|>
"""

# Create and run the Taipy GUI
gui = Gui(page)
partial = gui.add_partial("Your first partial")
gui.run()
from taipy.gui import Gui

# Define the main page layout
with tgb.Page() as page:
    tgb.part(partial="{partial}")

# Create and run the Taipy GUI
gui = Gui(page)
partial = gui.add_partial("Your first partial")
gui.run()

Realtime update of partials

Taipy's partials feature allows you to create reusable and dynamically updatable components in your GUI applications. This is particularly useful for creating consistent layouts and updating content on the fly.

You are able to update your partial by using the update_content() method.

state.partial.update_content(state, new_content)

The update_content() method expects two arguments: the state object and the new content of the partial.

from taipy.gui import Gui

def change_partial(state):
    state.partial.update_content(state, "Partial is changed!")

# Define the main page layout
page = """
<|part|partial={partial}|>
<|Change partial|button|on_action=change_partial|>
"""

# Create and run the Taipy GUI
gui = Gui(page)
partial = gui.add_partial("Your first partial")
gui.run()
from taipy.gui import Gui

def change_partial(state):
    state.partial.update_content(state, "Partial is changed!")

# Define the main page layout
with tgb.Page() as page:
    tgb.button('Change partial', on_action=change_partial)
    tgb.part(partial="{partial}")

# Create and run the Taipy GUI
gui = Gui(page)
partial = gui.add_partial("Your first partial")
gui.run()

Note that this example could have been done without using partials and just by creating a text visual element.

Example of real case

You might want to create a list of links that can be dynamically updated:

Partials Example

Here is the code for the main script:

from taipy.gui import Gui


# Function to refresh the links partial
def refresh_links(state):
    partial_md = "<|layout|columns=1 1 1|\n"
    for link in state.links:
        link_name, link_url = link
        partial_md += "<|card|\n"
        partial_md += f"## {link_name}\n"
        partial_md += "Quick description here if you like\n\n"
        partial_md += f"[Click here to go to {link_name}](src/{link_url})\n"
        partial_md += "|>\n"
    partial_md += "|>\n"
    state.link_partial.update_content(state, partial_md)


# Function to simulate adding more links
def simulate_adding_more_links(state):
    state.links = [
        ("Taipy", "http://taipy.io"),
        ("Taipy Doc", "http://docs.taipy.io"),
        ("Wikipedia", "http://wikipedia.org"),
        (
            "Article",
            "https://betterprogramming.pub/discovering-taipy-and-taipy-gui-e1b664765017",
        ),
    ]
    refresh_links(state)


# Initialize the application state
def on_init(state):
    refresh_links(state)


if __name__ == "__main__":
    # Initial links
    links = [("Taipy", "http://taipy.io")]

    # Define the main page layout
    main_page = """
<|Add links|button|on_action=simulate_adding_more_links|>
<|part|partial={link_partial}|>
    """

    # Create and run the Taipy GUI
    gui = Gui(main_page)
    link_partial = gui.add_partial("")
    gui.run()
import taipy.gui.builder as tgb
from taipy.gui import Gui


# Function to refresh the links partial
def refresh_links(state):
    with tgb.Page() as link_part:
        with tgb.layout("1 1 1"):
            for link in state.links:
                link_name, link_url = link
                with tgb.part("card"):
                    tgb.text(link_name, class_name="h2")
                    tgb.text("Quick description here if you like")
                    tgb.html("a", f"Click here to go to {link_name}", href=link_url)
                    # You could use any visual element you like
    state.link_partial.update_content(state, link_part)


# Function to simulate adding more links
def simulate_adding_more_links(state):
    state.links = [
        ("Taipy", "http://taipy.io"),
        ("Taipy Doc", "http://docs.taipy.io"),
        ("Wikipedia", "http://wikipedia.org"),
        (
            "Article",
            "https://betterprogramming.pub/discovering-taipy-and-taipy-gui-e1b664765017",
        ),
    ]
    refresh_links(state)


# Initialize the application state
def on_init(state):
    refresh_links(state)


if __name__ == "__main__":
    # Initial links
    links = [("Taipy", "http://taipy.io")]

    # Define the main page layout
    with tgb.Page() as main_page:
        tgb.button("Add links", on_action=simulate_adding_more_links)
        tgb.part(partial="{link_partial}")

    # Create and run the Taipy GUI
    gui = Gui(main_page)
    link_partial = gui.add_partial("")
    gui.run()

This script creates a button that, when clicked, updates the list of links displayed on the page. The links component is encapsulated within a partial, making it reusable and dynamically updatable.

Code explanation

Here's a step-by-step explanation of how partials are used in the provided example:

Declaring the partial

At the end of the script, we declare the partial with the GUI. This is where we initialize the partial with some initial value or content.

gui = Gui(main_page)
link_partial = gui.add_partial("")
gui.run()

Here, link_partial is declared with an empty string. This partial will be dynamically updated later.

Using the partial in the layout

The partial needs to be placed within the layout where it will be displayed. You can include it in one or multiple places within your layout.

main_page = """
<|Add links|button|on_action=simulate_adding_more_links|>
<|part|partial={link_partial}|>
"""
with tgb.Page() as main_page:
    tgb.button('Add links', on_action=simulate_adding_more_links)
    tgb.part(partial="{link_partial}")

In this code, tgb.part(partial="{link_partial}") is where the partial will be shown. You can place this partial in multiple locations within your layout if needed.

Updating the partial content

To dynamically update the partial, you use the update_content method. This can be done using either the Markdown syntax or the Python API by providing a page to this method.

def refresh_links(state):
    partial_md = "<|layout|columns=1 1 1|\n"
    for link in state.links:
        link_name, link_url = link
        partial_md += "<|card|\n"
        partial_md += f"## {link_name}\n"
        partial_md += "Quick description here if you like\n\n"
        partial_md += f"[Click here to go to {link_name}]({link_url})\n"
        partial_md += "|>\n"
    partial_md += "|>\n"
    state.link_partial.update_content(state, partial_md)
def refresh_links(state):
    with tgb.Page() as link_part:
        with tgb.layout("1 1 1"):
            for link in state.links:
                link_name, link_url = link
                with tgb.part("card"):
                    tgb.text(link_name, class_name="h2")
                    tgb.text("Quick description here if you like")
                    tgb.html("a", f"Click here to go to {link_name}", href=link_url)
                    # You could use any visual element you like
    state.link_partial.update_content(state, link_part)

We create a new link_part page using the Taipy builder API in this function. We then use state.link_partial.update_content(state, link_part) to update the partial content. Here, link_part is a dynamically generated page that contains the new list of links.

Points to remember

1 - Declare the Partial: A partial must be declared with an initial value or content.

link_partial = gui.add_partial("") declares a partial with an initial empty content.

2 - Partial in the Layout: Place the partial in the layout where you want it to be displayed.

tgb.part(partial="{link_partial}") specifies where the partial will be displayed in the layout.

3 - Update the Partial Content: Update the partial content dynamically using update_content.

The refresh_links function generates new content using the builder API. state.link_partial.update_content(state, link_part) updates the partial with the new content.