Workspace navigation sidebar doesn't appear

Luca Armienti1
Tera Expert

Hi,

Newbie question here, probably. I can't make the navigation sidebar appear, working on the UI Builder on a Workspace app shell. It should work with a simple configuration, reading here:

https://docs.servicenow.com/bundle/rome-application-development/page/administer/ui-builder/task/portal-navigation-menu-settings.html

And this is what i've done:

find_real_file.png

find_real_file.png


But the results are always like this, without left navigation sidebar: 

find_real_file.png

What could be? 

2 ACCEPTED SOLUTIONS

Simon Midtvedt
Tera Guru

Hi Luca,

I have struggled with the same thing lately, and I think I may have found a solution/work-around.

 

The problem for me was that the UX Page Property "chrome_toolbar" was not configured correctly (as Ashley sniffed out too). For whatever reason, the property was set to type "string" for me. Please see my below checklist for a possible solution.

 

Solution:

  1. In the navigation filter, go to Experiences and open your experience. 

  2. Under the related list "UX Page Properies", find the property called "chrome_toolbar". 

  3. Make sure that it is Type "json" and formatted like the following example:

    [
       {
          "id":"home",
          "label":{
             "message":"Home",
             "translatable":true
          },
          "icon":"home-outline",
          "viewportInfo":{
             
          },
          "routeInfo":{
             "route":"home"
          },
          "group":"top",
          "badge":{
             
          },
          "presence":{
             
          },
          "availability":{
             
          },
          "order":100
       },
       {
          "id":"list",
          "label":{
             "message":"List",
             "translatable":true
          },
          "icon":"list-outline",
          "viewportInfo":{
             
          },
          "routeInfo":{
             "route":"order-lists"
          },
          "group":"top",
          "badge":{
             
          },
          "presence":{
             
          },
          "availability":{
             
          },
          "order":200
       }
    ]​

     

I hope this can be of some help!

 

Regards,

Simon

View solution in original post

Hey Luca, After a bit of investigation, same as you I started afresh and it worked. I then went back to my old workspace and found it appears to be these empty records that are in your screenshot that were stopping it. Deleting them AND changing chrome_toolbar to type JSON worked.

View solution in original post

18 REPLIES 18

Ashley Snyder1
Giga Guru

I'm hoping someone else has a better answer, but I've never been able to get the Workspace sidebar when using the manual app shell method, only when spinning up a new Workspace via App Engine Studio.

What i've noticed is that my workspace have less "chrome" properties than SN OOTB workspaces AND workspaces created from the app engine studio:

UI builder workspace:


find_real_file.png

App engine workspace:

find_real_file.png

I don't know if it means something, but it seemed suspicious to me. 

Simon Midtvedt
Tera Guru

Hi Luca,

I have struggled with the same thing lately, and I think I may have found a solution/work-around.

 

The problem for me was that the UX Page Property "chrome_toolbar" was not configured correctly (as Ashley sniffed out too). For whatever reason, the property was set to type "string" for me. Please see my below checklist for a possible solution.

 

Solution:

  1. In the navigation filter, go to Experiences and open your experience. 

  2. Under the related list "UX Page Properies", find the property called "chrome_toolbar". 

  3. Make sure that it is Type "json" and formatted like the following example:

    [
       {
          "id":"home",
          "label":{
             "message":"Home",
             "translatable":true
          },
          "icon":"home-outline",
          "viewportInfo":{
             
          },
          "routeInfo":{
             "route":"home"
          },
          "group":"top",
          "badge":{
             
          },
          "presence":{
             
          },
          "availability":{
             
          },
          "order":100
       },
       {
          "id":"list",
          "label":{
             "message":"List",
             "translatable":true
          },
          "icon":"list-outline",
          "viewportInfo":{
             
          },
          "routeInfo":{
             "route":"order-lists"
          },
          "group":"top",
          "badge":{
             
          },
          "presence":{
             
          },
          "availability":{
             
          },
          "order":200
       }
    ]​

     

I hope this can be of some help!

 

Regards,

Simon

Hi Simon,

Really thank you for your answer. The post above talking about the properties was mine, not Ashley's: this just to say that after that post i tried to change that property in a JSON, but probably i messed up something in the process, or there was another issue in that workspace, because it didn't work.

Now i tried again with a clean workspace and it worked. I'll mark the answer as correct.