Easy? widget help

[magee]

Objective:

Display an info message on any given catalog item that provides the average number of delivery days expected based on current catalog item AND location (reference variable on item)

Action taken:

1. Created a variable of type Reference which points to the location table

2. Created a variable of type Custom which points to an cloned widget. The widget is empty except for the HTML: 

<div id = "div1">
Estimated delivery:
</div>

3. Created CSS (in the widget) that display div1 as a blue box.

4. Created the script that calculates the average number of days for the given catalog based on the location selected. This script was created in a background script. Works great for what I need. This script has NOT been added to the widget.

What I need help with:

1. On the catalog form, when the location changes, I need to pass the location AND catalog item sys_id to the server script, which will then run the calculation I need
2. The script will return a number, for example 5
3. I'd like 5 to display after Estimated delivery above.

Example:

Estimated delivery: 5 days

Here's what my catalog item page looks like now:

I'm sure this is pretty simple and there's prob an out of the box widget i can reference, i just need a little guidance.

Any help is greatly appreciated-

[AndersBGS]

Hi @magee ,

Ok, so basically your catalog items can have different delivery time depending on the location - correct? In general ServiceNow delivery time is set through the flow. If it can cope with different delivery time depending on different locations I can't remember.

[maheshkhatal]

@magee  fair enough. Go ahead and tweak the code that I have given you. It should solve your problem. Kindly mark my response as helpful. 

Regards,

Mahesh

[magee · Accepted solution]

Got it working..still needs some aesthetic updates

Body HTML Template

<div id="div1">
  <!--Estimated delivery: {{::data.location}}-->
  Estimated delivery: {{data.scriptIncludeResult}}
</div>

CSS

#div1{
  border:1px solid;
  padding: 0px;
  background-color: #CCFFFF;
  border-radius: 5px;
  width: 30%;
}

Server Script

(function() {
    /* populate the 'data' object */
    /* e.g., data.table = $sp.getValue('table');*/
    if (input && input.location) {     
        data.catItem = $sp.getParameter('sys_id');
        var myUtil = new global.MyUtility();
        data.scriptIncludeResult = myUtil.myFunction(input.location, data.catItem);
    }
})();

Client Controller

api.controller = function($scope) {
    /* widget controller */
    var c = this;
    $scope.$watch(function() {
        return $scope.page.g_form.getValue('location');
    }, function(value, oldValue) {
        if (value != oldValue) {
            c.data.location = value;
            c.server.update().then(function(response) {
            });
        }
    });
};

Script include

var MyUtility = Class.create();
MyUtility.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {


        myFunction: function(param1, param2) {
            // Your logic here
			gs.info('MM location: ' + param1);
			gs.info('MM item: ' + param2);
			return "5";
            //return "Result from Script Include: " + param1 + " " + param2;
       },

        type: 'MyUtility'
});

This script include is for demo purposes only. I have a script that will query the RITM table for RITMs that have been closed in the past 6 months where the location is the location selected on the portal form and the item is the item the user is currently viewing.

All the help below helped get me going.

My next step is to replace the blue info box with a modal.