How to make Header Logo clickable in UI Builder Service Portal?

Akshay Gupta2
Kilo Sage

I am implementing a service portal using UI Builder. I was able to create a header using a "chrome_header" property.

And I was also able to add a Logo in Header, But I need to make this header logo clickable. i.e., When portal user clicks the header logo he should be navigated to the landing page of portal.

 

I have tried many things, but not able to get this behavior, Header logo is acting as a static image, not clickable when I hover over It. 

 

For most of the dev, I took help from this article. "https://www.servicenow.com/community/next-experience-articles/workspace-app-shell-ux-page-properties..."

 

I have looked all the places to find if by any means this can be implemented, but not been able to find the property.

 

Really appreciate if someone can help.

1 ACCEPTED SOLUTION

Mike_R
Kilo Patron
Kilo Patron

The best instructions I found were here:

https://myblogs.in/all/now/ui_builder/part-5-add-header-and-logo/

 

 

Basically create a new theme, then in your ux theme asset add and attach the logo

Mike_R_0-1670951079152.png

 

Mike_R_1-1670951088663.png

 

 

 

And as a result, the logo is clickable and will take you to the home page

Mike_R_2-1670951130918.png

 

 

 

View solution in original post

4 REPLIES 4

Mike_R
Kilo Patron
Kilo Patron

The best instructions I found were here:

https://myblogs.in/all/now/ui_builder/part-5-add-header-and-logo/

 

 

Basically create a new theme, then in your ux theme asset add and attach the logo

Mike_R_0-1670951079152.png

 

Mike_R_1-1670951088663.png

 

 

 

And as a result, the logo is clickable and will take you to the home page

Mike_R_2-1670951130918.png

 

 

 

But also, I also want to share this article to highlight when to use UI builder vs Service Portal

https://www.servicenow.com/community/next-experience-articles/ui-builder-and-service-portal/ta-p/237...

 

Thanks, Mike for the quick feedback. It was really helpful. 

 

I found the issue this was actually with one property. "publicPage.logoRoute". using this propery in UX Page Property - "chrome_header". I can give the path when user clicks on logo.

"logoRoute": {
    "type":"route",   //sn-nav-item's type property
    "value": {
        "route": "home", // sn-nav-item's item-value property
        "fields": {}
    }
}

I was actually placing this property in private object section placing this property in public section worked for me in "chrome_header".

 

 

Thanks for your reply

nelson_08
Tera Contributor

Hello @Mike_R ,

 

I followed the same blog which you shared. But My logo is not coming up. Any suggestions.

 

UX App Configuration

 

nelson_08_0-1735990586056.png

 

UX Theme

 

nelson_08_1-1735990666352.png

 

UX Theme Asset

nelson_08_2-1735990698359.png

 

nelson_08_3-1735990707054.png

 

My Portal

nelson_08_4-1735990749144.png