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.

[matt v_]

I've come back to this issue and have made a little progress.  I have fixed my query and array; however, I am not getting the images to show up.  I'm not sure if I have the URL correct.

Here's what I have so far.

Server Script:

data.att = [];

var locAtt = new GlideRecord('sys_attachment');
locAtt.addQuery('table_sys_id', locSysId);
locAtt.query();
while(locAtt.next()) {
	data.att.push(locAtt.sys_id.toString());
}

HTML:

<div class="panel-body">
      <center>
        <p>
          (Click thumbnail to enlarge)
        </p>
        <img  ng-repeat="item in data.att" src="/sys_attachment.do?sys_id={{data.att}}&view=true" />
      </center>
    </div>

And here's the output:

Any idea where this is going wrong?

[matt v_]

I'm slowly figuring this stuff out.  My variable was all wrong in the <img> tag, as it was returning all Sys IDs in the array for each time it repeated.  I found out it's just "item" to get what I want.

Updated HTML:

<img ng-repeat="item in data.att" src="/sys_attachment.do?sys_id={{item}}&view=true" />

Ok, cool.  Now it loops through each attachment.  Yeah, I'll need to do something to limit the query to only pull .JPG or .PNG files, but for now we have nothing else attached to any locations.

But there's yet another step.  These are thumbnails and upon clicking will open a modal with the full image.  This worked when it was a reference to a single image field, but now that I have an array, I'm not sure how to force the modal to use the same Sys ID that was in the ng-repeat.

<script type="text/ng-template" id="modalTemplate">
	<div class="modal-dialog modal-custom">
		<div class="modal-body">
			<center><img src="/sys_attachment.do?sys_id={{item}}&view=true" width="100%" /></center>
  	</div>
		<div class="modal-footer text-right">
    	<button class="btn btn-primary" ng-click="c.closeModal()">${Close Map}</button></right>
    </div>
  </div>
</script>

Here, "item" doesn't work the same.  I'm not trying to repeat, so I'm not calling out "item in data.att" anywhere.  How would I ensure that this uses the same value as the <img> line?  Do I have to pass this through openModal() somehow?  Not sure how that works, but here's the Client Script involved:

function($scope, spUtil, $uibModal) {

	var c = this;

	$scope.location = {
		displayValue: c.data.loc.name,
		value: c.data.loc.sys_id,
		name: 'location'
	};

	$scope.$on("field.change", function(evt, parms) {
		if (parms.field.name == 'location')
			c.data.setLocation = parms.newValue;
		
		c.server.update().then(function(response) {		
			spUtil.update($scope);
		})
	});
	
	c.openModal = function() {
		c.modalInstance = $uibModal.open({
			templateUrl: 'modalTemplate',
			scope: $scope,
			size: 'custom'
		});
	}
 
	c.closeModal = function() {
		c.modalInstance.close();
	}
}

[matt v_]

Odd, my variable is getting stripped out above.  Basically the word "item" between a double set of curly brackets.  It's one thing to not show up in the body text, but it's even getting stripped out of the code blocks.

[matt v_]

Anyone know how to pass a specific result in the array into a modal?  I've been searching, but not sure how to translate my findings into ServiceNow.