Pass values from a Widget to a Catalog item variable

[Dazler]

Hi,

I have built a widget that is essentially just a lookup to a table.  That is working.  Now I have been tasked to add it to a catalog item form as a UI macro.

What I need to do is pass the value from the widget to a catalog item variable.  If this is possible, how would I do it?

[Ben_G]

These might help:

 https://docs.servicenow.com/bundle/orlando-servicenow-platform/page/build/service-portal/task/ui-mac...

https://serviceportal.io/g_form-api-in-embedded-widgets/

If you need to pass in options, this helped me:

https://www.kevin-custer.com/blog/embed-a-widget-with-options-in-a-catalog-item-in-service-now/

Using the default tab you can pass in a JSON string of the options. 

I pretty much did the same thing recently. Created a new DateRangePicker widget for the catalog, using https://www.daterangepicker.com/.

There are some OOTB variable widgets too which you can look at to see how ServiceNow did it, they are very simple.

I think the naming is "Variable Currency" for one of them. Basically it's an input box that attaches it's data to the $page.field object, which can be accessed by the catalog item.

[Pratiksha Kalam]

Hello,

Have look on this,

https://community.servicenow.com/community?id=community_question&sys_id=e3888804dbd62700107d5583ca96...

https://community.servicenow.com/community?id=community_question&sys_id=fd698365db5cdbc01dcaf3231f96...

If answer is helpful please mark correct!

Thanks,

Pratiksha

[Dazler]

I review both suggestions, but I can't seem to get it to work.

This is my HTML for my widget:

<div class="panel panel-primary">
 <div class="panel-heading">Search for Employee Equipment</div>
 <div class="panel-body">
   <sn-record-picker 
	                 	field="data.user" 
                     table="'sys_user'" 
                     display-field="'name'"
                     display-fields="'email'"
                     value-field="'sys_id'" 
                     search-fields="'name'" 
                     page-size="100" 
                     placeholder="Search for a user" 
                     ng-change="c.server.update()">
   </sn-record-picker>
   
   <table class="table-list">
     <tbody class="tbody-list result-container">
       
       <tr class="tbody-header" ng-if="c.data.items">
        
         <td>Device Type</td>
         <td>Model</td>
       
       </tr>
       <tr class="tbody-list-item" ng-repeat="item in c.data.items">
        
         <td>{{item.u_equipment_type}}</td>
         <td>{{item.u_model_name}}</td>
       
       </tr>
     
     </tbody>
   </table>
 </div>
  
  
  <div class="panel-footer" ng-if="c.data.items">
  <ng-pluralize count="c.data.items.length"
                 when="{'0': 'No equipment items found for ',
                     '1': '1 equipment item found for ',
                     'other': '{} equipment items found for '}">
    </ng-pluralize>
    {{c.data.user.displayValue}}
</div>

This form with the embedded widget should look like this:

I need the value from the widget to populate the Terminated User field.  But when I added the $scope.page.g_form to the client controller to set that field value, it changed the widget.

This is the client script:

function($scope, spUtil, $rootScope) {
/* widget controller */
var c = this;

$scope.page.g_form.setValue('terminated_user', c.data.user.value);

}

This is what it looks like now.

It changed the user field.  What am I doing wrong?  Any help would be appreciated.

[Dazler · Accepted solution]

I figured it out.  I added a function to watch if the field value changes.

function($scope) {
/* widget controller */
var c = this;

$scope.$watch(function(){

$scope.page.g_form.setValue('terminated_user', c.data.user.value);

});

}