Create a sidebar within the Service Portal?

Edwin Fuller · ‎10-01-2019

Below is an mock up (buttons and other items have been removed) I received from one of my teams who wants to update our exiting Employee Self Service page. In the screenshot below you will see information on the right side of the page related to: Your request, Events, Unlock Password, and Leave feedback. My questions is how do I go about creating an sidebar within Service Portal? Doesn't seem to be an OOB widget so I'm assuming scripting was used to create it. They received the below sidebar example by googling different examples of Service Portals already created.

Thanks for any help

Brandon Barret1 · ‎10-01-2019

In order to create a side nav, I would build the sidenav out and then use a bootstrap 9 | 3 container on your page. The 3 is where your sidebar will live, the 9 is where the rest of the content lives. With a fixed position, and the correct styling, you can get the nav to go up to the edge of the screen, and extend it to the top of it. That is how I built mine. The 9|3 is a guess, but it looks like it is a decent guess based on the way the page looks.

This is a left side nav that is collapsible, but you can use it as somewhat of a framework to build your own:

https://sc.service-now.com/snds?state=widget-detail&sys_id=c2636430db7bef40b4d974921f9619a2

This also helped me:

https://community.servicenow.com/community?id=community_question&sys_id=ac252144dbbd1380032a7a9e0f96...

I would also read up on fluid vs. fixed positioning for container and page elements. Also, here is some code from when I last messed around and built a simple side nav for practice, take the styling with a grain of salt I was messing around and all the links are placeholders, etc. You could change things based on your needs:

html:

<div class="wrapper">
  <div>
    
  
    <widget id="typeahead-search"></widget>
    <hr>
  </div>
<div>
   
<div class="logo">
            <img src=""/>
            <hr>
    </div>  
<div class="project-sidebar">
    
    <a class="filter-links" href="javascript:void(0)"
    ng-class="{'active': c.selectedFilter == 'all'}"
    ng-click="c.applyFilter('all')">All Articles</a>
    <a class="filter-links" href=""
    ng-class="{'active': c.selectedFilter == 'my-votes'}"
    ng-click="c.applyFilter('my-votes')">Category 1</a>
  <a class="filter-links" href="javascript:void(0)"
    ng-class="{'active': c.selectedFilter == 'my-votes'}"
     ng-click="c.applyFilter('my-votes')">Category 2</a>
  <a class="filter-links" href="javascript:void(0)"
    ng-class="{'active': c.selectedFilter == 'my-votes'}"
    ng-click="c.applyFilter('my-votes')">Category 3</a>
  <a class="filter-links" href="javascript:void(0)"
    ng-class="{'active': c.selectedFilter == 'my-votes'}"
    ng-click="c.applyFilter('my-votes')">Category 4</a>
     <a class="filter-links" href="javascript:void(0)"
    ng-class="{'active': c.selectedFilter == 'my-votes'}"
    ng-click="c.applyFilter('my-votes')">Link</a>
    </div>
</div>

css

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');


.wrapper{
  position:fixed;
  width:15%;
  background-color:black;
  height:100vh;
  top:-3;
  left:0; /*This would be right:0; for you, if you want it to be on the right side of the page. */
  border-right:solid gray .1px;
}

.logo{
  
 text-align:center; 
  padding-bottom:10px; 
}

.project-sidebar {
   
    padding: 5px 0px;
    background-color: black;
    width:100%;
    left:0; 
  
  
    .new-idea {
        padding: 15px 20px;
        width: 50%;
        margin-bottom: 20px;
        background-color:#d9534f;
        color: white;
        display: block;
        margin-left: auto;
        font-size: 18px;
        text-transform: uppercase;
        
    }
    .filter-links {
        font-family: 'Oswald', sans-serif;
        color: white;
        display: block;
        border-bottom:1px solid gray;
        height: 100%;
        font-size: 17px;
        font-weight: 80px;
        padding-top: 10px;
        padding-left: 50px;
        position: relative;
        width: 100%;
        padding-bottom: 5px;
    }
        .filter-links:hover {
            background-color: white;
            color:black;
            font-weight: normal;
        	  
            
       
    }
}

View solution in original post

Mark Roethof · ‎10-10-2019

The secondarymenu would be the regular header menu I think. Have a look at "Service Portal > Menus". I don't know what your current Menu is, out-of-the-box probably "SP Header Menu". Copy that sys_id for the secondarymenu.

If you open your Header, have a look at the Menu Items on the bottom. Something like:

That should represent what is shown on your portal:

(not entirely, for example the Cart and the User name/photo are in the Header widget itself)

If my answer helped you in any way, please then mark it as helpful.

Kind regards,
Mark

---

LinkedIn
Community article list

Kind regards,

Mark Roethof

Independent ServiceNow Consultant

10x ServiceNow MVP

---

~444 Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Edwin Fuller · ‎10-10-2019

Thank you, I duplicated the OOB SP Header menu and replaced the sys_id in the below screen shot with the new menu sys_id and it worked. 🙂

Edwin Fuller · ‎10-17-2019

Hi Mark, with using this solution do you know how I would change the color of the second menu / top header menu? Using the branding editor changes the left hand menu. Currently the color is white which seems to come from the background color page. I need it to be orange

Kim Sullivan · ‎07-06-2020

@Edwin Fuller - I'm not able to access the Innovation Center, but love the look of your sidebar. Would you mind sharing your code?

Kim Sullivan · ‎07-11-2020

Anyone looking for a left nav or side menu, should check out this blog. Dan’s created the best one I’ve seen so far! https://danthedevman.com/blog/dkQrnYDzEMae4orVNgRc