Safe URLs using UUIDs

Don't want to show the ID's of your data to the public? In this article we'll show you how to use UUID's instead.

Updated over a week ago

After reading this article you'll learn how to:

  • Install the UUID step from the block store

  • Configure the UUID step

  • Use the step in certain use cases

Starting off

Make sure to have installed the 'generate UUID' step from the block store. In the example that we'll use 1 model is present called 'employee'. In this model, there are 3 properties:

  • Name (text single line)

  • Email (email address)

  • Uuid (text single line)

'Employee' data model with selected properties

Two pages have already been created, and one page has a form to create a new employee. Note that it only has the name and email properties in the form, the UUID is generated when the action runs before the create step. It works the same way as the example used in the 'generate UUID' step article.

Create form component options

And the other page is an overview of all the employees, it's just a data table with the employee model selected. For this example, 5 employees were created to work with.

Data table with the employee model selected

Creating a detail page

With everything that is mentioned above created we can start working on the actual use case. The overview should display some employees, what we want to do is make each row clickable, and then get redirected to the detail view of the employee. But what's important for this use case is that we don't show the ID of the employee in the URL, we'll display the UUID of the employee.

A data table with 'Employee' data model

To be able to click on a row in the image above we need to add a row click, but before we do that let's create the page that we want to link towards.

Add a new page like so:

Creating a new page

As you can see in the page path we're using :uuid this resembles the UUID of the employee as an input variable. Create the page and drag a data container on the page and configure it like so:

Configuring a data container

Make sure to add a new text variable to the page named 'uuid'. We will use this variable in the data container filter.

Editing variables

Go back to the data container and press the 'update filter' button. Make sure to filter on an employee's UUID, and use the 'uuid' input variable we just created:

Filtering on the selected data model

To verify in the next steps if we see the details of the correct employee, drag a title and a few text components inside the data container and configure them so that we know that if we, for example, click on Bas we see his details. Make sure to compile the page by clicking the 'play' button in the top-left corner so we can test if this works in the next steps.

Data container with 'Employee' model

Making the rows clickable

When we go back to the overview page, we can select the data table and configure the 'row click' option to redirect to the employee detail page we just created:

Applying the row click

When we now press the 'play' button we can test if we can see an employee's details based on their UUID instead of their ID. And after clicking on Bas in the data table:

Employee's details based on their UUID

We see Bas' details using his UUID in the URL instead of his ID.

Did this answer your question?