How will configure the multi step breadcrumb in UI builder for Portal App Shell.

[Abinash Prasad]

We are able to add the custom breadcrumb using the UI builder. But when i clicked on "Rivian" highlighted in the image it move to the home page.

[Rajesh Chopade1]

Hi @Abinash Prasad  

When using the UI Builder in ServiceNow to create custom breadcrumbs, it is important to configure each breadcrumb link correctly to ensure they navigate to the intended pages. If clicking on an intermediate breadcrumb takes you to the home page, it is likely due to an issue with the configuration of the breadcrumb links.

Assume you have a breadcrumb path like this:

Home > Module > Sub-module > Current Page

Home:

• URL: /now/nav/ui/home
• Label: "Home"

Module:

• URL: /now/nav/ui/module
• Label: "Module"

Sub-module:

• URL: /now/nav/ui/sub-module
• Label: "Sub-module"

Current Page:

• URL: (current page URL)
• Label: "Current Page"

Following are the steps to configure your UI Builder

Add Breadcrumb Component:

• Drag and drop the breadcrumb component onto your page layout.

Add Breadcrumb Items:

• For each breadcrumb item, add an entry with the label and URL.
• Example:
• Home: /now/nav/ui/home
• Module: /now/nav/ui/module
• Sub-module: /now/nav/ui/sub-module
• Current Page: (current page URL)

Verify Breadcrumb Configuration:

• Ensure that each breadcrumb link has the correct URL.
• Double-check for any typos or incorrect paths that might redirect to the home page.

i hope my answer helps you to resolve your issue if yes, mark my answer helpful & correct.

THANK YOU

rajesh chopade

[Abinash Prasad]

Hi Rajesh,

Thanks for response, but in my case we need to dynamic move to back page on breadcrumb click. So we have written client script for redirection on back page and mapped to the event mapping "Breadcrumbs item clicked" .

when i clicked it always go to home page. can you suggest how to implement for multiple page.

Below are the code of client script

/**

 * @Param {params} params

 * @Param {api} params.api

 * @Param {any} params.event

 * @Param {any} params.imports

 */

function handler({api, event, helpers, imports}) { 

    const route = "landing";

    api.emit('NAV_ITEM_SELECTED', {

        route

    });

}

[Rajesh Chopade1]

Hi @Abinash Prasad  

I hope you selected table = 'Global' and type = 'onLoad' in your client script, replace the following script with your code:

(function() {
    // Function to initialize navigation history if not already initialized
    function initializeNavigationHistory() {
        if (!sessionStorage.getItem('navHistory')) {
            sessionStorage.setItem('navHistory', JSON.stringify([]));
        }
    }

    function updateNavigationHistory(url) {
        initializeNavigationHistory();
        var navHistory = JSON.parse(sessionStorage.getItem('navHistory'));
        navHistory.push(url);
        sessionStorage.setItem('navHistory', JSON.stringify(navHistory));
    }

    function getPreviousURL() {
        initializeNavigationHistory();
        var navHistory = JSON.parse(sessionStorage.getItem('navHistory'));
        navHistory.pop(); // Remove current page URL
        return navHistory.pop(); // Get the previous page URL
    }

    addLoadEvent(function() {
        updateNavigationHistory(window.location.href);
    });

    document.addEventListener('click', function(event) {
        if (event.target.matches('.breadcrumb-item')) {
            var prevURL = getPreviousURL();
            if (prevURL) {
                window.location.href = prevURL;
                event.preventDefault();
            } else {
                // If no previous URL, default to home page
                window.location.href = '/home.do';
                event.preventDefault();
            }
        }
    });

    // Helper function to add load event
    function addLoadEvent(func) {
        var oldOnload = window.onload;
        if (typeof window.onload !== 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldOnload) {
                    oldOnload();
                }
                func();
            };
        }
    }
})();

Next step is map the Script to Breadcrumb Click Event:

• Navigate to System UI > Event Mappings.
• Create or modify an event mapping for the "Breadcrumbs item clicked" event to ensure it triggers the client script.

I hope my answer resolve your issue if yes, mark my answer correct and helpful.

THANK YOU

rajesh chopade