Interact with service portal widget in catalog item

larstange · ‎08-15-2016

Hi all

So we are currently analyzing if we can replace our current service catalog (based on the standard ServiceNow interface and self-service module - no CMS) with the Service Portal.

We have a number of more advanced catalog items, where we use UI macro to display additional information to the user, that we are not able to achieve using the available variable types.

As UI Macros are not available in Service Portal we need a replacement. Here I have discovered a new "widget" field the catalog varaible form, where you can point to a portal widget and get it displayed on the catalog item.

But we need to be able to interact with the widget and affect what it is displaying based on the values selected in the variables on the catalog item.
Basically I want to write to the data in the widget's scope via a catalog client script.

The normal way of accessing an angular scope from the outside is using the syntax

var scope = angular.element($("#[element]")).scope();

So I have created a clone of the Hello World 1 widget and modified it so the input field has an ID

<div>
 Enter your name:
 <input id="helloWorld" type="text" ng-model="c.data.sometext" ng-change="c.display()"/>
 <h1>{{ c.data.message }}</h1>
</div>

Then I try to access the scope from an onChange script in the catalog item

     var scope = angular.element(document.getElementById('helloWorld')).scope();
       scope.$apply(function(){
               scope.data.sometext = newValue;
       });

But i get an error in the console saying (g_env) [SCRIPT:EXEC] Error while running Client Script "onChange_name": TypeError: Cannot read property 'element' of null

So it looks like the catalog client scripts does not have access to the loaded angular in any way. I have tried some different thinks to try and be able to access angular but no avail.

If anybody has an idea I would appreciate any pointers - if we don't solve this, then the portal is not an option.

Regards

Lars

nathanfirth

larstange · ‎08-15-2016

I found the solution my self.

You can read and write to the catalog variables using $scope.page.g_form. and then any of the g_form function like setValue and getValue.

Then I use the angular $watch feature to define a function to watch for changes in the catalog variable and then update my data in the widget scope.

It looks like this

HTML template

   <div>

   Data from catalog variable:

   <h1>{{ c.data.message }}</h1>

   </div>

Client Script Controller

function($scope) {

         var c = this;


         //Watch for changes in the name variable

         $scope.$watch(function () {

                   return $scope.page.g_form.getValue('name');

         }, function (value) {

         //Update local data object with data from variable

         c.data.message = value ? 'Content of name variable: ' + value : '';

});

}

Result - the text in the widget is updated when you change focus away from the catalog variable

View solution in original post

xiaix · ‎01-19-2018

So, .. just curious, let's say I have multiple fields I need to watch for changes. I have to do a $scope.$watch for each one?

Example:

larstange · ‎01-21-2018

That would work but this would be better

function($rootScope) {

 var c = this;

 $rootScope.$on("field.change", function(evt, parms) {

           if (parms.field.variable_name == 'value1') {

                     c.data.value1 = parseInt(parms.newValue);

           }

           if (parms.field.variable_name == 'value2') {

                     c.data.value2 = parseInt(parms.newValue);

           }

           c.data.results = (c.data.value1 + c.data.value2);

 });

}

Code snipplet taken from Embedding widgets in Service Catalog - ServicePortal.io - Service Portal Tutorials, Widgets, & Theme...

xiaix · ‎01-22-2018

Most excellent. Thanks!

Pritha1 · ‎05-09-2018

Can this be done with $rootScope?

patricklatella · ‎02-06-2019

Hi Lars, seeing this post and also watching a video on Youtube of yours. Got a question...how do you control the contents that appear for the links to catalog items in the portal? Here's what I'm seeing (see my screen shot), this is how OOB is rendering the link...looks awful...do you know how I can have the name text wrap instead of truncate? And how do I move the icon (the blue rectangle) to centered below the short description, and then have the short description go full width and also wrap. Is this possible without closing the widget? Thanks!