Accessing SP widget directives from a catalog client script

[timhorn]

I'll start by stating my underlying goal.   I want to be able to have a catalog client script modify some attributes (value and style.display) of an element that is defined inside an SP widget.   I understand that the Service Portal presents more of a "mobile" interface, and we therefore don't have access to a DOM.   I get that.   I don't like it....but I get it.   I was wondering if, as an alternative, we might be able to trigger a directive in the widget from a catalog client script.   Any thoughts?

[ChrisBurks · Accepted solution]

Link function:

function(scope, element, attr){
         // capture the Service Now field
var dem = $('#demo')[0];
   //grab the catalog variable checkbox in the example and capture if checked or not. this will display or hide the SP demo field in example
$('input[name="IO:<sys_id of the variable goes here>"]').on('change', function(e){

             scope.show_hide = this.checked;
   });

//capture the catalog variable multiple choice selections and populate SP demo field on change in video example
var mchoice = $('input[name="IO:<sys_id of variable goes here>"]');
mchoice.on('change', function(e){
         if(dem.value == '') dem.value += " " + this.value;
         else {
             dem.value += " " + this.value;
             var dsize = dem.getAttribute('size');
             dem.setAttribute('size', parseInt(dsize) + this.value.length +2)
         }
 });

//capture the catalog variable "Description" field in video example and listen on keydown and populate SP demo field
$('input[id="sp_formfield_IO:<sys_id of catalog variable goes here>"]').on("keydown", function(e){

   dem.value = this.value;
   dem.setAttribute('size',testi.value.length);

   });
}

HTML markup in widget:

<div>

  <h3> Service Portal Fields </h3>

  <hr>

  <div>

      <input id="demo" ng-show="show_hide"     class="check-element animate-show-hide" />

  </div>

  <div>

  </div>

</div>

This was just a quick draft. I'm sure it could be a lot cleaner and done in more of an angular way. But I hopefully it will give you some ideas.

Thanks

[timhorn]

I'll do some more experimenting with the possibilities later, but this definitely gets me where I need to be.   Thanks a lot for the input.

[ChrisBurks]

I was doing something the other day with catalog items and Service Portal and remembered I had done a post about the interaction between the two.

I'm sure many of you already know all this but in case someone might want some up to date information, I thought I should show how I would perform the same thing nowadays.

Client Controller:

function($scope){

         $scope.$watchGroup(['page.g_form.getValue("select_me")', 'page.g_form.getValue("ichose")','page.g_form.getValue("short_description")'], function(newValue, oldValue){
                   if(newValue[0] == 'SP')
                             $scope.selectMe = 'SP';
                   else
                             $scope.selectMe = null;

                   if(newValue[1])
                             $scope.myModel = newValue[1];


                   if($scope.selectMe)
                             $scope.selectMeModel = newValue[2];

         })
         $scope.myModel = $scope.page.g_form.getValue('select_me');
}

HTML

<h1>Service Portal Widget Variables</h1>

<div ng-if="selectMe == 'SP'">

  <h4 class="text-info">I'm now showing if "Oooh oooh! Select me!" has a value of 'SP'.</h4>

  <p>Input below me will populate from "Description" catalog item variable on <span class="text-danger">blur</span>:

  <input ng-model="selectMeModel">

</div>

<input ng-model="myModel">

Screencast: Service Catalog and Service Portal on Vimeo

Let me know any thoughts. Again, I'm sure this could be done in a better way.