My team spent a lot of time recently working on building custom AngularJS apps on top of the ServiceNow platform. We also wanted the freedom to style the pages without the opinionated CSS loaded by Heisenberg. While Heisenberg and some of the other preloaded JavScript and CSS provide value for rapidly building simple applications, traditional developers want the freedom of starting with a clean CSS and JavaScript slate.
This is easily achieved on ServiceNow, by setting the direct attribute to TRUE on all of your UI Pages. In GENEVA this is easily set on the UI Page form.
Prior to Geneva, you can achieve this by passing a querystring of :
ui_page.do?sysparm_direct=true
When making REST calls in your app the ServiceNow endpoints, if you do nothing, your users will be prompted to enter their ServiceNow credentials every time a call is made. To avoid that, you can leverage add an authentication with the X-UserToken set to the logged in user's session token. This is is a more User Friendly way to handle this as there is no impact to their experience.
After doing some research on the wiki and the blogs, I suggest the following approach for Angular apps:
In your UI Page that contains your ng-app="appName"
You are going to insert the following Glide and JavaScript
<g:evaluate object="true">
var g_ck = gs.getSessionToken();
</g:evaluate>
<script>
window.g_ck = "$[g_ck]";
</script>
This will add the session token from the gs object to your global JavaScript scope.
Then depending on how you make your REST calls, you can pass the token in the Headers. Here are a few examples.
If you want to set a global header default WHEN your only REST calls are to the the ServiceNow instance you can use $httpProvider.defaults
angular.module("appName").run(function ($http) {
$http.defaults.headers.common['X-UserToken'] = window.g_ck;
}
If you don't want to set it at a global level, you would need to specify it in the config for every $http request to servicenow
$http({
method : "GET",
url : 'api/now/etc',
headers : {
'X-UserToken' : window.g_ck
}
}).then(function (res) {});
// or with the shortcuts
$http.get('/api/now/etc',{
headers : {
'X-UserToken' : window.g_ck
}
}).then(function (res) {});
I use window.g_ck because that's what ServiceNow does on direct=false UI Pages. That way, if you do decide to move your JavaScript to a UI Page with direct=false you won't have to update your JavaScript to continue to access the session token.
Let me know how it goes for you.
9 Comments
