How to config Breadcrumbs App Shell breadcrumbs in new experience?

Jefferson
Kilo Sage

Hi community,

 

I've created a new experience using Ui Builder and used the Breadcrumb App Shell, however the breadcrumb component that comes with the App shell doesn't seem to be working, or I might be missing something. Note: As the breadcrumb component is inside the App shell wrapper I don't have access to it, so I don't know how to configure.

I have tried reverse engineering from other OOTB workspaces, such as Risk Workspace or Audit Workspace, but couldn't find anything and the official documentation is also not great. Here is doc > Now Component Library | ServiceNow Developers

 

Essentially the issue is when I open a record, the first breadcrumb is created, however when I open a sub record, instead of adding a new breadcrumb, it resets, and the sub record is now the first breadcrumb.

See below screenshot of my new experience and one from Risk Workspace with the expected behaviour.

Jefferson_0-1733801991358.png

Jefferson_1-1733802083693.png


Any ideas on how to make it work for a newly created experience using this App shell?

Cheers,

Jefferson



1 ACCEPTED SOLUTION

Jefferson
Kilo Sage

For anyone looking for a solution to this...

 

I've contacted ServiceNow and they confirmed that OOTB the Breadcrumb App Shell only supports two levels (I don't get why only two, but anyway).
If you want to configure to work with more levels, you need to create an extension point of the Breadcrumb App Shell Items Provider.

1. Go to Scripted Extension Points (sys_extension_point)

2. Search for "sn_app_shell_aw.AppShellBreadcrumbItemsProvider" in API Name.

3. Create a new implementation using the Related Links (Create Implementation). I also recommend having a look at other implementations to better understand how you can extend this script or just copy the code from other extensions.

4. Give a name to your script.

5. Make sure you read the comments in the script and update the required functions such as getAppId and getHandledRoutes.

6. The provideItems function is the function that returns the payload to the App Shell breadcrumb, so check existing extensions for guidance or just copy whatever they have and modify it as you need.

This should make the breadcrumb work with more levels.

Cheers

View solution in original post

3 REPLIES 3

Dibyaratnam
Tera Sage

Usually this doesn't happen as you have used the same App shell which is OOB. you can check once how you are redirecting from the list to the record page it depends mainly on the route that's being followed on click of the respective button or field decorator.

I'm using everything OOB. If you would like to replicate, here are the steps:
1. In Ui builder create a new experience using Breadcrumbs App Shell

2. Create a page using the List page template. The page and default variant can have any name. Set this page as landing page in the experience settings.

3. Create another page using the Record page template. This page must be named as "record".

4. Go to sys_ux_list_menu_config table and pick any List configuration sys_id.

5. Create a listConfigId property for the experience and add the sys_id of the list config. Experience properties table is sys_ux_page_property.

6. Execute your experience and try to open records from the list and them try open a sub record.

e.g.: If you've chosen a list which shows incidents, open an incident record then open the assigned to user record. The breadcrumb should be List > Incident record > User record. However, this doesn't happen.

 

That is why I feel I'm missing something, but I don't know what I'm missing.

 

Cheers.

 

 

Jefferson
Kilo Sage

For anyone looking for a solution to this...

 

I've contacted ServiceNow and they confirmed that OOTB the Breadcrumb App Shell only supports two levels (I don't get why only two, but anyway).
If you want to configure to work with more levels, you need to create an extension point of the Breadcrumb App Shell Items Provider.

1. Go to Scripted Extension Points (sys_extension_point)

2. Search for "sn_app_shell_aw.AppShellBreadcrumbItemsProvider" in API Name.

3. Create a new implementation using the Related Links (Create Implementation). I also recommend having a look at other implementations to better understand how you can extend this script or just copy the code from other extensions.

4. Give a name to your script.

5. Make sure you read the comments in the script and update the required functions such as getAppId and getHandledRoutes.

6. The provideItems function is the function that returns the payload to the App Shell breadcrumb, so check existing extensions for guidance or just copy whatever they have and modify it as you need.

This should make the breadcrumb work with more levels.

Cheers