What Is A Dynamic Page?

When building apps, you often find the need to build a page that loads different data each time you navigate to it — the page data will change depending on the ID in the URL.

For example, a User Profile page where the details match the specific user:

To achieve this, the page needs to know which user we are requesting data for.

In Frontly, this is accomplished by using a Dynamic ID in the page URL, like this:

https://yourapp.com/user/b8a82ff2dd6d

Let's break this down:

  1. App Base URL = https://yourapp.com

  2. Page URL = /user

  3. Dynamic ID = /b8a82ff2dd6d

The Dynamic ID in this case is simply a unique identifier for this specific user ('Hank'). A different user would have a different ID.

Using Dynamic variables means you can create one page that changes data depending on the ID in the URL.


Setting Up Your Dynamic Page

You can make your page dynamic in a few simple steps:

1. Turn On Dynamic ID In URL Setting

On the General tab, turn on the Dynamic ID In URL setting. This tells the page to expect a Dynamic ID in the URL.

2. Enter A Sample Dynamic ID

Directly below the Dynamic ID toggle, you'll see a Sample Dynamic ID input field. You'll need to enter a real ID from your spreadsheet or API that Frontly can use during setup mode.

Frontly Dynamic ID URL

Why do we need a Sample ID? To set up your page properly, Frontly needs to see which fields your spreadsheet or API has by making a request to a single row. We will use that sample row as placeholder data when you are in the Page Builder building your app.

3. Using The 'Dynamic URL ID' Data Source

If Dynamic ID In URL is ON, you'll start seeing the 'Dynamic URL ID' show up in the list of data sources across the app whenever you're using dynamic input fields:

Once you click on Dynamic URL ID, you just need to click 'Save'.

Frontly will take this Dynamic ID from the URL and inject it in the spot you choose.

To return a single row of a Google Sheet, you would use the Dynamic URL ID in the 'Row ID' field.

4. Navigating To A Dynamic Page URL

First, you'll want to set up a 'Navigate To Page' action.

Select your page from the 'Page' dropdown, and then click in the Dynamic ID field to see the Insert Data popup showing your available data sources:

For example, if you're using a Table Row Click Action or Row Action, you can select Table Row and then select the correct ID from the list of fields. If you're using Google Sheets, the frontly_id field is the one you want.

If you're using a custom API, the field will be some ID in your database.

Hit 'save', and see how your page dynamically loads data with this ID!

Questions? Contact us through the help bubble in the corner of the screen or email [email protected]

Did this answer your question?