Creating a contenttype editor with Ext JS

Example of the old way and the new way to define a contenttype.
Preview of the Contenttype Editor for Enonic CMS 5.0.

A common task for Enonic consultants and site developers is to create contenttypes for storing content that will be displayed on a website. Almost every Enonic installation has contenttypes for articles, people, events, files, images and more. Contenttypes in Enonic CMS 4.x are defined with XML. This XML just looks like a bunch of code to non-IT people. Writing XML is error prone and time consuming, even for us tech-savvy web developers. We always have to check the documentation and copy/paste the parts we need and then make edits. For my labs project, I wanted to create a tool that would make my job easier by removing the need to write XML to define contenttypes. When this project is completed, anybody who can use a mouse will be able to define contenttypes for Enonic CMS without ever seeing any code.

Creating and editing content in Enonic CMS is done with web-forms. For example, an article title would be a text input and the article preface would be a textarea. Creating a contenttype is basically designing a form. Defining it with XML is non-visual and can lead to surprises when you see how the final form looks as you create your first content.

The old way:

The new way:

Contenttype Editor

As you can see, contenttypes will be defined by filling out forms. This will speed up the process of site-building and no code needs to be written so anybody can do it. Another benefit is that the user gets instant feedback in the central preview area so you know exactly how the content editing form will look.

The column on the left is a tree representation of the contenttype structure. Each block is represented as a node with one or more input nodes. These can be edited by double-clicking or right-clicking and selecting "edit" from the context menu. The block and input nodes can be moved with drag-and-drop to change the order. Editing a block or input will open a form with the values previously entered so these values can easily be changed. The bottom of each form has a "help" area that describes the selected part of the form. The column on the right has buttons for adding new blocks and inputs to the contenttype. The center column is the preview area where the results of each edit can be viewed. What you see in the preview area is the same thing you will see when creating or editing content for the website.

The contenttype editor is being created with ExtJS and will be available in a future version of Enonic CMS.

Comments