Create a sidebar within the Service Portal?

[Edwin Fuller]

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 · Accepted solution]

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;
        	  
            
       
    }
}

[Edwin Fuller]

Very Helpful, Thanks very much!! 

[Brandon Barret1]

Glad it helped a bit, good luck!

[Edwin Fuller]

Since you posted the link to the innovation library first and I went with it I will mark yours as the correct answer. Thank you very much