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>
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.
