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 😃

[Goran WitchDoc]

What's really annoying is that in my geneva instance it works with the same code...

[Rushit Patel2]

input and h3 tag should be inside ng-app div.

can you post your code?

[Goran WitchDoc]

Here is my code.

But I think I kind of getting near the problem. If I make the ui page as a public page and dont log in. I get the same problem. Then If I log in. I get the correct page.

but then again.. the CMS-page isnt showing the correct info even if Im logged in.. so hmm Im not sure anymore 😃

Exact the same code on both the UI page and the Dynamic content block I use on the portal.

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

<script>https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

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

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

  <g:requires name="driftportal.jsdbx" />

<!-- The User Interface -->

<div class="container">

  <h2>Driftinformation</h2>

  <p>Här kan ni välja mellan aktuell driftinformation och drifthistorik. klicka på rubrikerna för mer information om specifik drifthändelse.</p>                                  

  <ul class="nav nav-tabs" role="tablist">

  <li class="active"><a href="#driftinfo"><span class="glyphicon glyphicon-folder-open"></span> Aktuellt</a></li>

  <li><a href="#history"><span class="glyphicon glyphicon-folder-open"></span> Historik</a></li>

  </ul>

</div>

<div id="activeinfo" ng-app="descEditor">

  <div class="tab-content">

  <div id="driftinfo" class="tab-pane fade in active">

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

  <div class="panel-group" id="accordion">

  <div class="panel panel-{{num.u_type}}" ng-repeat="num in numbers | orderBy: '-order'">

  <div class="panel-heading" style="color:black">

  <h4 class="panel-title">

  <a data-toggle="collapse" data-parent="#accordion" href="#{{num.number}}">

  <u>{{num.short_description}}</u></a>

  </h4>

  <p><b>Uppdaterat:</b> {{" " + num.sys_updated_on}}</p>

  <p><b>Skapat:</b> {{" " + num.sys_created_on}}</p>

  </div>

  <div id="{{num.number}}" class="panel-collapse collapse">

  <div class="panel-body" style='padding:10px;'><pre>{{num.description}}</pre>

  </div>

  </div>

  </div>

  </div>

  </div>

  </div>

  <div id="history" class="tab-pane fade">

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

  <div class="panel-group" id="accordion2" ng-repeat="num in numbers | orderBy: '-sys_updated_on'">

  <div class="panel panel-{{num.u_type}}">

  <div class="panel-heading" style="color:black">

  <h4 id="{{num.u_type}}" class="panel-title">

  <a data-toggle="collapse" data-parent="#accordion2" href="#{{num.number}}">

  <u>{{num.short_description}}</u></a>

  <div ng-if="num.u_type == 'success'">í…tgärdat {{" " + num.sys_updated_on}}

  </div>

  </h4>

  <p><b>Uppdaterat:</b> {{" " + num.sys_updated_on}}</p>

  <p><b>Skapat:</b> {{" " + num.sys_created_on}}</p>

  </div>

  <div id="{{num.number}}" class="panel-collapse collapse">

  <div class="panel-body" style='padding:10px;'><pre>{{num.description}}</pre>

  </div>

  </div>

  </div>

  </div>

  </div>

  </div>

  </div>

  <input type="text" id="myname"></input>

<h3>{{myname}}</h3>

</div>

</j:jelly>

[Goran WitchDoc]

I just noticed that if I did my dev-instance UI page public as well, it screws up the same way... no data is shown..

[Goran WitchDoc]

ahhh wait... can there be a ACL not letting the script do its magic when noone is logged on?