Service Portal Widget - grabbing variable value on change in Client Script and passing to Server Script

[Daniel Shock]

Good Morning! I have started developing an app for one of our departments to track some very specific types of inventory.  It's not too complicated.  Each row of data in the table contains a photo of the item being stored.  I am creating a record producer for them to use in the portal to select the items to request they be sent from warehouse to some other location.  When selecting each item, I can use client scripts on the record producer to retrieve quantity and location information.  To retrieve and display the item's photo, I am using a Service Portal Widget.  This is the part I am having trouble making work.  I can display a photo from an item if I hard code a sys_id for the item into the Server Script portion of the widget.  But I am having trouble watching the 'item' variable on the record producer for change and then passing the sys_id to the server script for lookup.  

I will take some screenshots.

Here is my HTML in the Widget:

Here is my Client and Server script section:

the name of the field I am looking for changes on is 'item'.  I can't even get the alert statements to work... I'm pretty new to working with Widgets like this.  Any help would be appreciated!

[Michael Jones -]

There are a few different ways to achieve the same result; one I use in similar requirements looks something like this: 

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

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

    }, function(value, oldValue) {

        //validate that value is not the same as oldValue (loading)
        if (value != oldValue) {
        //execute on change of the variable
            alert(value);
        }

    });

};

I've also used the same field.change routine as you and wonder if the issue you are having is with the fact that your variable name is item, which might be conflicting with something, somewhere. You might try a small change in the variable name first. 

I hope this helps!

If this was helpful, or correct, please be kind and mark the answer appropriately.

Michael Jones - Proud member of the GlideFast Consulting Team

[Michael Jones -]

Oh - you have a typo in your declarations. 

You have $rootscope, which will throw an error to the console. 

Change $rootscope to $rootScope in both instances and you may start seeing the expected results. 

I hope this helps!

If this was helpful, or correct, please be kind and mark the answer appropriately.

Michael Jones - Proud member of the GlideFast Consulting Team

[Daniel Shock]

So close! Thank you so much for your help! I am getting correct info in client script now according to the alerts.  But I can't seem to pass it to server script  yet.  Here are my current scripts:

client:

api.controller = function($scope) {
    /* widget controller */
    var c = this;
    $scope.$watch(function() {
var i = $scope.page.g_form.getValue('item');
		//alert('i variable before function in client script is: ' + i);
        return $scope.page.g_form.getValue('item');

    }, function(value, oldValue) {

        //validate that value is not the same as oldValue (loading)
        if (value != oldValue) {
        //execute on change of the variable
            //alert("HERE WE GO: " + value);
			c.data.item = value ; // Use C.Data.X to Make your variable ready to pass to server-side
			alert("c.data.item = " + c.data.item);

}


    });

};

Server:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
var gr = new GlideRecord('x_bsh_non_seed_inv_nonseed_scoped');
var i = input.item;
gs.log("i in server script = " + i);
gs.log("input.item = " + input.item);
//var sID = input.sys_id;
//gs.info("SID = " + sID);
//if (gr.get(sID)) {
//gr.addQuery('sys_id', "1e2d73b31b980550423b4111cd4bcb6c");
gr.addQuery('sys_id', i);
gr.query();
	if(gr.next()){
         data.name = gr.getValue('name');


         data.picture = gr.getDisplayValue('photo');


}
})();

The logs in server script just return 'undefined'.

Thoughts?

[Michael Jones -]

In your client script, you need to actually call a method to pass the data to the server and then take some action after the data object is updated. I'm not sure entirely what you are looking to accomplish exactly, but something like this should give you some idea. 

Client: 

api.controller = function($scope) {
    /* widget controller */
    var c = this;
    $scope.$watch(function() {
var i = $scope.page.g_form.getValue('item');
		//alert('i variable before function in client script is: ' + i);
        return $scope.page.g_form.getValue('item');

    }, function(value, oldValue) {

        //validate that value is not the same as oldValue (loading)
        if (value != oldValue) {
        //execute on change of the variable
            //alert("HERE WE GO: " + value);
			c.data.item = value ; // Use C.Data.X to Make your variable ready to pass to server-side
			alert("c.data.item = " + c.data.item);


//pass the data to the server and indicate the results

    c.server.get({
        item: c.data.item
    }).then(function(r) {

        //For now we just update c.data with the response and alert the new values
        c.data = r.data;
        alert('Name:' + c.data.name + ' Picture:' + c.data.picture);
    });


}


    });

};

 Server

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */

//check if we have input to avoid errors onload
if(input) {
   var gr = new GlideRecord('x_bsh_non_seed_inv_nonseed_scoped');
   var i = input.item;
   gs.log("i in server script = " + i);
   gs.log("input.item = " + input.item);
   //var sID = input.sys_id;
   //gs.info("SID = " + sID);
   //if (gr.get(sID)) {
   //gr.addQuery('sys_id', "1e2d73b31b980550423b4111cd4bcb6c");
   gr.addQuery('sys_id', i);
   gr.query();
	if(gr.next()){
         data.name = gr.getValue('name');
         data.picture = gr.getDisplayValue('photo');


   }
}


})();

I hope this helps!

If this was helpful, or correct, please be kind and mark the answer appropriately.

Michael Jones - Proud member of the GlideFast Consulting Team