Ashok Raja's Blog
Retrieving List Attachment and Document URLs in SharePoint 2013 REST API with Knockout Js for SharePoint (KoSpJs)
by Ashok Raja T 5. June 2014 19:52

This article on retrieving List Attachment URLs and Document URLs is a continuation of series on Knockout Js with SharePoint 2013 REST API.

Handling both Document URLs and Attachment URLs are bit tricky in SharePoint 2013 REST API as the data is returned as nested Json Objects. KoSpJs eases this complexity of binding of SharePoint json data with html elements

To start with let us see how to retrieve and display URLs of documents from a document library

Note : For other articles on this series checkout the bottom of the post

Document URLs

spHref and spAttr binders of KoSpJs can be used to bind document URLs. The below code snippet shows how to perform this. For this example I have created a document library named “Team Docs” and have drag and dropped a bunch of documents to it. I have also assigned values for “Title” field so that it can be showed as display text for hyperlinks rather than displaying the raw URLs

 <div>
     <table data-bind="template: { name: 'allDocs-template', foreach: Docs }" width="100%"></table>
 </div>
 <script type="text/html" id="allDocs-template">
     <tr>
         <td>
             <a  href="#" data-bind="spHref:$data,sourceType:'meta',displayField:'media_src'"></a>
         </td>
         <td>
             <a href="#" data-bind="spHref:$data,sourceType:'meta',displayField:'media_src',displayText:Title"></a>
         </td>
         <td>
             <a href="#" data-bind="spHref:$data,sourceType:'meta',displayField:'media_src',displayText:'Download Document'"></a>
         </td>
         <td>
             <span data-bind="spAttr:$data,sourceType:'meta',displayField:'media_src',attrName:'title',displayText:Title"></span>
         </td>
     </tr>
 </script>
 <script type="text/javascript">
     function DocsModal() {
         var self = this;
         self.Docs = ko.observableArray([]);
         $.getJSON(_spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/TeamDocs",
             function (data) {
                 if (data.d.results) {
                     self.Docs(ko.toJS(data.d.results));
                 }
             }
       );
     }
     ko.applyBindings(new DocsModal());
 </script>

 kospdocs

Attachment URLs

spUrl binder of KoSpJs can be used to bind Attachment URLs from SharePoint List Attachments. The below code snippet shows how to bind attachment URL .This samples targets a custom list named “Doc Details

 <div id="docDetails">
     <table data-bind="template: { name: 'allDocsDetails-template', foreach: DocsDetails }" width="50%"></table>
 </div>
 <script type="text/html" id="allDocsDetails-template">
     <tr>
         <td>
             <div data-bind="spUrl:Attachments,multi:true, dataFormat:'<br/>'"></div>
         </td>
         <td>
             <span data-bind="spUrl:Attachments,multi:true"></span>
         </td>
     </tr>
 </script>
 <script type="text/javascript">
     function DocsDetailModal() {
         var self = this;
         self.DocsDetails = ko.observableArray([]);
         $.getJSON(_spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/DocDetails?$expand=Attachments",
             function (data) {
                 if (data.d.results) {
                     self.DocsDetails(ko.toJS(data.d.results));
                 }
             }
       );
     }
     ko.applyBindings(new DocsDetailModal(),docDetails);
 </script>
 

 Attach

Note : A list item can accept more than one document as attachment , so it’s mandatory to specify multi:true even though you have attached a single document to the list item
Sl.NoArticle
1Introducing KoSpJs - Knockout binding handlers for SharePoint REST API and SPServices
2Beginning SharePoint development with KoSpJs, REST API and SP Services
3SharePoint Lookup fields, Choice Fields and it's multi select variants in KoSpJs
4Formatting Date, Number Fields in SharePoint REST API and SPServices with KoSpJs
5Binding Hyperlink and Image URLs with KoSpJs in SharePoint REST API and SPServices
6Retrieving and binding User and User Group Details in SharePoint REST API with KoSpJs
7Retrieving List Attachment and Document URLs in SharePoint 2013 REST API with KoSpJs - This Article

Download KoSpJs from CodePlex

blog comments powered by Disqus