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.
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:
The results of this request might return an object like this for Word documents:
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!