Show Attached Images in View Form

[leif_frederikse]

Hi,

I have a form that I use for construction site inspections. I am using the "Attachments" control to take pictures and store them on the form.

My questions are:

1) How can I make a View form that shows the actual images in stead of just links?

2) How can I make the Sharepoint list view also show (thumbnails of) the images directly in the list instead of just the paperclip icon?

I know that question 2 is not specifically Nintex related but maybe I get lucky and some of you have had the same requirement ;-)

Regards

Leif

[andrewg · Accepted solution]

Unfortunately, the view form cannot display a thumbnail natively of attachments. The list view though could potential show a thumbnail, but this would require a custom field or Display Template to be developed.

[c_odegard]

In response to #1: My suggestion to use jquery (NWF$) to get the attachment URLs for the current item, and then to add them to the form through a DIV element defined inside a Multi Line Textbox This method works, but it's pretty hacky and may not survive an update. Your mileage may vary. 

Note: for this I am using SharePoint 2016 on-premises. This will probably not work for SharePoint Online.

1. Add a Multi Line Textbox to the form. In the settings, make it use Enhanced Rich Text. Set the Default value to an empty DIV with an ID. I used atch:
   
2. Next you need to link a JavaScript file to the form. You can either embed JS directly into the form through the "Custom JavaScript" setting, or link to an external file through the "Custom JavaScript Includes" setting. I prefer the latter because then you can debug without needing to re-publish the form a bunch of times. Also, it accepts relative URLs.
   
3. Create a Validation rule to disable the Multi Line Textbox. Set the condition to true so that it will always be valid. We do this because, in Edit and New mode, the control will still function as an input field, meaning the user could potentially erase the DIV or break the form just by typing into it. We use a Validation Rule because it is applied to the field after the Form renders. This way, the field is still visible and active on the page, but the user cannot change its contents. 
   
4. in the JavaScript file, start with the Nintex method needed to execute code immediately after the Form loads. The RegisterAfterReady method works for this purpose, and is just one of several Nintex Form Events.
   
   NWF.FormFiller.Events.RegisterAfterReady(function () {

      console.log('Form loaded!');

      // Do stuff

   });
   
   
   To get the attachments and display them in the DIV, we need to do the following:
   1. Get the ID of the current List Item
   2. Make a REST call to the parent list to get an array of the current item's attachment URLs
   3. Parse the query response 
   4. For each attachment URL, create an IMG element in the multiline control
   5. Add each image to the DIV in the Multi Line Textbox
5. First let's get the current item ID. You can use the Nintex Item Property ID for this ({ItemProperty:ID}) if you are embedding your code in the form through the Custom JavaScript setting. If you are using a JavaScript include, then you can use a SharePoint method instead: GetUrlKeyValue(). This parses the browser's location and returns the value of the given parameter. In this case, we want the ID, which is conveniently included in every Item's URL:
   
   
   var itemId = GetUrlKeyValue('ID'); // returns 114
6. Now for the REST query. I use REST here because I think it's more straightforward than JSOM, and also you can take advantage of NWF$ to accomplish the task. 
   
   The REST endpoint for getting Attachments is:
   var url = siteURL + "/_api/web/lists/getByTitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles";
   
   Here is the code for the REST call using NWF$:
   
   // var siteUrl, listName;

   var itemId = GetUrlKeyValue('ID');

   var url = siteURL + "/_api/web/lists/getByTitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles";

   
   

   var query = NWF$.ajax({

      url: url,

      type: 'GET',

      headers: {

         /* need this to get JSON, otherwise it returns XML */

         'accept': 'application/json; odata=verbose'

      }

   });
7. Now we deal with the query response. Assuming we actually have some attachment URL's to work with, we create an IMG element from each one. I've styled them as thumbnails here so that they don't overflow the Multi Line Textbox.
   
   /* when the query returns data */

   query.done(function (data) {

      /* get the actual results from the data blob */

      var results = data.d.results;

      /* identify the element to hold the images */

      var target = NWF$('#atch');

   
   

      /* create an IMG element for each result,

      i.e. each attachment URL */

      var attachments = results.map(function (result) {

         return NWF$('<img/>', {

            src: result.ServerRelativeUrl,

            alt: result.FileName,

            /* style the images as thumbnails */

            style: "margin:5px;width:100px;height:100px;float:left;"

            });

         });

   
   

      /* add the images to the target element */

      attachments.forEach(function (element) {

         element.appendTo(target);

      });

   });

   
   

   query.fail(function () {

      console.log("Query Failed");

   });
   
   Assuming this all works, this is the result*:
   
   
8. Customize as needed. 

*In this example form, I had started fresh, then deleted all of the controls except for the Attachments and the Multi Line Textbox.

Also, I put the complete script in a Gist here: nintex-show-attachments.js

[c_odegard]

As for Question #2:

In SharePoint on-premises, at least, you can show whatever you want in a list view by using Client-Side Rending. Here is a very detailed explanation of how that works: SharePoint 2013 Client Side Rendering: List Views - CodeProject 

I have done this once before and I can say it's probably not worth the trouble, especially if you are using SharePoint Online. In that case, I don't think Modern Pages even support list view customization.

If you find you need to upload a lot of images and associate them with specific sites you are visiting, I would suggest instead uploading to a Picture Library and using folders, metadata, or workflows to assign them metadata.