Ensure attachments open in a new tab

Forums Dynamic Forms for SharePoint Ensure attachments open in a new tab

Tagged: 

Viewing 0 reply threads
  • Author
    Posts
    • #29907
      Alexander Bautz
      Keymaster

      The default behavior in a SharePoint EditForm is to open the attachments (when clicked) in the SAME window as the edit form – effectively cancelling out all the changes you may have made in the current session.

      Adding this snippet to your Custom JS ensures all attachments are opened in a new tab – and also previews any attached images.

      (function() {
          var delImgTicker = {};
          jQuery("#idAttachmentsTable tr").each(function (i, tr) {
              var trID = tr.id.replace(/\{|\}/g, "");
              if (jQuery("#img_" + trID).length === 0) {
                  jQuery(tr).find("td:first").css({ "width": "50px", "white-space": "nowrap", "padding-right": "5px" });
                  jQuery(tr).find("td:first a").each(function (i, a) {
                      var h = jQuery(this).attr("href").toLowerCase(), e = h.substring(h.lastIndexOf("."));
                      if (h.indexOf("http") !== 0) {
                          // Don't remove the delete link
                          return;
                      }
                      // Ensure the link opens in a new tab
                      jQuery(a).attr("target", "_blank");
                      // Remove the default onclick
                      jQuery(a).removeAttr("onclick");
                      if (e === ".png" || e === ".gif" || e === ".jpg" || e === ".jpeg") {
                          // Capture deletion of the attachement
                          delImgTicker[tr.id] = setInterval(function () {
                              if (document.getElementById(tr.id) === null) {
                                  jQuery("#img_" + trID).remove();
                                  clearInterval(delImgTicker[tr.id]);
                              }
                          }, 2000);
                          // Add preview of images
                          jQuery(a).parents("tr:first").after("<tr><td colspan='2'><img id='img_" + trID + "' src='" + makeAbsUrl(h) + "' style='max-width:500px;'/></td></tr>");
                      }
                  });
              }
          });
      })();

      Please ask any questions in the comments below.

      Alexander

Viewing 0 reply threads
  • You must be logged in to reply to this topic.