Using AngualrJS/REST in UI Macro

[j_martin]

I am new to AngularJS as well as the REST API.   I wanted to create a responsive knowledge search using AngularJS.   The following code works within a UI page, but not in the UI macro I need in order to put it on a form. I am thinking it has to do with REST calls, but any input would be helpful.

<tr>

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

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

  <script>

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

  myApp.controller('KnowledgeSearch', [

      '$scope',

      '$http',

      function($scope, $http) {

          $scope.knowledge = "";

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

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

          $scope.updateList = function(knowledge) {

              $http({

                  method: 'GET',

                  url: $scope.url + "?sysparm_query=short_descriptionCONTAINS"+knowledge+"^workflow_state=published",

              }).

              success( function(data, status) {

                  $scope.descriptions = data.result;

              }).

              error ( function(data, status) {

                  $scope.descriptions = [{"knowledge": "Error fetching list"}];

              });

          }

      }

  ] );

  </script>

      <div ng-app="descEditor">

          <div ng-controller="KnowledgeSearch">

              <table><tr>

                      <p>Knowledge Search</p>

                      <input ng-model="knowledge" ng-change="updateList(knowledge);"/>

                      <div ng-repeat="desc in descriptions"><a href="kb_knowledge.do?sys_id={{desc.sys_id}}">{{desc.short_description}}</a></div>

              </tr></table>

          </div>

      </div>

</j:jelly>

</tr>

[Brad Tilton]

I'm not sure why you would have a tougher time from a macro rather than a ui page.

Have you added any debugging to see exactly where it fails? Is your update list function running? Does the error method of the promise give you the error fetching list message? You might also try calling the ui macro from a ui page to see if it's the macro or form that's giving you the issue.

[j_martin]

Brad - Thanks for the tips.

I took your advice and placed the UI macro on the UI page and that does work.   I have a formatter which allows me to place the macro on a form, maybe that has something to do with the problem. I will have to spend some time trying to debug.

Thanks - Justin

[j_martin]

Slight Update -

I was able to verify it was reaching the controller, but it seems to have issues with updateList(). I have placed the macro on a catalog item and that also doesn't work, so I'm not quite sure what to debug next.

UI Pages work, so I know the syntax is correct.

Forms don't seem to work with the ng-change directive.

[Brad Tilton · Accepted solution]

Hi Justin,

I tested the following in a fuji instance by adding it to a ui macro which I displayed in a formatter on the incident form and it worked for me. I think the main difference is that I removed your table/tr tags from inside the divs.

<?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="angularjs.min.1.3.14.jsdbx" /> -->

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

  <script>

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

  myApp.controller('KnowledgeSearch', [

      '$scope',

      '$http',

      function($scope, $http) {

          $scope.knowledge = "";

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

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

          $scope.updateList = function(knowledge) {

              $http({

                  method: 'GET',

                  url: $scope.url + "?sysparm_query=short_descriptionCONTAINS"+knowledge+"^workflow_state=published",

              }).

              success( function(data, status) {

                  $scope.descriptions = data.result;

              }).

              error ( function(data, status) {

                  $scope.descriptions = [{"knowledge": "Error fetching list"}];

              });

          }

      }

  ] );

  </script>

<tr>

      <div style="display:block;" ng-app="descEditor">

          <div ng-controller="KnowledgeSearch">

                      <p>Knowledge Search</p>

                      <input ng-model="knowledge" ng-change="updateList(knowledge);"/>

                      <div ng-repeat="desc in descriptions"><a href="kb_knowledge.do?sys_id={{desc.sys_id}}">{{desc.short_description}}</a></div>

          </div>

      </div>

  </tr>

</j:jelly>