Suggestion: Download button, file icon and mouse-over view for images

Forums vLooup for SharePoint Suggestion: Download button, file icon and mouse-over view for images

Viewing 1 reply thread
  • Author
    Posts
    • #9963
      chgrnet
      Participant

      I am using vLookup for a document library and it would be very nice to have these features:
      1. A button to click that starts the download process.
      2. An icon that shows the file type.
      3. If it is an image, a link that could be moused-over to show a small preview of the image.

      These are all just “nice to have” features I wanted to share. Thanks!

    • #10022
      Alexander Bautz
      Keymaster

      Hi,
      Here is a few functions you can use for #1 and #3. #2 is just a matter of adding the field “DocIcon” as ViewField.

      1: Download link
      Add this to the “Special configuration” in vLookup ViewFields for the field “FileLeafRef”:

      {"function":"showDownloadBtn"}

      Then add this to the Custom JS:

      function showDownloadBtn(a,b){
      	var c = [], iArr = ["doc","docx","xls","xlsx"], v = b.get_item("FileLeafRef"), ext = v.split(".").pop();	
      	if($.inArray(ext,iArr) > -1){
      		// Proper method for other browsers - will open it in IE and not trigger a download
      		c.push("<a href='"+b.get_item("FileDirRef")+"/"+v+"' download>Download</a>");
      	}
      	return c.join("");
      }

      Change the “iArr” to set the file type to activate this button for.

      3: To show images directly, use this code in the “Special configuration” for the ViewField “FileLeafRef” – you can add the same field multiple times if you like to add for example the download link in #1 above.

      {"function":"showImage"}

      Then add this to the Custom JS:

      function showImage(a,b){
      	var iArr = ["png","gif","jpeg","jpg"], v = b.get_item("FileLeafRef"), ext = v.split(".").pop();
      	if($.inArray(ext,iArr) > -1){
      		return "<img src='"+b.get_item("FileDirRef")+"/"+v+"'>";
      	}else{
      		return a;
      	}
      }

      Change the “iArr” to set the file type to activate this button for.

      Best regards,
      Alexander

      • This reply was modified 8 years, 2 months ago by Alexander Bautz. Reason: messed up HTML
      • This reply was modified 8 years, 2 months ago by Alexander Bautz. Reason: Changed code example for download as the "hack" did not work as expected in IE
      • #10415
        chgrnet
        Participant

        Thank you for this code! I am able to use the “FileLeafRef” in the ViewFields, and I do see a link to the file in the vLookup on the form, but the code does not change. I see you ask that the iArr be updated, but there could be any of those file types, so I would not want to limit what shows.

Viewing 1 reply thread
  • You must be logged in to reply to this topic.