Design for SharePoint Document Libraries

Abstract

This article describes the development of a design that can be used to publish documents on web pages, particularly documents stored in Microsoft SharePoint Document Libraries.

Objective

The target of this development is to create a neat desing for documents stored in SharePoint Document Libraries that would normally be offered for download in a pretty basic desing (list format).

The development is inspired by SharePoint Slide Libraries, Google+ and the Windows File Explorer

Status quo

A SharePoint Document Library typically looks like the following:

Libraries can contain sub-folders for grouping and organizing documents:

Alternatively, documents can be shown in collapsible groups. This seems to be a "pretty good" layout, although it is still basic. The shown example is grouped by a custom field (Year). This field has been added manually to the list and can easily be edited in a "database-like" tabular view in SharePoint.

While SharePoint Document Libraries offer features like sorting and filtering by default, the layout is primary functional.

Please note: There may be "ready-to-use" third-party add-ons or templates for SharePoint that were not evaluated in the current context. The design primarily follows the vision of the developer.

There are some custom layouts available in SharePoint, e.g. with details or banded rows, that look nice, but those are still far away from what this development is aiming at.

Einfache Tabelle

Dokumentdetails (not available with grouping)

Dokumentdetails (not available with grouping, but with folders)

Magazin

Magazin, ohne Linien

Schattiert

Vorschaufenster (not available with grouping)

Requirements

Functional

  • Sorting
  • Filtering
  • Search (typical fields including meta data)
  • flipable card style (?)
  • preview imag (?)
  • application icon (?)
  • hover experience exmaple
  • sorting animation similar to this
  • Quicksand (MIT license) has a great user experience Quicksand
  • swap items with animation example
  • swap items with animation and fading example
  • swap items with animation and fading source (MIT license)
  • flipping cards style example
  • flipping cards style explanation
  • flipping cards style demo
  • use this link example for compatibility with IE10

Non-functional

The design should ease filtering and sorting and should serve a beatiful UI and an intuitive and pleasurable UX. Love for and attention to the detail should drive the development.

Quicksand

After some research on the web, the tool Quicksand was found and is considered to be very attractive. The tools comes with a nice layout and supporting the requirements defined above. We decided to make a sample implementation based on this tool.

Implementation

Ok, let's start with a basic implementation of Quicksand. Later we will build the interface for SharePoint library data.

Step 1

This first implementation worked nice and smooth and Quicksand was decided to be the right basis of our development.


Step 2

Filter by type
Sort by
  • Activity Monitor
    348 KB
  • Address Book
    1904 KB
  • Finder
    1337 KB
  • Front Row
    401 KB
  • Google Pokémon
    12875 KB
  • iCal
    5273 KB
  • iChat
    5437 KB
  • Interface Builder
    2764 KB
  • iTuna
    17612 KB
  • Keychain Access
    972 KB
  • Network Utility
    245 KB
  • Sync
    3788 KB
  • TextEdit
    1669 KB

The implementation of this example from Quicksand gives a good first idea of what the development should look like. We have implemented another example just to examine the functionality in our environment and the effort needed for the implementation to run.


Step 3

As a next step, we will create a realistic implementation of Quicksand and develop a realistic style for documents typically published. Furthermore, we will implement the turnable-card style and the free-text search feature.

  • All
  • 2015
  • 2014
  • 2013
  • 2012
  • older

  • All
  • Q1
  • Q2
  • Q3
  • Q4

  • All
  • Presentation
  • Document
  • PDF
  • Excel Sheet
  • Image


  • Id
  • Name
  • Size
  • Date
  • Type


Alternative format 1

Alternative format 2


SharePoint Interface

The development of the SharePoint interface is described here


SharePoint Implementation Guide

The implementation steps for SharePoint are described here


Live example (Document Library and Content Editor Web-Part)

Here is the link to the working example. Pleae note, the SharePoint page is available to all authenticated users. At least a Microsoft account is needed to view the example.


Next Steps

  1. make implementation of vertical layout
  2. Another click to an li should switch ASC/DESC
  3. download with confirm dialog?
  4. decide if flipping cards are shown on mouseover (might be better than the turn-icon)
  5. collect data that is available from the list, e.g. name, year, quarter, file-size, file type (pptx, pdf)
  6. correct shadow for h-box
  7. include fields to be filtered in JSON (full interface incl. functions)

Sources

  1. Quicksand
  2. jQuery easing plugin

Links

  1. Quicksand Example
  2. Quicksand Example (people)
  3. -prefix-free / Break free from CSS prefix hell!
  4. CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround
  5. codepen for multiline ellipsis (...)
  6. jsfiddle for multiline ellipsis (...)
  7. -webkit-line-clamp
  8. force link to download
  9. consulity YouTube videomanger intro video setup

Q&A

  1. Is it possible to nest a div element inside a li element?
    Yes. This could be helpful for the planned card-style.
  2. Should we implement toggle buttons for years?
    For a typical implementation, grouping by year seems helpful. Likely even more than grouping quarter. Generally everything can be found via the free-text search, but a pre-selection by year is considered to be the right choice also with regard to the number of documents initially shown.
  3. Is it possible to implement a text field for search that triggers the filter of Quicksand
    Yes, see above (enter some text, e.g. 'docx' w/o quotes, into the input box)

Dieter Neumann