Dynamic pages

We say that a page is dynamic when some or all of its content is provided by an API. The opposite is a static page, where the content is added directly in toddle, and does not change without you publishing a new version.

For example the toddle landing page, https://toddle.dev, is a static page. Each section is built in toddle and the page is not fetching any content from an API.

Our blog is also built in toddle, but it fetches content from https://contentful.com . It then renders the page based on the content that was returned. This is a dynamic page and the same page in toddle is used to render all blog posts.

Path and query parameters

In order for our blog post page to know which article to fetch and render we need to provide it with a unique "slug" as part of its URL.

https://toddle.dev/blog/ What-Happens-When-an-Address-Goes-Into-a-Browser

In this case the last path segment of the URL tells the page what article to render. This is done by setting the last path segment in the URL panel to be a parameter .

When setting a path segment to a parameter that part of the URL will match any string when toddle is deciding what page to render.

• /blog/ What-Happens-When-an-Address-Goes-Into-a-Browser
• /blog/ unleash-the-power-of-edge-computing-for-no-code-developers
• /blog/ why-we-built-toddle

The value of the path parameter is now available inside the formula editor anywhere inside the page.

You can set a test value for your path parameter. This is the value that the parameter will have when you are editing your page inside the toddle editor. It does not affect your application in preview mode or when it is live.

toddle will always prioritize static pages over dynamic ones if there are multiple pages that match the current URL. This means that a page with the path /blog/new where new is not set to be a parameter will be rendered instead of our blog post page assuming that the current url matches /blog/new.

Query parameters

In addition to specifying path segments as parameters you can also add query parameters. This allows you to specify any additional information you would like to be able to add to the URL of your page.

In the case of our blog post page, we use a query parameter to dictate if we want to see the preview version of the page, which allows us to browse an article while we are writing it in Contentful.

Updating parameters

After you have created a path or query parameter in your page you will see some new actions in your workflow editor.

These allows you to update the value of a URL parameter , which is the common name for both path and query parameters. The main benefit of using this action, rather than just linking to the URL with the values you want is that it does not trigger a full reload of the page you are on. It is also often simpler, since you only have to specify the value for parameter you are trying to change.

When to use Path over query

Initially path an query parameters might seem to be doing the same thing, and mostly that is the case. There are however differences. The changing the path, e.g. though updating the parameter is considered a navigation, and will add an entry in the browsers history. This means clicking the browsers back button will take you to the same page, but with the previous value in the path.

Changing a query parameter is not considered a navigation, so clicking back will not revert the value, but navigate to the previous page.

When to use URL parameters over variables

URL parameters are essentially a way for your page to store data. You can both read and write data to a URL parameter using formulas and actions. In that sense URL parameters are like variables. So when should you use URL parameters and when should you reach for a variable?

Use URL parameters when you want the data to be part of the URL. With URL parameters you maintain the current value when the user reloads the page, and when they share the link with others.
Examples of things that should be stored in a URL could be:

• Which tab is active inside a tab pane
• Which item in a list is selected?
• Should a "Create / Edit" modal be shown?

Examples of data that should probably be stored in variables:

• The value of an input field
• Should a "Confirm Delete" modal be shown?

learn more about dynamic pages: