question Re: how to get records with angularJS in Developer forum

how to get records with angularJS

Goran WitchDoc — Tue, 01 Dec 2015 08:27:17 GMT

Hi,

Just to clear out the conditions 😃 I'm pretty new to servicenow and developing. Coding has always been there in the background all life, but it has never been my main work.

I'm trying to learn how to get angularJS to work like I want and I've been through a lot of tutorials of AngularJS but I havnt found anyone that covers really how to get the information from ServiceNow. all these always put the data in the controller manually.

And when it comes to REST, Im totally new 😃

I've played around abit with the info from Angular in ServiceNow: Tutorial #3 - REST Calls-John Andersen

and I get it to work. But since that one requires a input for the tickets to show, I want to know how to make a ui page that shows the records without any manually input calling for the function to get it.. but show all the records that my query is. Im trying this out on my personal dev-instance.

In my dream world I would just take away the function part and use the get right up, but I guess Im missing something.

This is what I got.

UI page:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:requires name="angular.min.jsdbx" />

<g2:evaluate var="jvar_stamp">

var gr = new GlideRecord('sys_ui_script');

gr.get("e608a7e94fc41600028f7ab28110c748");

gr.getValue('sys_updated_on');

</g2:evaluate>

<g:requires name="driftinformation.jsdbx" params="cache=$[jvar_stamp]" />

<div ng-app="descEditor" style='padding:40px;'>

<div ng-controller="DescriptionText">

<table><tr>

<!-- <td style='width: 300px; vertical-align: top;'>

<p>NUMBER</p>

<input ng-model="incnum" ng-change="updateRecordList(incnum);"/>

</td> -->

<td style='vertical-align: top; padding: 20px;

background-color: #B2B2B2; width: 200px;'>

<div ng-repeat="num in numbers">{{num.number}}</div>

</td>

</tr></table>

</div>

</j:jelly>

UI Script:

var myApp = angular.module('descEditor', []);

myApp.controller('DescriptionText', [

'$scope',

'$http',

function($scope, $http) {

$scope.incnum = "INC010";

$scope.url = '/api/now/table/incident';

$http.defaults.headers.common.Accept = "application/json";

$http({

method: 'GET',

url: $scope.url + "?sysparm_query=numberSTARTSWITH"+incnum+

"^ORDERBYDESCnumber"+

"&sysparm_fields=number&sysparm_limit=25",

}).

success( function(data, status) {

$scope.numbers = data.result;

}).

error ( function(data, status) {

$scope.numbers = [{"number": "Error fetching list"}];

});

}

] );

I'm hoping someone in the community can point me in the right direction 😃

Re: how to get records with angularJS

Rushit Patel2 — Tue, 01 Dec 2015 09:34:21 GMT

Hi Göran Lundqvist,

Great to see many pepl trying Angular on Service now. to execute any function on Load u need to use this attribute 'data-ng-init'.

so HTML side looks like this

And your Controller would look like this. add that method.

$scope.getAllActive = function(){

$http({

method: 'GET',

url: $scope.url + "?sysparm_query=active=true",

}).

success( function(data, status) {

$scope.numbers = data.result;

}).

error ( function(data, status) {

$scope.numbers= [{"number": "Error fetching list"}];

});

};

it will show all Active Incidents.

I Hope it WOrks for u.

***mark helpful/like/correct based on impact of reply*****

Regards,

Rushit Patel

Re: how to get records with angularJS

Goran WitchDoc — Tue, 01 Dec 2015 17:17:04 GMT

Thanks alot rossipatel 😃

I got a couple of follow up questions if you got the time 😃

1. I found this earlier AngularJS: Developing Modern User Interfaces - ServiceNow CMS - Service Portal, CMS, and Custom Apps and went through that tutorial. And instead of a "http get" they used a script include and get the data through that instead... are there any "pros/cons" for each way?

2. When I got it to work after your corrections, I got a login-field before I got to the ui page and saw the result. How do I get ride of that?

Thanks in advance 😃

Re: how to get records with angularJS

Rushit Patel2 — Thu, 03 Dec 2015 17:24:04 GMT

Hi Göran Lundqvist,

you can fetch data both ways. but I prefer http service when I am working on angular app. creating script includes for every feature is painful. and also in Geneva we have option of direct UI pages in which we can get completely empty page without servicenow stuff. so in that case Glideajax global object is not available. but advantage of using UI pages with direct option selected is that u only stuff you have written when u see Source of your page(no crapyy stuff that you are not using and can potentially collide with your styles).and I believe direct rest calls using $htttp would be much faster.
when you say you are getting login-field as in login page of your instance? in that case go to sys_public.list and create a new record and enter name of your UI page. then u can directly access your UI page without logging in.

i hope it helps.

Regards,

Rushit Patel

Re: how to get records with angularJS

Goran WitchDoc — Thu, 03 Dec 2015 22:01:22 GMT

Hi rossipatel,

Ahh., thanks for clearing nr.1 out 😃

Not sure about number 2. I don't Think thats the problem. I'm logged in as admin. But the first time I press "try it". I get this.

After I typed in my admin credentials its doesn't show up again until I quitted my session. So it aint the "real" login screen to the instance I get.

Re: how to get records with angularJS

Rushit Patel2 — Fri, 04 Dec 2015 06:52:45 GMT

Hi Goran,

ahhh....I see the problem. when u are making rest calls to servicenow REST api's u must include basic Authentication or 'X-UserToken' header with correct token.

so in below code I have included basic authentication. username and password must b encoded so I have included dependency from ninjatronic/angular-base64 · GitHub .

see below code

angular.module('todoService',['base64'])

.factory('getList', function($http,$base64){
var listFactory = {};

var username = 'username';
var password = 'password';
var authdata = $base64.encode(username + ':' + password);

listFactory.getinc = function(){

return $http.get('https://yourincstace.service-now.com/api/now/table/incident?sysparm_query=active%3Dtrue&sysparm_fields=number%2Cshort_description%2Cstate&sysparm_limit=1',{
headers: {
'Authorization' : 'Basic ' + authdata
}

});

return listFactory;
};

});

I hope it helps.

regards,

Rushit Patel

Re: how to get records with angularJS

Goran WitchDoc — Sat, 05 Dec 2015 19:06:30 GMT

Hmm.. I thought I understood it 😃

but I got an error on the URL. Right now Im using admin, but I thought I just do that so I know it isnt any credentials messing around to get it to work. How do you do it otherwise since I guess you dont have admin to do this. Do I create a certain user to use to do the REST-calls?

I also have put down the angular-base64 as a ui script and calls on it with "

<g:requires name="angular-base64.min.jsdbx" />"

var myApp = angular.module('descEditor', ['base64']);

myApp.controller('DescriptionText', [

'$scope',

'$http',

function($scope, $http, $base64) {

$scope.url = '/api/now/table/u_driftinfo';

$http.defaults.headers.common.Accept = "application/json";

var username = 'admin';

var password = 'xxxxxxxxx';

var authdata = $base64.encode(username + ':' + password);

$scope.getAllActive = function() {

$http({

method: 'GET',

url: $scope.url + "?sysparm_query=u_valid_to>=javascript:gs.daysAgoEnd(0)^ORu_valid_toISEMPTY",{

headers: { 'Authorization' : 'Basic ' + authdata }}

}).

success( function(data, status) {

$scope.numbers = data.result;

}).

error ( function(data, status) {

$scope.numbers = [{"number": "Error fetching list"}];

});

}

$scope.getAllHistory = function() {

}

] );

Re: how to get records with angularJS

Rushit Patel2 — Sun, 06 Dec 2015 08:16:07 GMT

Hi Goran,

don't forget to add $base64 as shown below.

myApp.controller('DescriptionText', [

'$scope',

'$http','$base64',

function($scope, $http, $base64) {

and try making simple rest calls without those complicated Query params.

now coming to the Making REST calls with which user? is complicated and pain in rear for me. I never made anything for end user so i always used admin credentials. now if u make any user specifically to make rest calls for all users of that app,it will make REST calls but when u navigate away from your UI page and try to open any other record, instance will automatically Log out the User and log in the user u set in REST call. This is Super Wierd. I don't know how people handle this in SNOW. may b someone from community can help.

Re: how to get records with angularJS

Goran WitchDoc — Sun, 06 Dec 2015 16:31:16 GMT

Well.. this one Im going to use to publish information on our portal, without demanding a login. I doing this as a UI page on my personal dev since I didnt wanna spend time to set up a portal there. I figured that if I got it to work in a ui page, I could take that xml-code and put it in a dynamic context block and it would work there as well. Am I on the wrong way here? 😃

What we are using this for is that we have Service status(I think its called in english). So we can put up outages, pure information, planned service etc. for the end customers.

Dont know if the auth.. stuff will change if I put in in the portal thou, but since the rest-call is made from a ui script I dont think so or?

Re: how to get records with angularJS

Rushit Patel2 — Mon, 07 Dec 2015 15:33:49 GMT

Hi Goran,

yes if you put your code into into dynamic content blocks it will definitely work however u can not use embedded scripts in that. but problem of making REST calls still persists. so if you make REST calls using admin credentials in script. and now any user comes to portal n when they will come to your dynamic block and if they navigate somewhere else ,their session will automatically end and admin will be automatically logged in.

Let me post question in community.

Re: how to get records with angularJS

Goran WitchDoc — Tue, 08 Dec 2015 08:03:39 GMT

Hmm darn...

I took the "script" part in the ui page and på it in a UI script and called on it as well, and I guess thats the way I can do it.

Im wondering if I get the same "credentials"-problem if I use the code from the rest api explorer? When I look at the code it give me it doesn't look like the one we're using 😃

Re: how to get records with angularJS

Rushit Patel2 — Tue, 08 Dec 2015 13:36:38 GMT

Hi Goran,

I did post my question in community but no one replied.. and code u get from rest Api explorer requires u to pass username & password...problem with our app is that we do not know who is using the app..if we will make request with other user credential then it will log them out.

i can think of few solutions..

1)we can store user password in field type 'password(2way)'.. so in our app we can make a call to script include which will fetch username and password(we can decrypt password(2way) field) and set them in $http call. drawback:servicenow doesnt use password(2way) field by default to store password. it uses password(1way) and it is undecipherable. so somehow we neeed to store all passwords in custom field of password(2way) type.

2)we don't provide any credentials in $http call, let that popup come when they use app for the first time..after we make first REST call..Servicenow will return X-UserToken...we can use that token for sub sequent requests. drawback: user will have to manually enter username and passoword one time, even though they are already using the instance.

Geneva would be much better..in that we can make scripted REST services , and it can be public.

Re: how to get records with angularJS

Goran WitchDoc — Tue, 08 Dec 2015 15:34:00 GMT

Hmm... Sadly I doubt any of those two solution would work for us

Wouldnt it be possible to instead of a rest call do a GlideAjax, have it get the objects, make a JSON encode and then in the ui script do a evalJSON to put in the $scope.numbers?

And the retreat suggestion is go back to jelly and do this inside a g2, and the publish it.. .but I don't wanna do jelly

Re: how to get records with angularJS

Rushit Patel2 — Tue, 08 Dec 2015 15:41:09 GMT

Yeah that can also work. thats better than thinking about this authentication n stuff.

i hope you are aware about this ServiceNow Developers . it shows how to fetch data in JSON.

Re: how to get records with angularJS

Goran WitchDoc — Tue, 15 Dec 2015 14:23:20 GMT

Hi,

I need you eyes rossipatel.

I've got the json to work. But somehow the angular repeat won't work. I've been staring at the code for hours now trying everything but It wont show anything.

I've cut down my code to just get the repeat to work but I doesn't want to..

my HTML:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

   <!-- Import AngularJS Library -->

       <g:requires name="angular.min.jsdbx" />



<!-- The User Interface -->

<div ng-app="driftInfo">

   <div ng-controller="mainController" data-ng-init="getAktuellt()">

   <div ng-repeat="num in numbers">

   Tasknumber: {{ num.number }}

   </div>

   outside loop {{ testing }}

   </div>

</div>








</j:jelly>

The "outside loop" with {{ testing }} is working. But that the only thing showing on my screen as "outside loop DARN show yourself!"

The alert in the script part(se below) also works, since it popup every short description that I want.. I just cant understand why the ng-repeat wont work..

Client script:

var app = angular.module("driftInfo",[]);



app.controller('mainController', ['$scope', function($scope) {


   $scope.testing = "DARN show yourself!";


   $scope.getAktuellt = function () {


   var ga = new GlideAjax('getDriftinfo');

   ga.addParam('sysparm_name','getActive');

   ga.getXML(showAktuellt);



   };


   function showAktuellt(response) {

   var answer = response.responseXML.documentElement.getAttribute('answer');

   $scope.numbers = angular.fromJson(answer);

   //Just made the for loop to see that I got the correct data

   for (var i=0; i<$scope.numbers.length; i++) {

   alert($scope.numbers[i].short_description);


   }

   }

}]);

Re: how to get records with angularJS

Rushit Patel2 — Tue, 15 Dec 2015 19:19:02 GMT

ahhh...i SEE it.

i guess u need to replace line 19 with

$scope.$apply(function () {

$scope.numbers= angular.fromJson(answer);

alert($scope.ex2Output3);

});

reason behing using $scope.apply is that glideAjax and its callback is not part of Angular. so when u try to use somthing angular(for exp like $scope.something = zuzu;) u need to explicity tell it using $scope.apply. so that it can update the view.

perhaps, this post will explain it better. this is why Angular 1 is nightmare for begginers. Angular 2 is going to be much better

i havnt tried your code..let me know if it works.

Re: how to get records with angularJS

Goran WitchDoc — Tue, 15 Dec 2015 21:37:31 GMT

you're good rossipatel

You made my day again!

I skipped the Alert($scope.ex2Output3); thou.. It seems kind of weird.. the ex2Output3 thingie

Now Im going to put it all together again with the rest and see if it goes like I want 😃

Re: how to get records with angularJS

Rushit Patel2 — Wed, 16 Dec 2015 07:22:33 GMT

goranlundqvist...yeah..Happy to Help

Re: how to get records with angularJS

Goran WitchDoc — Tue, 22 Dec 2015 18:49:56 GMT

Im back )

Thanks for the help. Now its working like a charm in my persona dev that are in Geneva.

Then ofcourse another problem.

I now did it in our company dev now with fuji and it doesnt seem like the angular wants to work in the portal. I get the tabs, but the angular isnt showing.

If I put the same code on a UI Page its working.

And what I find the most strange thing. If I inspect the element with firefox, all the html code is there when the correct data from angular, but it aint rendering on the page... Any clue what I can look for?

Re: how to get records with angularJS

Rushit Patel2 — Tue, 22 Dec 2015 18:56:07 GMT

so where you have used that code? in dynamic content block?

and when u say angular is not working..so somting like this {name} is displayed?

and are you getting any error in console of browser?