How can I dynamically set the document title for a page with a variable path?

Dash Python
1

I have a Dash app with a dynamic path /flight/<hash> that dynamically generates a webpage that displays data from a data frame, using the hash in the URL as a lookup:

dash.register_page(__name__, path_template='/flight/<hash>')

def layout(hash=None, **kwargs):
    data = data.get_data(hash)
    return [
        # The layout is generated (based upon the data) and returned
    ]

Of course, I can set the title when I register the page with dash.register_page, however, I would like to update the document title of the page to a more specific and descriptive title generated from the data I get within my layout function above.

I see an example on the Dash documentation that uses a clientside callback to update the title dynamically, but I am not sure how this would work in my case given that updating the title would rely upon the data I’m fetching.

Any help is greatly appreciated!

2

Hi @magicmq and welcome to the Dash community :slightly_smiling_face:

This is a great question! There is a cool feature in Pages where you can set the title and the description to a function so they update dynamically. Here’s an example:


import dash

def title(asset_id=None, dept_id=None):
    return f"Asset Analysis: {asset_id} {dept_id}"


def description(asset_id=None, dept_id=None):
    return f"This is the AVN Industries Asset Analysis: {asset_id} in {dept_id}"


dash.register_page(
    __name__,
    path_template="/asset/<asset_id>/department/<dept_id>",
    title=title,
    description=description,
    path="/asset/inventory/department/branch-1001",
)


def layout(asset_id=None, dept_id=None, **other_unknown_query_strings):
    return dash.html.Div(
        f"variables from pathname:  asset_id: {asset_id} dept_id: {dept_id}"
    )

You can see this example in the multi_page_basics folder in GitHub repo below.
There is also another example in the multi_page_path_variables folder

3

Hi @AnnMarieW, I missed this feature in the documentation! Thank you so much for your help.

1 Like