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

Stephen31 · ‎10-02-2018

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.

Stephen31 · ‎10-09-2018

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

View solution in original post

SatheeshKumar · ‎10-10-2018

is your problem solved? or still looking on this issue?

Stephen31 · ‎10-10-2018

Still trying to figure this one out. I considered making an image variable on the records instead of the link to see if that helped but somehow the image type is non existent in our instance so that's not an option. Put a high ticket in for that. But the url way should still work with the code above I believe and not sure why it isn't.