Friends any idea..how do we display images dynamicaly in catalog item..Ex when I select device it should also change image at the place of test image..I tried with UI macro but not working.
Hi,
I had the same challenge. Select a model in a variable and then display the image and description for the selected model.
- Create a Model Variable of type reference to the cmdb_model table.
- Create a Ajax script include to retrieve the data for the model when it is selected.
- Create a Macro variable that has a macro that displays and updates the image and description.
- You'll need a macro for the standard interface.
- You'll need a widget for the portal interface.
- Create an On Change script for the Model variable that calls the AJAX script include and calls a function on the macro to update the image and the short description.
Code for the AJAX Script Include
Shout out to Amandosierra, who's reply to this community question explains how to retrieve the picture information.
var VariableModelUtilsAjax = Class.create();
VariableModelUtilsAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
getModelInfo: function() {
var modelId = this.getParameter('sysparm_model');
var result = this._getModelInfo(modelId);
var resultString = JSON.stringify(result);
var xmlDoc = this.getDocument();
var root = this.getRootElement();
var item = xmlDoc.createElement("model_data");
var textNode = xmlDoc.createTextNode(resultString);
item.appendChild(textNode);
root.appendChild(item);
},
_getModelInfo: function(modelId) {
if (typeof scriptName == "undefined") {
// we will add the scriptName to the function Name
scriptName = this.type;
}
var functionName = "Function: getModelInfo\n";
functionName = scriptName + functionName;
try {
// Put content here
var data = {};
var gr = new GlideRecord("cmdb_model");
if (gr.get(modelId)) {
data.name = gr.getValue('name');
data.picture = gr.getDisplayValue('picture');
data.description = gr.getValue('description');
data.short_description = gr.getValue('short_description');
}
return data;
} catch (e) {
// enter what you want to happen if there is an error here
var errorMessage = functionName + e;
gs.addInfoMessage(errorMessage);
gs.log(errorMessage);
}
},
type: 'VariableModelUtilsAjax'
});Code for the Macro Variable Macro
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<div id="itamModelImageDiv" >
<table>
<tr>
<td> <img id="itamModelImage" style="display: none;" src=""/>
</td>
<td style="vertical-align:top">
<div id="itamModelDescription" ></div>
</td>
</tr>
</table>
</div>
<script>
function itamUpdateImage(imageId, description){
var imageDiv = document.getElementById("itamModelImageDiv");
var image = document.getElementById("itamModelImage");
image.style.display = "none";
var src = imageId + "?t=large";
image.src = src;
var divPadding = "0px";
if(imageId != ""){
image.style.display = "block";
divPadding = "15px"
}
var descriptionNode = document.getElementById("itamModelDescription");
descriptionNode.innerHTML = description;
descriptionNode.style.paddingLeft = divPadding;
}
</script>
</j:jelly>
Code for the Macro Variable Widget
Put this in the widget's HTML Template field. Because the script is in the template field, it can be called from the On Change catalog client script.
<div id="itamModelImageDiv" >
<table>
<tr>
<td> <img id="itamModelImage" style="display: none;" src=""/>
</td>
<td style="vertical-align:top">
<div id="itamModelDescription" ></div>
</td>
</tr>
</table>
</div>
<script>
function itamUpdateImage(imageId, description){
var imageDiv = document.getElementById("itamModelImageDiv");
var image = document.getElementById("itamModelImage");
image.style.display = "none";
var src = imageId + "?t=large";
image.src = src;
var divPadding = "0px";
if(imageId != ""){
image.style.display = "block";
divPadding = "15px"
}
var descriptionNode = document.getElementById("itamModelDescription");
descriptionNode.innerHTML = description;
descriptionNode.style.paddingLeft = divPadding;
}
</script>Code for the Model On Change script
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}
var model = newValue;
var ga = new GlideAjax("VariableModelUtilsAjax");
ga.addParam("sysparm_name", "getModelInfo");
ga.addParam("sysparm_model", model);
ga.getXML(getModelData);
//Type appropriate comment here, and begin script below
function getModelData(response) {
var xmlDoc = response.responseXML;
var modelData = xmlDoc.getElementsByTagName("model_data")[0];
var modelObjectText = modelData.childNodes[0].nodeValue;
var modelObject = JSON.parse(modelObjectText);
//alert("itamUpdateImage");
itamUpdateImage(modelObject.picture, modelObject.description);
//alert(modelObject.picture);
}
}Hope this helps.
Let me know if you have any qeustions.
Thanks,
Cody
