{"id":138,"date":"2015-10-25T16:10:34","date_gmt":"2015-10-25T15:10:34","guid":{"rendered":"http:\/\/www.italkcode.net\/?p=138"},"modified":"2016-01-25T16:22:01","modified_gmt":"2016-01-25T15:22:01","slug":"show-attachment-links-in-a-callout","status":"publish","type":"post","link":"https:\/\/commonware.nl\/?p=138","title":{"rendered":"Show attachment links in a callout"},"content":{"rendered":"<p>After hearing users complain about not knowing how many or which attachments are attached to a list item.<br \/>\nI&#8217;ve came up with a simple solution for this inconvinience, by using JSLink on the attachment column and create a callout to list the attachment(s) and allowing users to open them.<\/p>\n<p>The following code block will override the default attachment column template.<\/p>\n<pre lang=\"javascript\">\/\/ Field template for attachments field\r\n\/\/ to create a callout with the attachments of a listitem\r\n\r\n(function () {\r\n    var overrideCtx = {};\r\n\r\n    overrideCtx.Templates = {};\r\n    overrideCtx.Templates.Fields = {\r\n        \"Attachments\": {\r\n            \"View\": AttachmentsViewTemplate\r\n        }\r\n    };\r\n    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);\r\n})();\r\n\r\n\/\/ Create view template for the attachments field\r\nfunction AttachmentsViewTemplate(ctx) {\r\n    var attachments = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];\r\n    if (attachments == 0)\r\n        return '';\r\n\r\n    var itemId = ctx.CurrentItem.ID;\r\n    var listTitle = ctx.ListTitle;\r\n    \/\/ Create a new element and set the id to ensure we can register the callout on it\r\n    var span = document.createElement('span');\r\n    span.setAttribute('id', 'attachmentsButton' + itemId);\r\n    var img = document.createElement('img');\r\n    img.setAttribute('src', '\/_layouts\/15\/images\/attach16.png?rev=23');\r\n    img.setAttribute('style', 'width: 16px; height: 16px; border: 0; cursor: pointer;');\r\n    span.appendChild(img);\r\n\r\n    CreateAttachmentCallout(itemId, listTitle);\r\n\r\n    return span.outerHTML;\r\n}\r\n<\/pre>\n<p>In the CreateAttachmentCallout method the logic is written to get the list item attachments and create the callout.<\/p>\n<pre class=\"lang:js decode:true \">\/\/ Create the callout registration for the given item\r\nfunction CreateAttachmentCallout(itemId, listTitle) {\r\n\r\n    var queryUrl = ctx.HttpRoot + \"\/_api\/web\/lists\/getbytitle('\" + listTitle + \"')\/items(\" + itemId + \")\/AttachmentFiles\";\r\n\r\n    EnsureScriptFunc(\"callout.js\", \"Callout\", function () {\r\n        $.ajax({\r\n            url: queryUrl,\r\n            accepts: {\r\n                json: \"application\/json;odata=verbose\"\r\n            },\r\n            method: \"GET\",\r\n            headers: { \"Accept\": \"application\/json; odata=verbose\" },\r\n            success: function (data) {\r\n                if (data) {\r\n                    var attachments = \"\";\r\n                    $.each(data.d.results, function () {\r\n                        attachments += '&lt;li&gt;&lt;a href=\"' + this.ServerRelativeUrl + '\" target=\"_blank\"&gt;' + this.FileName + '&lt;\/a&gt;&lt;\/li&gt;';\r\n                    });\r\n                    \/\/ create the callout\r\n                    var targetElement = document.getElementById('attachmentsButton' + itemId);\r\n                    var callout = CalloutManager.getFromLaunchPointIfExists(targetElement);\r\n                    if (callout == null) {\r\n                        var calloutOptions = new CalloutOptions();\r\n                        calloutOptions.ID = 'notificationcallout';\r\n                        calloutOptions.launchPoint = targetElement;\r\n                        calloutOptions.beakOrientation = 'leftRight';\r\n                        calloutOptions.title = 'Attachment(s)';\r\n                        calloutOptions.content = '&lt;ul&gt;' + attachments + '&lt;\/ul&gt;';\r\n                        var callout = CalloutManager.createNewIfNecessary(calloutOptions);\r\n                    }\r\n                }\r\n            },\r\n            error: onQueryError\r\n        });\r\n    });\r\n}\r\nfunction onQueryError() {\r\n    _notifyId = SP.UI.Notify.addNotification(\"The attachment buttons could not be created, please reload the page or contact the administrator.\", false);\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>Put the both script together into one js file and upload it to the Style Library. Afterwards<\/p>\n<div id=\"attachment_187\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/commonware.nl\/wp-content\/uploads\/2014\/11\/attachment-callout.png\" rel=\"attachment wp-att-187\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-187\" class=\"size-medium wp-image-187\" src=\"https:\/\/commonware.nl\/wp-content\/uploads\/2014\/11\/attachment-callout-300x162.png\" alt=\"Attachment callout\" width=\"300\" height=\"162\" srcset=\"https:\/\/commonware.nl\/wp-content\/uploads\/2014\/11\/attachment-callout-300x162.png 300w, https:\/\/commonware.nl\/wp-content\/uploads\/2014\/11\/attachment-callout.png 637w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-187\" class=\"wp-caption-text\">Attachment callout<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>After hearing users complain about not knowing how many or which attachments are attached to a list item. I&#8217;ve came up with a simple solution for this inconvinience, by using JSLink on the attachment column and create a callout to list the attachment(s) and allowing users to open them. The following code block will override [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[4,5,6],"tags":[],"class_list":["post-138","post","type-post","status-publish","format-standard","hentry","category-callouts","category-jslink","category-sharepoint-2013"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/commonware.nl\/index.php?rest_route=\/wp\/v2\/posts\/138"}],"collection":[{"href":"https:\/\/commonware.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/commonware.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/commonware.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/commonware.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=138"}],"version-history":[{"count":5,"href":"https:\/\/commonware.nl\/index.php?rest_route=\/wp\/v2\/posts\/138\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/commonware.nl\/index.php?rest_route=\/wp\/v2\/posts\/138\/revisions\/193"}],"wp:attachment":[{"href":"https:\/\/commonware.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/commonware.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/commonware.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}