In a previous blog, I showcased a Polymer-based chart for our Case Management demo. This time around I’ll explain how that chart is used via Nuxeo Studio, i.e. how to integrate Polymer-based content and still use Nuxeo Studio for configuration. The end result is a nice looking chart in the interface:

Chart within Nuxeo interface

Can we Package it in a Box?

In order to use the chart in Nuxeo, it needs to be packaged as a Nuxeo plugin (and therefore a Nuxeo Package for installation). Fortunately generator-nuxeo (our code scaffolding tool) now contains a template for creating Polymer applications. These are the basic steps to building the appropriate scaffolding:

1. Create a multi-module project
2. Create a Polymer subproject
3. Create a Nuxeo package

You can find the Nuxeo Package for our Case Management demo here. The Polymer portion of the package is defined in the nuxeo-cm-demo-elements subfolder.

Template Time!

The package also defines a JSF template to display the chart. This is the secret sauce that makes the chart usable in Nuxeo Studio. Take note of a few important bits:

<h:outputscript src="/bower_components/webcomponentsjs/webcomponents-lite.js" target="">

The above import allows the template to use Web Components.

<nxr:import src="/cm-demo-elements/elements/elements.vulcanized.html" target="">

The above import contains all of the custom Polymer elements that are needed to display the chart, including the chart itself.