Embedding attachments to link to child records on a Portal page

[sajerond]

We have built a Portal Page and successfully embed attachments on the page based on the parent record.  We also want to link attachments that have been added to a child record to the child reference on the page. The issue is that while I am getting an attachment, if there are more than one child record meeting the criteria, it only retrieves one image from one of the child records and associated it with all child records.  Any thoughts would be appreciated

For Example:

Child record:

CR1  has Attachment 1, Attachment 2

CR2  has no attachment

CR3  has Attachment 3

Result:

CR1  Attachment 3

CR2 Attachment 3

CR3 Attachment 3

(if I remove Attachment 3 from the child, Attachment 1 and 2 will embed to all three)

Widget HTML

Server Script:

I feel that I'm close but cannot determine what I'm missing so the correct child Image Attachments are embedded with the related child record

[Nick Parsons · Accepted solution]

Your issues:

• Server Code: For each child incident that you iterate, you're clearing and resetting the data.propertyImages array to an empty array []. Thus it will only hold the images from the last incident record you iterate.
• Server Code: You don't associate specific images with specific child records, currently you're trying to just push all of them into an array with no association for which child_incident record they came from.
• Client code: In your HTML, you're using an <id> which AFAIK isn't valid (I don't believe it's an angular directive), so not sure what this is supposed to be, but I suggest replacing that with a <span>.

To fix your server code issues, add propertyImages as a new property to fndhigh to store an array of associated images for the current child_incident you're iterated on (see code comments below):

// ... the rest of your code ...
while (findHigh.next()) {
  var fndhigh = {};
  fndhigh.number = findHigh.getDisplayValue('u_number');
  fndhigh.recommend = findHigh.getDisplayValue('u_recommendation');
  fndhigh.propertyImages = []; // to store images associated with current findHigh GlideRecord

  var attachmentGr = new GlideRecord('sys_attachment');
  attachmentGr.addQuery('content_type', '!', 'application/pdf');
  attachmentGr.addQuery('table_name', 'child_incident');
  attachmentGr.addQuery('table_sys_id', findHigh.getValue("sys_id"));
  attachmentGr.query();
  while (attachmentGr.next() && attachmentGr.file_name.toString() != "thumbnail.jpg") {
    var thisPropertyImage = {};
    thisPropertyImage.sysid = attachmentGr.table_sys_id.toString();
    thisPropertyImage.name = attachmentGr.file_name.toString();
    // push the image information to fndhigh's image array
    fndhigh.propertyImages.push(thisPropertyImage); 
  }
  // Once we're done populating fndhigh, we can push it:
  data.findhighresults.push(fndhigh);
}

Now on the client side within your template, you can perform an ng-repeat on fndhigh.propertyImages:

<p ng-repeat="thisPropertyImage in fndhigh.propertyImages">
  <span class="imgname">{{::thisPropertyImage.name}}</span>
  <img class="img-responsive catalog-item-image" ng-src="/sys_attachment.do?sys_id={{::thisPropertyImage.sysid}}&view=true" />
</p>

PS: Next time, please don't post your code as images, it just makes it harder for people to help you 🙂

[sajerond]

Nick,  Thanks so much.  Apologies for the screen prints.  I was thinking similar to you but couldn't figure out how to essentially reference the data with the image.  So I'm getting the correct image name associated with the record but the Image no longer appears and the code for the attachment and the client looks like it should work.  

while (attachmentGr.next() && attachmentGr.file_name.toString() != "thumbnail.jpg") {
    var thisPropertyImage = {};
    thisPropertyImage.sysid = attachmentGr.table_sys_id.toString();
    thisPropertyImage.name = attachmentGr.file_name.toString();
    // push the image information to fndhigh's image array
    fndhigh.propertyImages.push(thisPropertyImage); 

This is what I'm seeing.  The 'check.jpg' references the correct record and is named properly.  The image did appear prior.  

[sajerond]

Hi nick,  Thanks for the response.  I had to make an update to my code of this "

 thisPropertyImage.sysid = attachmentGr.table_sys_id.toString();

 to this 

 thisPropertyImage.sysid = attachmentGr.sys_id.toString();

for this image to show but it works.  Thanks so much.