Combining Plone Dexterity and VueJS Form Generator

In our current customer project we have some fancy requirements for content-types:

• large set of metadata per content-type (100-120 fields)
• metadata grouped by fieldsets
• metadata grouped inside a fieldset (all fields are grouped in two level deep hierachy)
• client-side validation
• configurable field visibility per-instance (each editor can turn the visibility of a field to public or internal in addition to the standard visibility of content objects based on their workflow state and the current security context)
• custom formatting of numbers or texts

After some evaluation we came to the conclusion that working with Dexterity and Dexterity schemas would not work for us. In particular there is no straight forward way for grouping fields in a DX schema in a two level hierarchy.

We came to Vue Form Generator which allows us to implement the requirements in a pretty straight forward way. VFG is based on VueJS - yet another Javascript framework for building rich client-side user interfaces.

My reasons for using VueJS over ReactJS or Angular:

• easy approachable
• no verbose code needed
• everything is brought to the point
• no steep learning curve
• easily extensible
• it fits my brain

Vue Form Generator allows us to implement forms as web compontents. All forms are defined using JSON (example). In addition to the field properties used by VFG, you can add additional application specific properties. A JSON field schema definition acts as a single point of configuration both for all edit forms and all view forms (similiar to Dexterity).  The screenshot shows an auto-generated contact form with various address groups.

We use minimal Dexterity based content-types for storing the form data inside an annotation. The  schemas of the content-types only define the standard Dublin Core metadata. The form data is being send from the client using an AJAX post operation to Plone. On the server we perform minimal validation like type checking and take the standard security precautions.

Vue Form Generator also support some non-standard field types that go beyond the standard HTML input fields.

Lessons learned:

• it is easy to integrate VueJS and Vue Form Generator with Plone
• using JSON to define and manage form definitions is easy
• no restart needed for changed form definitions
• no support (at this time) for uploads (images, files)
• small code base
• no intended as a replacement for Dexterity but a straight forward solution for building more fancy user interfaces with a Dexterity backend