Nuxeo Studio, Now with More Fancy!


Tue 09 August 2016 By Josh Fletcher

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:

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.

<template is="dom-bind">

This “template” element activates Polymer on its content.

The JSF template can be used in one of three ways via Nuxeo Studio:

  1. Copy the template from the plug-in and Install it in your Studio Resources
  2. Set the template using a Custom Property (the property is “templateId”) on a template widget
  3. Create a new template

The key factor for number 3 is to make sure and import the two specific files mentioned above:

  • Web components
  • Vulcanized elements

And make sure to add a “template” element with the “is” attribute set to “dom-bind”.

Bind That Stuff

Once the template is in place it’s time to put it to use. Of course a “Template” widget is necessary in order to display the template:

In the case of the progress chart, there’s really nothing special going on in terms of the widget properties because the template itself contains tags to get the necessary data:

<cm-demo-quickstats-widget claim-kind="#{currentDocument.incl.incident_kind}" claim-state="#{currentDocument.queue.lifecycle_state}"></cm-demo-quickstats-widget>

Naturally these values could have been passed as parameters or bound to fields as well.

Conclusion

This is a basic example of getting Polymer-based content usable via Nuxeo Studio. With a few simple tweaks, and an appropriately configured Nuxeo Package, we can add some exciting, fresh UX to Nuxeo applications.

Join me next time when I’ll explain how to do this without using a Nuxeo Package at all!


Tagged: Nuxeo Studio, How to, Nuxeo UI, Polymer, Web Components