Grab multiple record images/attachments and display on Service Portal widget?

[matt v_]

Update:  I have figured out how to cycle through the queried attachments on the HTML side.  Now just stuck with how to pass the variable to my modal so that clicking on a thumbnail brings up the same image at 100%.

I have a requirement to show some location-specific information in a widget, based on the location selected.  This includes a few images, but I don't yet know how many per location (and this could change over time).

At first, I had thought this one 1:1 and created a simple file upload field to store the image, which works fine.  However, I don't believe we can add multiple files in one field, and since I don't want to add a static number of new fields, my next thought is to upload them as attachments to the location record.

So my questions:

1. Is there a better approach that I may not have considered?
2. If this is really the best way, how would I go about finding/storing the related attachments, and then looping through them in HTML?

Thanks for any help/suggestions.

[Phonsie Hevey1]

Hi Matt,

Based on your code I was able to get images which were attached to a record to show up in the Service Portal.

HTML

<div ng-repeat="image in data.images"> 
      	<img class="img-responsive catalog-item-image" alt="" style="display: inline" ng-src="/sys_attachment.do?sys_id={{::image.sys_id}}&view=true" />  		
      {{::image.name}}
</div>	

After the sys_id {{::image.sys_id}} should appear. 

Then in the server side script I have the following

var propertyImages = [];
       
var attachmentGr = new GlideRecord('sys_attachment');
attachmentGr.addQuery('table_name', 'u_idealista_properties');
attachmentGr.addQuery('table_sys_id', grProperty.getValue("sys_id"));
attachmentGr.query();		
				
while (attachmentGr.next() && attachmentGr.file_name.toString() != "thumbnail.jpg") {						
   var thisPropertyImage = {};
   thisPropertyImage.sys_id = attachmentGr.sys_id.toString();
   thisPropertyImage.name = attachmentGr.file_name.toString();			
   propertyImages.push(thisPropertyImage);			
}
data.images = propertyImages;
        

I think the problem is with your syntax. In my case I'm pushing an object to the array and then that gets stored in the data.images. The ng-repeat then repeats for each image in the data.images and I use the sys_id property of the object in the HTML. I hope that helps!

[Phonsie Hevey1]

Ah, sorry I can see that this portal is actually stripping out the curly brackets here now.

sys_id={{::image.sys_id}}