how to get records with angularJS

Goran WitchDoc
ServiceNow Employee
ServiceNow Employee

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 😃

1 ACCEPTED SOLUTION

Rushit Patel2
Tera Guru

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




View solution in original post

49 REPLIES 49

I just noticed this little thing when I looked closer to the inspect code... No idea what it means, is there some kind of conflict?



error inspect.jpg



I hate trying to fix things other people has done


so all data is there when you inspect the elements..no errors in the console? generally Angular gives error if anything is wrong.


Not what I can find.. It look like this.. Now I have created a new site with just a page with a dynamic block.. Same problem there as well



error 2.GIF


U can see for yourself if you dont believe your eye 😃



LU Dev


Hmmm.. Now I get something at console...



error 3.GIF