Center of Excellence / UI Builder / Custom 404 Pages

This guide will walk you through the steps to set a custom 404 page in your UI Builder experience.

I have a portal experience for a recipe app I built you can see below.

(If you're curious about how this was built, check out the CreatorCon lab CCL1072 - Building a Killer Experience with UI Builder)

This is nice, but if I try to navigate to a page that doesn't exist I get the default 404 page, which isn't really suitable for my experience.

I have created a new page I want to use as a 404 page and named it custom-404.

So how do I show my beautiful new 404 page instead of the default page with the banner at the top?

Setting a Custom 404 Page Steps

1. With my Recipe DB experience open in UI Builder, I'll go to Menu > Edit experience settings.
2. In the Settings panel that comes up, I'm going to click Advanced settings.
3. This opens up the UX Page Registry [sys_ux_page_registry] record for my experience, and I'll now add a custom404 property to the Auth Routes JSON with the name of my page custom-404 as the value.
   

Now if I go back and test with the bad url I used I'll get the new custom 404 page.

Have another topic you'd like to see in our UI Builder resource hub? Let us know in the comments!