HelsinkiHint - My First ServicePortal Widget

I love jelly! I love jelly! Oh wait, I'm just so comfortable with jelly that I've hesitated to even look at the new Service Portal features in fear of having to get my head around angular and portal concepts before I could actually do anything interesting. If you're anything like me, don't hold off any longer. I took the plunge and the water is great.

I'm not really sure how I came across it but I was inspired by a quick tutorial from @nathanfirth on using record-watcher in a Service Portal widget. I've had this nifty "REST Reflector" app for a while (I'll eventually release it, in case you're wondering). It basically does what RequestBin does. It allows you to inspect any REST request sent to it. I wrote about this before as a tool I frequently use when building and troubleshooting integrations or orchestration activities. ServiceNow has been getting better at adding support for web service debugging/logging but there are still a few gaps. Stay tune for updates in my InsaneIstanbul or IrresistibleIstanbul blogs, or whatever I call them.

As great as Request Bin is, I thought why should I use another tool. So I built a replica in ServiceNow using the scripted REST APIs introduced in Geneva. This has been handy but I've been putting off building a nice page to view the results. When I heard about using a record watcher in service portal widgets I thought it was the perfect time to try it out since it would provide me with dynamically displayed REST request data. Request Bin doesn't even do that.

Here's a short demo showing requests sent from Postman.

 

By the way, even though I had no prior knowledge or experience with angular and service portal components, this took just slightly longer to build than it would have if I built it in jelly. And that doesn't even include trying to pull off a watcher concept in jelly.

Besides some of the basics, here are some things I learned.

The widget designer is sweet! And the option to provide a demo JSON input is even sweeter. It allows you to start playing with basic HTML structure and angular tags without having to worry about client controllers or server scripts at first. Baby steps are less scary and you can quickly see concept progress.

Here's how I got started. I provided some JSON demo data that would eventually be replaced by the server script. Then I started laying out a simple HTML template that references the data model.

This wouldn't be all the helpful or exciting without the preview pane. Enable preview on the widget if it's not already enabled and the preview will update every time you save the widget (and there's a keyboard shortcut, woohoo). You don't even have to worry about portal pages to contain the widget yet, just get the widget doing what it's supposed to do.

For the other newbies out there, the "ng-repeat" attribute allows us to enumerate through the "request" items in the "data.requests" array by repeating the div we defined for each request. This works great for a single level of attributes or even a true object properties.

I ran into a problem trying to parse properties that were stored in the array's object as strings and not true objects. See the header properties in my demo data. 

Since the headers are stored in a single string, trying to access {{request.headers.authorization}} would fail to resolve a value. It wasn't clear to me at first how to parse a JSON string value within an "ng-repeat" tag. Luckily angular is much easier to search for help on than jelly is, or ever was. This was solved by parsing the headers string into a new object within "ng-init". This is where I started using a client controller, but the concept is still easy to follow. 

 

I encourage everyone to check it out if you have a Helsinki instance. Start by reviewing some of the existing widgets and check out the videos on ServiceNow docs and ServicePortal.io. Then build something really basic. You'll be surprised how fast you can start creating cool things. I sure was.