Epic application analysts wanted to make training and knowledgebase documents look good for their consumers. The out-of-the-box (OOTB) system-wide SharePoint document library web part lacked readability as a plain list of title links, so I built this easy to maintain responsive web part that grouped document links into columns and colored category boxes.

The web part had to work on all browsers, including IE8, at desktop display size. It had to make grouping, blocking and color assignments easy to maintain, and the overall approach had to be easily replicated by other teams on other SharePoint sites.

Group and block

The first step was to create a "Documents-Lookup" list on the site with three fields. The first field was a plain text field that described groups and subgroups. It used parentheses and colons in an easy to read format that could be sorted and parsed out into individual values by code. The other two fields defined background and border colors for each block.

The next step was to embed these three fields into the site's "Documents" library as lookup columns so changes to the group/subgroup string in the Documents-Lookup list would automatically cascade-update values in the Documents library, allowing analysts to quickly modify groupings and colors.

I also activated a "Link to Document" content type in the library that allowed analysts to avoid having to upload documents already residing elsewhere in the SharePoint system.

The last step was to build an HTM file which displayed the documents when called from a Content Editor Web part on the home page of the site. This HTM file contained all the web part's HTML, CSS styles and JavaScript code, and it resided in a "scripts" document library on the site along with the jQuery Core and SharePoint Web Service library files it depended on.

Results

Since the SharePoint 2010 production platform did not cache HTM files, updates to the HTM file took effect immediately. This made development, testing and deployment fast using a simple text editor like Notepad or Notepad++.

The web part's vertical layout did the best job of handling blocks that contained a wide variation in content height.

The analysts caught on quickly to the setup. They experimented with colors using an online hex color picker, and they tried several ways to name and group their documents.

Happy with the results, they then asked to add tabs to the web part for displaying an alphabetical listing of all their documents. But that's another story.

Meta

Responsible for product development. Assisted with categorization, terminology, document naming and website setup conventions.