How to customize a detail page route to make it user friendly

Introduction

By default, the detail page route displays the data's ID. However, it is possible to create a more user-friendly URL like https://dazzm-training-gs.octopus-esm.com/profile/Gabrielle-Strauss instead of the default https://dazzm-training-gs.octopus-esm.com/user/2dd26bd3-eb86-46ad-a1c6-d4830271a430.

Additionally, we will guide you through implementing a custom URL for the current user's detail page.

Step-by-step instructions

1. Creating a Computed Field for a User-Friendly URL

As the first step, create a Computed field. It will later be used in the page’s route.

For our example, it should be added under the User Aggregate. We used "userRoot" as the field name and selected "text" as the field type. Then, we used the same Code for this field as for the computed field "name," but instead of using a space between the user's first and last name, we used a hyphen.

Note: As this will later be used in a URL, it’s important to avoid having any space

return (this.firstName ? this.firstName : '') + '-' + (this.lastName ? this.lastName : '');

2. Configuring the Detail Page Route with a Custom URL

From the Pages folder of the explorer panel, select the detail page in need of a custom URL. For our example, we selected the page “user/:id”.

Open its properties and change its route to:

Note: If you wanted to personalize the URL further, you could change the first part as well: /profile/:userRoot

3. Setting Up Navigation for the User List Page

To associate the user list page with the new detail page route, select the list component and go to its Attribute tab. Turn on the Prevent Navigation feature.

Then, select the “name” field of the list and add a Navigate to Another Page behaviour. Select the event onClick and use JS:

return `/profile/${data.userRoot}`

4.Fixing the Data Issue on the User Detail Page

Then, go to the user detail page. To fix the data issue, change the default Set Component Data by replacing JS by Search -> User. Then, add a limit of 1 record and “use single record”. Next, add a criteria:

Name: userRoot

Operator: Equal

Value: params.userRoot

5. Creating a Custom Route for the Current User’s Profile Page

You could also duplicate the user detail page, to create a unique one for the current user’s profile. Simply change the Route to: “/my-profile”

Then, while selected on the “name” field of the user list page, change the JS of the Navigate to Another Page to:

return currentUser.id === data.id ? '/my-profile' : `/profile/${data.userRoot}`

Conclusion

By following these steps, you have successfully created custom, user-friendly URLs for the user profile pages. This improves the usability and aesthetics of your application by replacing ID-based routes with more readable ones that include user names. Additionally, you’ve learned how to implement a custom route for the current user’s profile, enhancing navigation and personalization. As a next step, consider adding further dynamic URL configurations or customizing additional sections of your platform for an even more intuitive user experience.