question Interact with service portal widget in catalog item in ServiceNow AI Platform forum

Interact with service portal widget in catalog item

larstange — Mon, 15 Aug 2016 08:49:29 GMT

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

Re: Interact with service portal widget in catalog item

larstange — Mon, 15 Aug 2016 11:33:48 GMT

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

Re: Interact with service portal widget in catalog item

milapshah15 — Fri, 19 Aug 2016 06:15:05 GMT

Hi Lars,

I am trying to use widget field with macro as a type but it is not rendering the widget itself.Can you tell me what I should do to make it available on catalog item.

Please help as it is bit urgent.Appreciate your help

Warm regards,

Milap

Re: Interact with service portal widget in catalog item

larstange — Fri, 19 Aug 2016 06:22:25 GMT

Hi Milap

The widget will only be visible if you open the catalog item through the Service Portal

Re: Interact with service portal widget in catalog item

Daniel Pettet — Fri, 02 Sep 2016 14:30:13 GMT

I would be careful with using $scope.$watch as you are hoping that angular can pick up on all the custom logic ServiceNow has for it's elements. Eg, reference fields won't work with this solution as they are complex HTML components.

A better solution would be to use standard catalog scripts and fire standard JS events like CustomEvent.fire('my.namespaced.event') and then your widgets listen via CustomEvent.observe('my.namespaced.event', <function callback>).

Re: Interact with service portal widget in catalog item

larstange — Mon, 05 Sep 2016 05:40:11 GMT

Hi Daniel

Thanks for the tip - I can see some clear advantages by doing it that way - I will surely experiment with that method as well!

That said, it do seem to work quite well with a multi line string variable and just let the widget watch for changes.

But in the case where you need more than one widget pr catalog item I believe that your method will be better

Re: Interact with service portal widget in catalog item

scottl — Wed, 26 Oct 2016 22:13:23 GMT

Good work Lars! Works perfectly.

Re: Interact with service portal widget in catalog item

scottl — Wed, 26 Oct 2016 22:15:49 GMT

Reference fields do work, as it returns the sys_id of the referenced record.

Re: Interact with service portal widget in catalog item

larstange — Tue, 22 Nov 2016 12:20:58 GMT

Another approach can be seen this post Embedding widgets in Service Catalog - ServicePortal.io - Service Portal, CMS, and Custom Apps

Re: Interact with service portal widget in catalog item

Bhavin Jain1 — Wed, 08 Mar 2017 13:45:31 GMT

Hi Lars,

I tried accessing the variable name using $scope.page.g_form.getValue('variable_name') in client controller.

Here on change of variable, I'm populating the variable based on client script in another variable , but when I use alert($scope.page.g_form.getValue('variable_name'));

I was getting error "Cannot read property 'getValue' of undefined".

Could you let me know if I'm missing something over here.

Thanks,

Bhavin

Re: Interact with service portal widget in catalog item

larstange — Wed, 08 Mar 2017 14:06:58 GMT

Did you include ($scope) in your initialization of the client controller?

function($scope) {

/* widget controller */

var c = this;

Re: Interact with service portal widget in catalog item

Bhavin Jain1 — Wed, 08 Mar 2017 17:10:24 GMT

Hi Lars,

Yes I have included $scope.

Below is the code i was trying from the example you shared above.

function ($scope, $http, spUtil, nowAttachmentHandler, $rootScope, $location,$window) {

var c = this;

$scope.$watch(function () {

alert($scope.page.g_form.getValue('hide'));

return $scope.page.hide.value;

}, function (value) {

// //Update local data object with data from variable

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

alert(c.data.message);

});

It threw error saying "Cannot read property 'getValue' of undefined"

Thanks,

Bhavin

Re: Interact with service portal widget in catalog item

larstange — Wed, 08 Mar 2017 17:50:59 GMT

Where do you run the code - it will not work within in widget editor. The page.g_form part is only available when the widget is run via a macro variable in a cataog item

Re: Interact with service portal widget in catalog item

Bhavin Jain1 — Thu, 09 Mar 2017 11:56:41 GMT

Im using as single line text field,

Ideally should work for all kind of variables, if i want to retrieve the value.

Thanks,

Bhavin

Re: Interact with service portal widget in catalog item

Pothuraju — Wed, 03 Jan 2018 06:00:58 GMT

How to get values for selectbox variables. value is returning choice value not name

Re: Interact with service portal widget in catalog item

larstange — Wed, 03 Jan 2018 07:14:06 GMT

Use g_form.getDisplayValue('variable_name');

Re: Interact with service portal widget in catalog item

saurabhchande — Mon, 08 Jan 2018 13:16:07 GMT

What if I am using a child widget in variable of catalog item and that child widget is calling a parent widget... and in parent widget I am using "$scope.page.g_form" but it is not working because I think "$scope.page" is used. any way to get this working in parent widget which is being called in child widget?

Re: Interact with service portal widget in catalog item

larstange — Tue, 09 Jan 2018 09:05:45 GMT

If your parent widget is part of the portal and is not embedded in a macro variable, then I don't think your parent widget will have access to the variable values.

Then you need to send all needed values from the child to the parent.

Re: Interact with service portal widget in catalog item

xiaix — Fri, 19 Jan 2018 16:20:56 GMT

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:

Re: Interact with service portal widget in catalog item

larstange — Mon, 22 Jan 2018 06:45:07 GMT

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, & Themes