Responsive documents web part using JSLink and UI Fabric

Recently, I have only used UI Fabric for icons. This proves useful when working inside a Microsoft house and keeping SharePoint branding inline with the product itself. However, I haven’t been fully convinced on the responsive grid as of yet and continue to use Foundation 6. However, to provide myself with some experience of Fabric I decided to create a responsive JSLink documents web part. This includes using the Fabric Grid, class names for fonts and colours as well as the document icons.

Result

This is how the web part will look on both desktop and mobile.

 

Page Layout

To ensure that the page is responsive, I created a new page layout with one web part zone. The below snippet shows the Fabric UI Grid structure I’ve chosen to use along with a web part zone where I’ll add the documents web part.

 

JSLink

In short, the code does the following:

  • Looks at the Document Library
  • References a custom library view with the title and name columns visible
  • Creates a standard HTML list with the document link wrapped around the document icon and document name

 

Styles

The styles are straight forward. However,  I have added a few checks in the LESS to determine which document icons are surfaced. Traditionally, when you know the type of icon you wish to use, you could simple add the Fabric classes, such as “ms-Icon ms-Icon–Cancel”. In this instance I check the file extension of the anchor and apply the icons content value.

You will also need to reference Fabric. The URL can be found below, or on the fabric site.

<link rel=”stylesheet” href=”https://spoprod-a.akamaihd.net/files/fabric/office-ui-fabric-core/4.1.0/css/fabric.min.css”&gt;

Demo

A HTML / LESS demo can be found here.

http://codepen.io/matthewholden/full/YpVKPE/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s