And before I begin I would like to send a special thanks to Rushit Patel on the ServiceNow community. Without the help from him, I wouldn't have gotten this far. Hopefully this blog will help others doing some amazing stuff with AngularJS and ServiceNow.
A little bit of background. When we started to configure ServiceNow for our Go-live, one if the most important aspects of the project was that we wanted to do as much configuration as possible our self and only have our consults as some kind of mentors. Sadly, under the project other practical tasks took up some of our time and one thing that we didn't do any coding at all was our end user portal in the CMS.
Just looking and trying to understand the CMS made my brain go into melting mode and I have tried to stay away from it as long as I could.
Well, now people want to make changes and its time to learn it. Since everyone says jelly's future in ServiceNow is getting smaller and AngularJS is stepping in, I thought I might as well learn AngularJS.
Just so this post doesn't get as long as my children's wishlist to Santa I've decided to divide it into two parts. Part one will I write about the sites I found useful to learn all this, and for part two I'll show you my first experiment with all of this, which is a UI Page that I call for Service Status (Driftinformation in swedish). I guess you can say something like Server status or perhaps system status. In other words, a page where end users can read about planned changes or incidents(mostly major).
I made a UI Page first, since I thought it was easier to experiment when having both the XML-editor and client script editor in one page. After I got it to work, I placed the client script in a UI Script and the call it inside the XML instead. So you can take the same code and put it in a dynamic block content.
My first stop was Codecademy. It was really good since I had very limited experience in webdesign in general, so here I could get a bit more on my feet.
They have good courses and I took All about making a website, CSS, jQuery, Javascript and AngularJS.
This gave me a good ground to stand on, but then again. This had nothing to do with ServiceNow.
Second step was looking at the TechNow's 3 episodes of ServiceNow Jelly Scripting. here a link for episode 1:
TechNow Episode 1 | ServiceNow Jelly Scripting Part 1 of 3
Think it's good to know a bit about jelly, since our XML-code uses it even if you go into AngularJS and at least know the foundation of it.
Then I started to try to find more content of AngularJS and ServiceNow. I wouldn't say there is much, and what was really hard to find at was how to use AngularJS with data from ServiceNow and not use your own defined inside the AngularJS only.
But I went through these sites/examples to learn more about it and ServiceNow.
John J. Andersen has 4 episodes of AngularJS and here is the link to the first:
Angular in ServiceNow: Tutorial #1 – Model Basics
These two are the final ones I found and they are from K15 and K15 CreateCon:
AngularJS: Developing Modern User Interfaces
And
CreatorCon Workshop Building Killer UX Guide
What you can see the examples above is that they all use REST API to fetch the data. It went really nice when I did that as well. But it all demanded a login and that didn't really work for me because I wanted people being able to see the information without being logged in.
I could throw in a login string inside the code but I was told that there is a bug with this, which can be explained something like: If the user isn't logged in and goes to your public page it works. But when the user then goes to another page, he/she will continue with the logged in credentials you specified for your UI Page, and that ain't good...
The only way I could find it possible to get this without credentials was setting this property(glide.basicauth.required.api) to false, which then allows unauthenticated access to REST API. But that sounds to risky for me. For me I would want to set that if the call come from inside ServiceNow, it doesn't need authentication, that would be most logic for me. But then again. There might be some security issue with it, I don't have that knowledge.
So instead I had to go and use JSON and in the angular I then called on a script include with GlideAjax instead of just using the way of above which is a lot easier. But I hear that in Geneva you can make these kind of REST calls without need of authenticate and that would be really nice. So when you want to return objects with script include, JSON is a nice and easy way to go.
So for last, how did I learn about JSON? I did that by going to the Scripting course by ServiceNow. Lucky me, I planned it without knowing about above and just finished that course before Christmas.
I've been looking around for similar videos/tutorials for JSON, but haven't found anything that I think is easy to understand. But don't fear, it's a very little part of my example and I think you'll understand it when looking at it. The only thing it does is handle the way information is sent from server to the client
This is the end of part 1.
You can find Part 2 here: Part 2: Making UI Page "Service Status" with AngularJS
Thank you so much for your valuable information on Angularjs
SvaraRadera