Display and click through to attachments on child list

[AdamP]

vLookup currently displays a paperclip icon when you include the “attachments” field, and the child item has one or more attachments.

Would it be possible to actually display a clickable list of the attachments against each child item (rather than having to view each child item and then selecting the attachments there) ?

I can get to the data via REST in the form

/_vti_bin/ListData.svc/ListName?$select=Attachments&$expand=Attachments

so I’m hoping it might be relatively straightforward.

Thanks

Adam

[Alexander Bautz]

Hi,
I have created a code example tested in SP2013. If you use SP2010 the code must be adapted a bit – let me know if this is required.

Add this to the “Special configuration” field for your attachment column in the vLookup configuration:

{"function":"initAttachments"}

Then add this to your custom js textarea in DFFS backend:

function initAttachments(a,item){
	if(item.get_item("Attachments")){
		return "<img style='border:0px;cursor:pointer;' width='16' height='16' alt='Attachments' src='/_layouts/15/images/attach16.png' onclick='getAttachments(\""+item.get_item("ID")+"\");'>";
	}else{
		return "&nbsp";
	}
}

function getAttachments(id){
var url = _spPageContextInfo.webServerRelativeUrl+"/_api/lists/getByTitle('The DisplayName of your list')/items?$filter=Id eq "+id+"&$select=AttachmentFiles,Title&$expand=AttachmentFiles";
	$.getJSON(url, 
		function(data) {
			var b = [];			
			spjs.$.each(data.value[0].AttachmentFiles,function(i,o){
				b.push("<div><a href='"+makeAbsUrl(o.ServerRelativeUrl)+"' target='_blank'>"+o.FileName+"</a></div>");
			});
			spjs.dffs.dlgBox(b.join(""),true);
		}		
	)
}

Change “The DisplayName of your list” to your listname.

This should make the paperclip clickable, and the attachment collection should show in a DFFS dialog.

Let me know how this works out.

PS: This requires a relatively recent version of vLookup and DFFS to work.

Alexander

[AdamP]

Thank you Alexander

Your response to feedback and requests is outstanding!

Unfortunately we are still on SP2010 at the moment – what would the code changes be to make it work here?

Adam

[Alexander Bautz]

Here is a modified version that should work in SP2010:

function getAttachments(id){
var url = _spPageContextInfo.webServerRelativeUrl+"/_vti_bin/ListData.svc/TheNameOfTheList("+id+")/Attachments";
	$.getJSON(url, 
		function(data) {
			var b = [];			
			spjs.$.each(data.d.results,function(i,o){
				b.push("<div><a href='"+o.__metadata.media_src+"' target='_blank'>"+o.Name+"</a></div>");
			});
			spjs.dffs.dlgBox(b.join(""),true);
		}		
	)
}

Change “TheNameOfTheList” with the name of your list like it is shown in the “href” attribute when you access this URL:

https://YourSiteUrl.com/YourSite/_vti_bin/ListData.svc

The record looks like this:

<collection href="TasksListTest">
<atom:title>TasksListTest</atom:title>
</collection>'

Alexander

[AdamP]

Hi Alexander, thanks for the modified code.

We’re very close with this, just a couple of issues that have shown up…

For clarity,a summary of what I’ve ended up with;

CustomJS area of the form (note I’ve edited the image used for the paperclip to a SP2010 path instead of a SP2013 one) ;

function initAttachments(a,item){
	if(item.get_item("Attachments")){
		return "<img style='border:0px;cursor:pointer;' width='16' height='16' alt='Attachments' src='/_layouts/images/attachhd.gif' onclick='getAttachments(\""+item.get_item("ID")+"\");'>";
	}else{
		return "&nbsp";
	}
}

function getAttachments(id){
var url = _spPageContextInfo.webServerRelativeUrl+"/_vti_bin/ListData.svc/Comments("+id+")/Attachments";
	$.getJSON(url, 
		function(data) {
			var b = [];			
			spjs.$.each(data.d.results,function(i,o){
				b.push("<div><a href='"+o.__metadata.media_src+"' target='_blank'>"+o.Name+"</a></div>");
			});
			spjs.dffs.dlgBox(b.join(""),true);
		}		
	)
}

And in the “Special Configurations” text area for the attachments field on the vLookup config;

{"function":"initAttachments"}

This works well – when the paperclip is clicked you get a DFFS dialogue with the attachments listed – see screenshot. The only improvement here would be to have a slightly less overbearing overlay, so that the content behind the dialogue is still shown (similar to OOTB sharepoint dialogue boxes).

The issue I’ve discovered is that with this code set up – the display of child items via the magnifying glass icon breaks – see second screenshot. It looks like it’s losing the item ID of the child item when the child form loads. Field values are filled with “FieldInternalName + ‘field value’ “.

Any idea of the what’s happening here? It’s almost perfect apart from this one glitch.

Thanks

Adam

Attachments:

1. 

   vlookupComments-Attachments-listed-02-11-2015-18-30-21.png
   

2. 

   vLookupComments-unable-to-display-child-item-02-11-2015-18-28-14.png
   

[Alexander Bautz]

Hi,
I’m not able to see why the display item should break – are you sure this code is to blame?

Use this modified code to load the contents in a “normal” SharePoint dialog:
Replace this line:

spjs.dffs.dlgBox(b.join(""),true);

with this:

$("#temp_attPlaceholder").remove();
			$("body").append("<div id='temp_attPlaceholder'>"+b.join("")+"</div>");			
			SP.UI.ModalDialog.showModalDialog({
				"title":"Attachments",
				"html":$("#temp_attPlaceholder")[0],
				"width":300,
				"height":$("#temp_attPlaceholder").height() + 50,
				"showClose":true			
			});

Alexander

[AdamP]

Hi Alexander

Your logic is correct as usual. The broken display form initially only appeared to happen with the initAttachments function in the special configurations area (repeated several times with/without).

I’ve repeated the tests again today and have seen the same broken display of the child list without the initAttachments function being called – primarily when using dialogs but on a couple of occasions with forms displayed as complete pages. I’m not sure why, but the issue seems to be occurring more frequently now.

The closest I’ve got to working out what’s going on so far is an anomaly in the child form url – the & characters are replaced with %26 – I think that’s potentially invalidating the item ID and causing the child form to display without any values.

Any idea what to try next?

[AdamP]

Another update;

The “normal” SP dialog code didn’t help.

However I found that if I tick “Open form in new dialog” the problem appears to go away.

So..using the same dialog for parent and child forms, it appears that the child form is (usually) being passed a %26 instead of an &, but I have no idea where to look to try to resolve (other than sticking with a “new” dialog box.

[Alexander Bautz]

I’m glad you found a solution. I’ll make a note of your findings and see if I can recreate it and make a fix.

Alexander

[Craig Campbell]

Hi alexander I am trying to implement this on one of my lists. I can get the Paper Clip to appear and make it clickable but it does not bring anything up. Can you help me out with this?

[Alexander Bautz]

Hi,
Sorry for the delay. You must bring up the developer console (hit F12 > Console) and look for errors there.

Alexander

[Author]

Posts