Making Friendly Polymer Apps

The Nuxeo REST API provides a wealth of information about documents in the repository, and it’s awesome that the Nuxeo Elements and Data Visualization Polymer components allow us to leverage the REST API to build amazing, modern Web applications.

One of the challenges I ran into in terms of creating an effective user experience had to do with dealing with file types. I wanted to build a dashboard chart to display the distribution of different file types within my application. The Nuxeo REST API supplies the MIME type for a given blob when accessing the documents, but for user-friendliness it is generally better to display the file extension or even a “friendly name” rather than the MIME type. In the following screenshots the same data is being displayed but the latter is certainly easier to understand:

So I needed a way to map a MIME type to something more user-friendly.

There are plenty of JavaScript implementations to map MIME types to something else but I found nothing specifically for Polymer. In Polymer applications you are meant to deal with Web components and not random JS code, so I thought it might be nice to build a simple Polymer element to tackle this task. Enter ‘nuxeo-util-mimetypes‘. This is a Polymer element that can provide the file extension or a “friendly name” given a MIME type.

Here is an example of fetching Nuxeo repository data and aggregating on the MIME type of the ‘file:content’ blob using the ‘nuxeo-repository-data‘ element:

 <nuxeo-repository-data ecm-primary-type="File"
 grouped-by="file:content.mime-type" 
 data="{{typeCount}}">
 </nuxeo-repository-data>

The results of this request might return an object like this for Word documents:

 {
 "key": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
 "doc_count": 26
 }

The MIME type “application/vnd.openxmlformats-officedocument.wordprocessingml.document” is quite useless for most end-user interfaces. Instead I can use the ‘nuxeo-util-mimetypes’ element to get the friendly name. Here is an example using JavaScript from within another Polymer element:

 var mimeType = ‘application/vnd.openxmlformats-officedocument.wordprocessingml.document’;
 var mimeTypeLookup = document.createElement('nuxeo-util-mimetypes');
 mimeTypeLookup.mimeType = mimeType;
 mimeTypeLookup.friendly = true;
 var friendlyName = mimeTypeLookup.query();

The ‘nuxeo-util-mimetypes‘ repository contains documentation and a working example.

To use the ‘nuxeo-util-mimetypes’ element in your Polymer application just install it via bower:

 bower install --save nuxeo-sandbox/nuxeo-util-mimetypes

You can find a more fleshed out example using ‘nuxeo-util-mimetypes’ in the ‘nuxeo-dam-dashboard‘ element.

Note: the MIME type data provided with ‘nuxeo-util-mimetypes’ comes mainly from:

There are a few “friendly names” already implemented but your pull requests with more additions are most welcome!