onChange Widget?

[conanlloyd]

I have a requirement to display a description, image and clickable url for the selected ergonomic keyboard.   I have a catalog client script that uses glideAjax to get the description, image and url from the u_ergonomic_equipment table and sets the value of the macro field that uses the widget to   "Item Description:\n" + answer.description + "\n\n\nItem Image:\n" + answer.image + "\n\n\nItem URL:\n" + answer.url  

Since a UI Macro isn't available through the portal I'm going the widget route.   I have a working rough draft using this code

Body HTML template:

 <div>       
   {{ c.data.message }}   
 </div>

Client controller:

function($scope) {   
         var c = this;   
         //Watch for changes in the name variable   
         $scope.$watch(function () {   
                   return $scope.page.g_form.getValue('ergo_keyboard_choice');   
         }, function (value) {   
         //Update local data object with data from variable   
         c.data.message = value ? value : '';   
});   
}   

Which produces this:

Can anyone help me populate this HTML template instead?

 <div>       
   <p><b>Description: </b><br>{item description here}</p>
   <p><b>Image: </b><br>{item image here}</p>
   <p><b>Link: </b><br>{item url here}</p>
 </div> 

[larstange]

Hi

Instead of using a catalog client script to get the values, build this logic directly in the server part of your widget.

You have the sys_id of the catalog item in the url, so the server part will be able to get that via $sp.getParameter("sys_id")

Then get the image, link and description via a normal gliderecord and pass it to the data object.

Then you can map this directly in the html

Descrption:

{{data.description}}

Image:

<img ng-src="{{data.image}}" />

Link

<a ng-href="{{data.link}}" >{{data.link}}</a>

[nathanfirth]

If you're embedding a widget as a variable in the catalog item, you should be able to check the values of the fields on the form to render the HTML.

Checkout my example I have serviceportal.io:

https://serviceportal.io/embedding-widgets-in-service-catalog/

[conanlloyd · Accepted solution]

With nathanfirth's guide as a starting point, I managed to figure it out.   Here's my code in case it helps someone else in the future.

HTML:

<div> 
<strong>Item Description:</strong><br />{{c.data.description}}<br />
</div>
<div align="center"><img src="{{c.data.image}}" width="75%" height="75%">
<br />
<br />
</div> 

Server Script:

(function() {
   /* populate the 'data' object */
   /* e.g., data.table = $sp.getValue('table'); */
 var gr = new GlideRecord("u_ergonomic_equipment");
gr.addQuery("sys_id", input.message);
gr.query();
if (gr.next()) {
data.url = gr.getDisplayValue('u_link');
data.image = gr.getDisplayValue('u_image');
data.description = gr.getDisplayValue('u_item_description');   
}



})();

Client Controller:

function($scope) {   
         var c = this;   

         //Watch for changes in the name variable   
         $scope.$watch(function () {   
                   return $scope.page.g_form.getValue('ergo_keyboard_choice');   
         }, function (value) {   
         //Update local data object with data from variable   
c.data.message = value;
c.server.update().then(function(response){
});


});

}

Pics of the finished product.

Before selecting an Ergo Keyboard:

And after selecting a keyboard:

Hope this helps someone.

[nm13]

Hi,

Can you please help me know how to tag a user from the community in the question or replies? 

Thanks!