Service Portal Modal SlideNav

Hi there,

While developing a new Service Portal Virtual Agent widget, the thought raised about presenting the widget in a different way. Instead of having a pop-up appear, would it possible to have something like a Side Navigation bar on the Service Portal? Browsing the Internet for ideas and code, I did found several nice examples. Though, full code isn't shared. So why not, let's set up our own Modal "SlideNav" and share it with the Community!

What we need

Eventually, you would like to click on something, a link, a button, an image. On click, the SlideNav should appear. Basically, this should be handled within one Service Portal widget. The widget could be added on any page, or the header. Depending on what you are after with the SlideNav, you could expand the Modal so it contains the full HTML of HTML with dynamic value. Or you could leave the SlideNav very basic, so it could be used to embed webpages or other widgets.

Left, right, top, bottom

To have the SlideNav as complete as possible, we added a SlideNav from the left and right, though also from the top and bottom. The widget code will be at bigger because of this, though if you read through the code a few times, you will notice it's not that complicated and just a lot of the same. If you are just interested in the right SlideNave, you could easily strip the code.

Creating the SlideNav widget

Let's start creating a new widget. We just need the widget, with a name, Body HTML template code and CSS code.

To create the new widget, navigate to:
- Service Portal > Widgets
- New

Give the new widget an appropriate name. In our case for this Community Article, we used "Community Article SlideNav". As ID we entered "community_article_slidenav".

Now the part which actually generates the SlideNav!

Body HTML template

Notice that the below code is actually almost duplicated four (4) times. Only a different class and target are referenced. So to create your Modal sliding from the right, or sliding from the bottom isn't that much different.

<!-- Form -->
<div class="text-center">
  <button data-toggle="modal" data-target="#topModal">
    Top Slidebar Modal
  </button>
  <button data-toggle="modal" data-target="#bottomModal">
    Bottom Slidebar Modal
  </button>
  <button data-toggle="modal" data-target="#leftModal">
    Left Slidebar Modal
  </button>
  <button data-toggle="modal" data-target="#rightModal">
    Right Slidebar Modal
  </button>
</div>

<!-- Modal Top -->
<div class="modal top fade" id="topModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">
            &times;
          </span>
        </button>
        <h4>Top Slidebar</h4>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, suspendisse augue, sed et sit, diam in. Egestas elementum velit faucibus. Vel ridiculus massa, dictumst etiam magna vehicula nisl, ut duis enim mauris orci sollicitudin a. Justo sit ipsum ullamcorper, nibh vulputate volutpat lorem, justo urna orci erat, amet eu. Etiam sed in ut eu amet egestas, parturient convallis amet vestibulum amet. Et dui cras, sed elit. Lectus hac, imperdiet donec donec proin per vel mattis. Et vulputate mauris, in quam a malesuada felis, viverra a augue. Id velit nibh interdum consectetuer sagittis venenatis, viverra dui, amet nec, rhoncus faucibus nullam.
      </div>
    </div>
  </div>
</div>

<!-- Modal Bottom -->
<div class="modal bottom fade" id="bottomModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">
            &times;
          </span>
        </button>
        <h4>Bottom Slidebar</h4>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, suspendisse augue, sed et sit, diam in. Egestas elementum velit faucibus. Vel ridiculus massa, dictumst etiam magna vehicula nisl, ut duis enim mauris orci sollicitudin a. Justo sit ipsum ullamcorper, nibh vulputate volutpat lorem, justo urna orci erat, amet eu. Etiam sed in ut eu amet egestas, parturient convallis amet vestibulum amet. Et dui cras, sed elit. Lectus hac, imperdiet donec donec proin per vel mattis. Et vulputate mauris, in quam a malesuada felis, viverra a augue. Id velit nibh interdum consectetuer sagittis venenatis, viverra dui, amet nec, rhoncus faucibus nullam.
      </div>
    </div>
  </div>
</div>

<!-- Modal Left -->
<div class="modal left fade" id="leftModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">
            &times;
          </span>
        </button>
        <h4>Left Slidebar</h4>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, suspendisse augue, sed et sit, diam in. Egestas elementum velit faucibus. Vel ridiculus massa, dictumst etiam magna vehicula nisl, ut duis enim mauris orci sollicitudin a. Justo sit ipsum ullamcorper, nibh vulputate volutpat lorem, justo urna orci erat, amet eu. Etiam sed in ut eu amet egestas, parturient convallis amet vestibulum amet. Et dui cras, sed elit. Lectus hac, imperdiet donec donec proin per vel mattis. Et vulputate mauris, in quam a malesuada felis, viverra a augue. Id velit nibh interdum consectetuer sagittis venenatis, viverra dui, amet nec, rhoncus faucibus nullam.
      </div>
    </div>
  </div>
</div>

<!-- Modal Right -->
<div class="modal right fade" id="rightModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">
            &times;
          </span>
        </button>
        <h4>Right Slidebar</h4>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, suspendisse augue, sed et sit, diam in. Egestas elementum velit faucibus. Vel ridiculus massa, dictumst etiam magna vehicula nisl, ut duis enim mauris orci sollicitudin a. Justo sit ipsum ullamcorper, nibh vulputate volutpat lorem, justo urna orci erat, amet eu. Etiam sed in ut eu amet egestas, parturient convallis amet vestibulum amet. Et dui cras, sed elit. Lectus hac, imperdiet donec donec proin per vel mattis. Et vulputate mauris, in quam a malesuada felis, viverra a augue. Id velit nibh interdum consectetuer sagittis venenatis, viverra dui, amet nec, rhoncus faucibus nullam.
      </div>
    </div>
  </div>
</div>

CSS

Notice that also below code is actually almost duplicated four (4) times. Only slight differences in applying left or right, top or bottom. So to create your Modal sliding from the right, or sliding from the bottom isn't that much different.

.modal.top .modal-dialog,
.modal.bottom .modal-dialog,
.modal.left .modal-dialog, 
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.modal.top .modal-dialog,
.modal.bottom .modal-dialog {
  width: 100%;
  height: 200px;
}

.modal.left .modal-dialog,
.modal.right .modal-dialog {
  width: 350px;
  height: 100%;
}

.modal.top .modal-content,
.modal.bottom .modal-content {
  overflow-x: auto;
  width: 100%;
}

.modal.left .modal-content,
.modal.right .modal-content {
  overflow-y: auto;
  height: 100%;
}

.modal.top .modal-body,
.modal.bottom .modal-body,
.modal.left .modal-body,
.modal.right .modal-body {
  padding: 15px 15px 80px;
}

/* Top */
.modal.top.fade .modal-dialog {
  top: -200px;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
  -o-transition: opacity 0.3s linear, top 0.3s ease-out;
  transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.top.fade.in .modal-dialog {
  top: 0px;
}

/* Bottom */
.modal.bottom.fade .modal-dialog {
  bottom: -200px;
  -webkit-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  -o-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  transition: opacity 0.3s linear, bottom 0.3s ease-out;
}

.modal.bottom.fade.in .modal-dialog {
  bottom: 0px;
}

/* Left */
.modal.left.fade .modal-dialog {
  left: -350px;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog {
  left: 0px;
}

/* Right */
.modal.right.fade .modal-dialog {
  right: -350px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
  right: 0px;
}

/* Modal */
.modal-content {
  border-radius: 0;
  border: none;
}

.modal-header {
  border-bottom-color: #EEEEEE;
  background-color: #FAFAFA;
}

Usage

So now we've got the widget, how can we apply it on the Service Portal? Well, it's just adding the widget to the page where you would like to present this on. You could also add this to the header which is attached to the theme of your portal.

If attaching to a page, just open that page thru:
- Service Portal > Service Portal Configuration
- Select "Designer"
- Select your page
- Drag and drop your widget onto the page

End result

Left

Right

Top

Bottom

Share

An Update Set with this Service Portal widget can be downloaded from Share:
- Service Portal Modal SlideNav

---

And that's it actually. Hope you like it. If any questions or remarks, let me know!

Kind regards,
Mark
2020 ServiceNow Community MVP
2020 ServiceNow Developer MVP

---

LinkedIn