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
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
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.
-
meta tag content goes here
2012 03 QUARTERLY GMSP.pdf
-
2012 06 QUARTERLY GMSP.pptx
-
2014 03 QUARTERLY GMSP.xlsx
-
2015 03 QUARTERLY GMSP.docx
-
2015 06 QUARTERLY GMSP.docx
-
2015 09 QUARTERLY GMSP.png
-
2014 06 QUARTERLY GMSP.pdf
-
2012 09 QUARTERLY GMSP.xlsx
-
2012 12 QUARTERLY GMSP.docx
-
2013 03 QUARTERLY GMSP.pptx
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
- make implementation of vertical layout
- Another click to an li should switch ASC/DESC
- download with confirm dialog?
- decide if flipping cards are shown on mouseover (might be better than the turn-icon)
- collect data that is available from the list, e.g. name, year, quarter, file-size, file type (pptx, pdf)
- correct shadow for h-box
- include fields to be filtered in JSON (full interface incl. functions)