how to get records with angularJS

[Goran WitchDoc]

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">

  <!-- Import AngularJS Library -->

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

  <!-- Import my UI Script - get updated timestamp to invalidate cache if script changes -->

  <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]" />  

  <!-- The User Interface -->

  <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>

  </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 😃

[Rushit Patel2 · Accepted solution]

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

<div ng-controller="DescriptionText" data-ng-init="getAllActive()">

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

[Goran WitchDoc]

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 😃

[Rushit Patel2]

Hi Göran Lundqvist,

1. 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.
2. 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

[Goran WitchDoc]

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.