Framework apps can have multiple pages, with parametrised routes. Pages can be switched from the front-end or the back-end.
To enable navigation between Page components, they must have a key assigned. This can be set up from the component’s settings. Once a key is set up, the page will be accessible at /#my_page_key
.
For basic page changes, assign a “Go to page” action to an event handler. For example, if you want to change to page my_page_key
when a Button is clicked, go to the button’s settings and under the click
event select Go to page "my_page_key"
.
Trigger a page change from the back-end using the set_page
method of state.
You may want to share a URL that links directly to a specific resource within your app. For example, to a specific location or product.
You can do so by specifying parameters in the URL, known as route vars. Framework URLs contain the page key, followed by the route vars and their values. For example, /#detailPage/product_id=32&country=AR
.
You can set up variables that are displayed in the URL by passing a dictionary to the set_route_vars
state method. Use None
to clear specific keys.
Framework uses the hash portion of the URL to store page and variable data, so even when switching pages or changing variables, the page doesn’t reload. To monitor changes to the active URL, set up an event handler for wf-hashchange
in the Root component.