Access and Manipulate the URL#

This guide addresses how to access and manipulate the URL.

Access#

When starting a server session Panel will attach a Location component which can be accessed using pn.state.location. The Location component serves a number of functions:

  • Navigation between pages via pathname

  • Sharing (parts of) the page state in the url as search parameters for bookmarking and sharing.

  • Navigating to subsections of the page via the hash_ parameter.

Core#

  • pathname (string): pathname part of the url, e.g. ‘/how_to/layout/spacing.html’.

  • search (string): search part of the url e.g. ‘?color=blue’.

  • hash_ (string): hash part of the url e.g. ‘#margin-parameter’.

  • reload (bool): Whether or not to reload the page when the url is updated.

    • For independent apps this should be set to True.

    • For integrated or single page apps this should be set to False.

Readonly#

  • href (string): The full url, e.g. ‘https://panel.holoviz.org:443/how_to/layout/spacing.html?color=blue#margin-parameter’.

  • protocol (string): protocol part of the url, e.g. ‘http:’ or ‘https:’

  • port (string): port number, e.g. ‘80’

Manipulate#

By default the current query parameters in the URL (specified as a URL suffix such as ?color=blue) are made available on pn.state.location.query_params. To make working with query parameters straightforward the Location object also provides a sync method which allows syncing query parameters with the parameters on a Parameterized object.

We will start by defining a Parameterized class:

import param
import panel as pn

class QueryExample(param.Parameterized):

    integer = param.Integer(default=None, bounds=(0, 10))

    string = param.String(default='A string')

Now we will use the pn.state.location object to sync it with the URL query string (note that in a notebook environment pn.state.location is not initialized until the first plot has been displayed). The sync method takes the Parameterized object or instance to sync with as the first argument and a list or dictionary of the parameters as the second argument. If a dictionary is provided it should map from the Parameterized object’s parameters to the query parameter name in the URL:

pn.state.location.sync(QueryExample, {'integer': 'int', 'string': 'str'})

Now the Parameterized object is bi-directionally linked to the URL query parameter, if we set a query parameter in Python it will update the URL bar and when we specify a URL with a query parameter that will be set on the Parameterized, e.g. let us set the ‘integer’ parameter and watch the URL in your browser update:

QueryExample.integer = 5

Note to unsync the Parameterized object you can simply call pn.state.location.unsync(QueryExample).