Learning to build widgets from scratch: Part 1 - start with a plan and know what you need to know!

[Michael Jones -]

If you can dream it, you can build it!

Widgets in ServiceNow seem to be one of those hot or cold subject; you either live and breathe anything and everything they represent, or you cross the street with your eyes averted anytime they're even mentioned. Ok, maybe that's overly dramatic, but you probably see my point. I spent years working in ServiceNow and while I certainly tweaked and modified a widget here and there, they were basically something I knew existed but didn't fully understand. 

Eventually there will come a time when you need something that just frankly doesn't exist anywhere else in the system, where you don't have an example to copy and tweak, and at that point you either give up on your idea, pay someone else to build it, or learn how to do it yourself. I still don't claim to be a master of all things widget, but some of what I've learned on my path to enlightenment might be useful to others as I found that learning wasn't always the hardest part; sometimes figuring out what I actually needed to learn was the real challenge. My experience was similar to reading a book from the middle to the back and then finally from the start, which is something I could hope to spare you.

On that note, if you're serious about building widgets I suggest you invest time in gaining at least a basic understanding of some of the foundational components that make up the components of a widget. I don't have direct links for these saved, but I'm sure just about everyone has come across https://www.w3schools.com/ at some point; they're my go-to for getting started on topics like these. 

Basic HTML: Yeah, seems obvious, but if it's been a while take the time to refresh your memory. You'll still need to write a lot of this yourself!

CSS and SASS: Don't even get me started. Just trust me, you need to know this stuff. It had been years for me and so much had changed it wasn't remotely amusing (well, some people found it funny, just not me). 

Bootstrap: ServiceNow utilizes this framework heavily and so should you! This will help you easily keep your widgets visually and functionally aligned with what you see in the platform now, not to mention it being a HUGE time-saver. You don't have to think about some things, just add a class and go. Note: ServiceNow uses version 3.3.6.

AngularJS: It might seem strange that I list this one 4th, but believe me; while Angular is absolutely a critical component and the very engine that drives all it all, if you've been a developer or any length of time this will probably be the least difficult part for you to grasp. Getting things to "work" has been, for me at least, far and away easier than getting things to actually look like they belong. Keep in mind that the framework ServiceNow uses look a little different from "pure" AngularJS but the concepts all hold true. You definitely want to understand all of the "ng" directives if for no reason other than you need to know what you can do!

ServiceNow Server-Side Glide Scripting: The true power that widgets possess is the ability to combine the versatility of server-side scripting with the capability to display information client-side. If you're not already well versed in things that start with "Glide", spend some time on this one. 

Javascript: Ok, you probably know Javascript inside and out or you wouldn't even be looking to do any of this, but if that's not the case, look into it. You can do some amazing things just knowing the ServiceNow API's, but you still need some basic Javascript to make it all work. If you're not good with arrays or creating objects on the fly, I recommend reading up. Makes life in the widget-world a lot more pleasant. 

jQuery: This is one that you don't need to use all of the time - I create a lot of widgets without needing to use anything from the category, but when you do need it, you need it and not much else will get the job done as well. Worth looking into. 

This list obviously isn't all-inclusive; depending on your specific requirements and needs there may be other areas you'll need to enhance your knowledge or pickup from scratch, but it represents a good distribution on the 80/20 scale.

My next installment will focus on the process I recommend when starting on a new widget.

If you found this article useful or helpful, please be kind a click appropriately! If you really found it useful, maybe bookmark it for later reference 🙂

I hope this helps!

Michael Jones - Proud member of the CloudPires team!