Developer Menu Webinar Follow Up: The Ultimate Service Portal Dev Menu

featured

Hey Service Portal land, here’s a follow-up post for the SN Ask the Expert webinar I did on August 6. In case you missed it, you can watch it here:

[embedyt] https://www.youtube.com/watch?v=UyqmFX0CJvw[/embedyt]
I demonstrate in the webinar how to build a portal side nav with several really cool features, like impersonation, quick record links, and an update set picker. While I specifically focused on a developer’s menu, these same techniques can be used to build customer-facing features.
In this post, I’m not going to re-explain things I covered in the webinar. Instead, I’m simply highlighting some things for your reference. To build the side nav and its features, we made use of several advanced portal techniques:

ngMaterial sidenav component

For quickly creating a sidenav menu that can slide out on command, I opted to use ngMaterial, which is a very easy to use library. Check out the demo website for ngMaterial here: https://material.angularjs.org/latest/demo/sidenav There are a lot of other great components in this library to play with. The install is simple, and it instantly elevates the UX of your widget! .

SN record picker directive

I used this out-of-box directive for several use cases: impersonating, finding a portal component, selecting an update set, etc. In the video, I show how with a small menu enhancement we can create reference fields from menu items. For the menu items, I’m simply launching a url when you select a record. Yet, an ideal enhancement to this would be to provide options below the record picker for how you’d like to open the record. Ie, in a modal, in editor mode, in platform mode, etc. Something like this:

Keyboard shortcuts via custom angular provider

There are many ways to do this, and I opted for an angular provider directive. This is simply for injecting some input listeners for calling whatever function you want.

Rest API and server methods for controlling impersonating

Not much that I want to mention here that wasn’t covered in the webinar. Other than, don’t be intimidated by the $http service and rest API. It can be super easy to build and use. If using $scope.server.update() gives you trouble, consider building yourself a scripted API instead.

Try creating a keyboard shortcut for ending impersonation. But whatever you do, don’t touch the Yoshi.

Conclusion

If you want to build this from scratch, as I did, feel free to pause the video a million times to read my code off the screen. Or, just use this update. Keep in mind, this adds a new menu item type and updates the menu item UI policies accordingly. But that’s the only modification to any out of box tables.   If you make some great enhancements to what I’ve started here, I’d love to see them. Please keep in touch with any questions or achievements!   Jeff.pierce@cernasolutions.com


Please check out our blogs and other content on Service Portal for ServiceNow by clicking here. If you’d like to start a conversation about Service Portal consulting, or other ServiceNow needs, send us a message below, and we’ll be happy to connect with you as soon as possible.

Share This to Your Network
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Buffer this page
Buffer
Email this to someone
email