Tile layout webpart for SharePoint documents

December 26, 2015

More than one group had been looking for something like this, so I augmented the out-of-box SharePoint site with an HTM file that would work on any site.

I first created a Documents-Lookup list on the site with three columns: one plain text field for a string that described groups and subgroup (with content in parentheses for ordering), one column for the tile background color of the tile, and one column for the tile border.

I then added these fields to the Documents library as lookup columns, so the site owners could categorize documents on upload, and then added a “Link to Document” content type which allowed the site owners to add documents to the library that were really just links to documents residing elsewhere in the SharePoint system.

I then called these fields from the Documents library from a Content Editor web part on the page that referred to an HTM file in a Scripts document library on the site.

Note: if the SharePoint 2010 web server caches all JS and CSS files, just put the JS and CSS code inside the HTM file like below:

<!DOCTYPE HTML>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Workflows v1.0</title>
<style type="text/css">#workflows { margin: 0; padding: 0; } #workflows ul { margin: 0; padding: 0; } #workflows table { border-collapse: collapse; width: 100%; } #workflows td { vertical-align: top; } #workflows li { list-style: none; } #workflows h3 { color: #9ac6ff !important; font-size: 12pt; font-weight: normal !important; padding: 5px 0 0 0; text-align: center; } #workflows h4 { color: #ff6600; font-size: 12pt; font-weight: normal !important; margin: 0; padding: 5px 0; text-align: center; } #workflows a { font-size: 10pt; } #workflows .group { display: inline-block; margin: 0; vertical-align: top; } #workflows .group-outer { vertical-align: top; margin: 10px 5px; } #workflows .group-inner { background: #fff; border-radius: 10px; margin: 0 5px; padding: 0 0 10px 0; } #workflows .group-item { line-height: 1; padding: 10px 10px 0 10px; } #workflows .base { background-color: #e6e6e6; background-color: #fff; } </style>
<script src="/scripts/webparts/workflows/js/jquery-1.7.2.min.js" language="javascript" type="text/javascript"></script>
<script src="/scripts/webparts/workflows/js/jquery.SPServices-0.7.2.min.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">(function($) { $(document).ready(function(){ var ar_docs=[], ar_grp=[], ar_sgrp=[]; var initalheightbugfix = 0; $('#workflows').parent('div').css('margin','0'); $('.welcome-content').next('table').find('td').first().css('width','70%'); getDocs(); function getDocs() { // Get list content and create HTML $().SPServices({ operation: 'GetListItems', webURL: '/sss/departments/anesth', listName: 'Documents', async: false, CAMLQuery: '<Query></Query>', CAMLViewFields: '<ViewFields>' + '<FieldRef Name="ID" />' + '<FieldRef Name="Group" />' + '<FieldRef Name="Name" />' + '<FieldRef Name="URL" />' + '</ViewFields>', CAMLRowLimit: 0, completefunc: function (xData, Status) { var k=0; var k2=0; var u1=[]; var u2=[]; $(xData.responseXML).SPFilterNode('z:row').each(function(k) { var id = $(this).attr("ows_ID"), file = !$(this).attr("ows_FileLeafRef")?'':$(this).attr("ows_FileLeafRef").split(';#')[1], group = !$(this).attr("ows_Group")?'':$(this).attr("ows_Group").split(';#')[1].split(':')[0], subgroup = !$(this).attr("ows_Group")?'':$(this).attr("ows_Group").split(';#')[1].split(': ')[1], name = !$(this).attr("ows_FileLeafRef")?'':$(this).attr("ows_FileLeafRef").split(';#')[1].replace(/^Anesthesia - /,'').split('.')[0], url = !$(this).attr("ows_URL")?'':$(this).attr("ows_URL").split(',')[1]; // build array of documents ar_docs[k] = { id:id, file:file, group:group, name:name, subgroup:subgroup, url:url }; // build array of unique groups if ($.inArray(group,u1)==-1 &amp;&amp; !!group) { ar_grp.push(group); u1.push(group); } // build array of unique subgroups if ($.inArray(subgroup,u2)==-1 &amp;&amp; !!subgroup) { ar_sgrp[k2]={group:group, subgroup:subgroup} k2++ u2.push(subgroup); } }); } }); } // sort arrays ar_grp.sort(); ar_sgrp.sort(function(m1,p1){ var m=(''+m1.subgroup).toLowerCase(), p=(''+p1.subgroup).toLowerCase(); if(m >p) return 1; if(m < p) return -1; return 0; }); // store HTML in variable var h=''; // build HTML $.each(ar_grp, function(i,v) { // remove order number from group text var g = v.split(')')[1].replace(/^s*/,''); // wrap groups in UL container h+=' <div class="group">'; // add group title h+= ' <h3 class="ms-standardheader">'+ g +'</h3>'; for (var i=0,len=ar_sgrp.length;i<len;i++) { if (ar_sgrp[i].group === v) { // add subgroup item in block to display in line h+=' <div class="group-outer">'; // contain content in nice DIV with borders var color = 'base '+g.toLowerCase().split(' ')[0]; h+=' <div class="group-inner '+color+'">'; // remove order number from subgroup text var sg = ar_sgrp[i].subgroup.split(')')[1].replace(/^s*/,''); h+= ' <ul>'; // add subgroup title h+= ' <li><h4>'+ sg +'</h4></li>'; // add list of links h+= filterOnSubgroup(ar_sgrp[i].subgroup); h+= '</ul>'; h+= '</div>'; h+='</div>'; } } h+= '</div>'; }); // append HTML to page $('#workflows').append(h); // even the width of boxes in each workflow group setEqualWidth($(".group")); $(window).resize( function () { setEqualWidth($(".group")); }); // set objects to equal height function setEqualWidth(w) { // for each item in object w.each ( function() { // set this item's width in percent (with fluff) $(this).css('width',(100/w.length) + '%'); } ); } // filter documents on subgroup function filterOnSubgroup(itm) { // start with empty html var g = ""; var r=[]; // filter the documents array for a list of items matching subgroup value // filter array by item for (z=0,len=ar_docs.length; z<len; z++) { if (ar_docs[z].subgroup.indexOf(itm) >-1) { r.push(ar_docs[z]); } } r.sort(function(m1,p1) { var m=(''+m1.name).toLowerCase(), p=(''+p1.name).toLowerCase(); if(m >p) return 1; if(m < p) return -1; return 0; }) /// transform the result into a string for (var i=0,len=r.length;i<len;i++) { if (r[i].url === '') { var link = 'http://in.providence.org/Docs/'+r[i].file; g += ' <li class="group-item"><a class="ms-vb" href="' + link + '" target="_blank">' + r[i].name + '</a></li>'; } else { var link = r[i].url; g += ' <li class="group-item"><a class="ms-vb" href="' + link + '" target="_blank">' + r[i].name + '</a></li>'; } } return g; } }); }(jQuery)); </script>
</head>
<body>
<div id="workflows">
</div>
</body>
</html>

The setup was straightforward enough that the non-technical SharePoint site owners could understand how to manipulate and reorder the documents. Updates to the Documents-Lookup list would automatically update the content in the Documents library, and a few notes in the list and library explaining how to find and enter color hex numbers made tiles easy to color.

Leave a Reply

Your email address will not be published. Required fields are marked *