Epic application analysts wanted to make training and knowledge base documents look good for anesthesiologists, so I built this easy to maintain web part that grouped document links in colored category boxes and resized well to fit on any display device.
Out-of-the-box (OOTB) web parts on their SharePoint site made their content look no better than a directory of files in folder. And none of the analysts were SharePoint experts, nor did they want to be. They just wanted to post documents and get back to their day job. In other words, they wanted a zero-maintenance way to group documents in blocks on a page.
The web part had to respond gracefully on any desktop display size and work in all major browsers, including Internet Explorer 8. It also had to make grouping, blocking, and color assignments easy to do in the document library.
More than one enterprise team had been looking for something like this, so the scope volunteered to formulate an approach could be replicated on multiple sites.
The first step created a "Documents-Lookup" list on the site with three columns: one plain text column for a string that described groups and subgroups (with content in parentheses for ordering), one column for defining the background color of a subgroup block, and one column for defining the color of the subgroup block's border color.
The next step added these columns to the site's "Documents" library as lookup columns. Changes to the group/subgroup string in the Documents-Lookup list, therefore, would automatically cascade-update any existing selections in the Documents library. This allowed analysts to quickly categorize documents any way they wanted.
Activating a "Link to Document" content type in the library then allowed the analysts to avoid duplication of work by simply linking to documents already residing elsewhere in the SharePoint system.
These were the basic list/library setup steps that any SharePoint site owner could learn without special training.
The HTM file resided in another document library on the site called "scripts," and a Content Editor Web Part on the home page then called that file to display documents.
The original web part organized subgroups horizontally across the page under group headings in a responsive design that resized browser window. But the vertical layout did a better job of handling blocks with a wide variation in content height.
Manipulating and reordering the documents on the page was simple. Text in the description of each color field pointed to an online hex color picker made the tile colors easy to configure. The analysts caught on quickly.
The SharePoint 2010 production platform cached all CSS and JS files, so they ended up inside the HTML file. This made development fast, and non-developers could understand the code enough to tweak it from a simple text editor like Notepad.