Adding an image to a reference field variable on Service Portal.

[Stephen31]

I've got a requirement to add pictures for selected variables on a catalog item.  (to help people know what it is they are actually selecting)  When they select an object from a reference variable a picture should pop up so they can see what it is they selected.  These pictures are not housed locally but on an external website so I'd have to set the source as that url.  Originally this was a list collector but I can't think of any way to make it work with a list collector so it will probably need to be broken into say, 5-10 variables for the same reference field that show when the previous one is selected.  

I'm thinking that's the only option and a matching 5-10 variables for each that are a macro with a widget would need to exist that can look at what was selected on change and grab the "image link" variable from that item and use it to display a picture.   

If there's another better way to do this I'd love to hear it.  And if not, an outline on how this would be done would be really helpful and appreciated.

[SatheeshKumar]

HI,

YOU CAN CREATE AN ON CHANGE CLIENT SCRIPT TO DO THIS!!

1.CREATE ON CHANGE CLIENT SCRIPT

2. GET THE ID OF VALUE SELECTED

3.ADD CODE FOR MODAL POPUP INSIDE YOUR CLIENT SCRIPT

4.PASS VALUE OF SELECTED OBJECT TO MODAL POPUP(GIVE SOURCE OF YOUR EXTERNAL IMAGE IN URL OF IMAGE).

THANKS,

SATHEESH

[Stephen31]

Hi Satheesh,

Thank for the response, I'll see if i can figure that out and give it a try and update you once I have.  Normally I would jump on a response and try it right away but we have a release this week and a few pressing issues I have to resolve before I can get back to this, but I hope to today or tomorrow.

[Stephen31]

I don't think the popup approach will work for this case since they can select up to 5-10 accessories per form and each would need to display a picture.  

[Stephen31 · Accepted solution]

****Update**** 

The below does actually work.  The issue was with the links themselves.  All is working now.

So here is what I'm trying so far, but its not working.  The reference variable for now is called "test_box".  The widget lives in a macro variable named "test_box2".  

u_image_link is the variable that has the url for the image in it.

HTML

<div align="center">
<img src= "{{c.data.url}}">
</div>

Client Script

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

Server Script

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
		
var gr = new GlideRecord('u_accessory');
gr.addQuery('sys_id', input.message);
gr.query();
if(gr.next()) {
data.url = gr.getDisplayValue('u_image_link');

	}
})();

When I try this query below as a background script.

getCurrent();

var currentVar;
var value;

function getCurrent() {
var gr = new GlideRecord('u_accessory');
gr.addQuery('sys_id', '319f8397dbf8eb8093deea42ca961933');
gr.query();
while(gr.next()) {
currentVar = gr.getValue('u_name');
gs.print("The name is " +gr.u_name);
gs.print(currentVar);
value = gr.u_image_link;
gs.print(value);
}
}

And insert the sys_id manually, it does correctly pull the url for the value.  So I believe the above code should also be grabbing the correct SysID and passing it along, but all I get is blank space.