Easy? widget help

magee · 3 weeks ago

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:

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
The script will return a number, for example 5
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-

magee · 3 weeks ago

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.

View solution in original post

maheshkhatal · 3 weeks ago

Hello @magee , I don't understand why would you need extra widget to display the message? Is it not possible with just normal OOB messages?

Anyway, if you are looking to manipulate your custom variable(pointing to widget) you can do it by using passing the current scope of the catalog item page. You definately need to tweak your widget code(possibly add some event on it) and you will set the value on it using:

function($scope) {
/* widget controller */
var c = this;
//c.data.user.value some vlaue that was binding to html side
$scope.$watch(function(){

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

});

}

Kindly mark my response as helpful if it helped resolve your doubt.

Thank you,

Mahesh

magee · 3 weeks ago

Thanks for the reply Mahesh.

The message is dynamic so it will change based on the item the user is on and where the delivery location of the item is going. If it was just a static message, this would be no problem, but it's not static.

This is my first attempt at creating a custom widget so please forgive me when I say that I have no idea where to put the code you provided on the widget record.

AndersBGS · 3 weeks ago

Hi @magee

Why not utilizing the OOTB widget for delivery time instead of a custom solution?

If my answer has helped with your question, please mark my answer as the accepted solution and give a thumbs up.

Best regards
Anders

Rising star 2024
MVP 2025
linkedIn: https://www.linkedin.com/in/andersskovbjerg/

magee · 3 weeks ago

good question.

The delivery time, in that widget, if I understand, pulls the delivery time on the catalog item.

We have the delivery time on each of our catalog items but the problem is we have locations around the country. Our product owner (the boss) would like a more specific delivery time based on the requested for's location.

The delivery time on the catalog is more generic.

So if the delivery time is 30 days, that is just a blanket guestimate. Some locations can get the product/service in fewer days.