[Beta] Page Slugs

Readable URLs for your data entries!

Overview

The "Slug" is a new built-in field that you assign to any Thing (entry) in your database to act as its URL.

Up until Slugs, URLs in Bubble apps would always point to that things unique ID.

For example this is what URLs in Bubble looked like:

The above image shows the URL for the product called "Scone" but to retrieve that product you'd have to append its unique id which is useful for certain things but not readability.

Now, "Scones" becomes this:

With Slugs, anything can have its own custom URL making them shorter, more searchable and more memorable. Much better!

Navigate to the data tab. You'll see the "Slug" built-in field attached to the user!

This is great for something like a user profile, as you can now point directly to that users name so their profile can be shared.

Let's walk through another example and show how you can set-up slugs for your own application.

Step 1. Create a Data Type

If we made a Product data type for a marketplace app, we would want to send customers directly to a product page. With that Product data type we then need to add entries either manually or with a user facing form.

Step 2. Set the Thing's Slug

When you have entries in your database to work with, you can set their slug in two ways.

2.a. Manually Set Slug When Creating an Entry

Whenever you create a new entry, you can set the slug directly but keep in mind:

Slugs can only include lowercase letters, numbers or hyphens.

Be careful! If you enter the slug manually with a character that is not mentioned above, you will get an error. As well as if your Slug is over 250 characters it will exceed its maximum length.

2.b. Dynamically Set The Slug With Workflows

Underneath the Data actions, you will find "Set a thing's slug" which will let you dynamically set the slug to whatever you like for any given thing.

You cannot change the slug value through "Make changes to thing" and while it may be similar in concept, you set it in different action called "Set a thing's slug".

With this action, you can dynamically set the slug for any given Thing. In the above image we would be setting the slug for a Product found inside a repeating group.

Step 3. Navigate to that entry

Once you have a slug set, you'll want to navigate to that entries page like you would normally. In the case of our repeating group, you would send over that Current Cell's Product:

The incoming Product page (accepting the Current Cell's Product) would then receive it with the new slug.

Slug Order

With Slugs paving the way as the standard for your page structure, there is a hierarchy to which Bubble will now set your URL.

  1. Page Slugs

  2. Backup Fields for URL (Formerly Fields Readable as URL)

  3. Unique ID

If a slug is set, that is what Bubble will use. If a slug is not set, Bubble will look to see if your page has any Backup fields (formerly known as Fields Readable for URLs). If your page has no backup fields, then it will default to its unique id.

Slug Duplication

You cannot have two slugs with the same name if they share the same data type.

If you try, it will append slug-1, slug-2, slug-3 so on and so forth as seen in the gif above .

However, you can have slugs share the same name if they are of different data types

Slug Conditionals

With Slugs we also have access to two conditionals that you can use in your elements and workflows for finer control.

Can Have The Slug Value - This operation tests if the argument is a valid slug value for the Thing. A valid slug value is both unique and correctly formatted with only lowercase letters, digits, and hyphens.

Cannot Have The Slug Value - This operation tests if the argument is an invalid slug value for the Thing. An invalid slug value is anything that isn’t made up of only lowercase letters, digits, and hyphens or that is not unique.

These conditionals are perfect for when you need to compare the Slugs to something already existing, for example, with User Profiles, you can use these to check if a user name is or isn't already taken.

Slugs and Privacy Rules

If you are setting the slug for a data type that has a defined privacy rule, confirm that you have checked the "slug" field under the default permissions for "View all fields."

This will let everyone see the slug value that you have set in the page's URL. If this isn't checked and the user does not meet the condition for a privacy rule that allows viewing the Slug field, they will see the unique ID in the URL instead.

Other Rules When Using Slugs

  1. Reminder: Special characters will not save to your slug field and will show up as blank. (Anything that isn't a lowercase letter, hyphen or number).

  2. Slugs can update in real-time, meaning if you update the slug on a page that uses the slug, the URL will automatically change!

  3. The maximum slug length is 250 characters

  4. Slugs support all languages. If you notice any language that isn't supported or being incorrectly processed, please contact [email protected]