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.

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

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

---

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)