Beta - Customizing Content Editor UI by overriding content definitions

  Written by The Jahia Team
 
Developers
   Estimated reading time:

Content Editor form generation

The content editor module generates forms for content editing from a JSON definition. This JSON definition is built from the node type definition that you can find in the CND file and from the static files present in the folder META-INF/jahia-content-editor-forms

The generated form will have generated sections for each mixin and inherited JCR node types.

For a given node type:

  • If a CND definition existing in the JCR, it is used to generate a form definition dynamically.
  • If Jahia modules define static forms that either override or define new forms, they will be merged in order of priority with first the dynamically generated forms from the JCR definition (if it exists) and then with the static JSON form definitions that have a higher priority.
  • Once this is done, the choicelist initializers will be called to generate the initial values for each field.

For example: 

The JSON form definition for the "jnt:news" node type will look like the following:

"data":{
  "forms":{
    "createForm":{
      "name":"jnt:news",
      "displayName":"News entry",
      "description":"",
      "sections":[{
        "name":"content",
        "displayName":"Content",
        "description":null,
        "fieldSets":[{
          "name":"jnt:news",
          "displayName":"News entry",
          "description":"",
          "dynamic":false,
          "activated":true,
          "fields":[{
            "name":"jcr:title",
            "displayName":"News Title",
            "description":"This is your news title<br/>It will be displayed as the header of your news.",
            "errorMessage":"",
            "mandatory":true,
            "i18n":true,
            ...},
          ...],
        ...},...]
      },...]
    }
  }
}

Defining static forms in Jahia modules

The static definition of the forms and fieldSets can be overrided by adding json file in the META-INF/jahia-content-editor-forms folder of your Jahia module, then in forms or fieldSets sub-directory.

The json of a form can be override as shown here:

The files should have a meaning full name, for example for the qant:allFields node type we recommend replacing the colon (:) by an underscore so that the file name become qant_allFields.json.

Here's an example of a JSON static form definition:

{
  "name": "qant:allFields",
  "priority": 1.0,
  "sections": [
    {
      "name": "layout"
    }
  ]
}

With this definition, when you will create or edit a node of the type  qant:allFields, a form with a section named layout will be displayed. 

How to:

Add a section:

Add a file in META-INF/jahia-content-editor-forms/forms folder with the following information:

  • name (The node type where we have to use this form definition. Example: jnt:news)
  • priority (used to allow overrides, the higher the priority the most important it will be)
  • a list of sections (A section definition is composed of:)
    • a name
    • a label key for localization
    • a requiredPermission name

Example:

{
  "name": "jnt:news",
  "priority": 1.0,
  "sections": [
    {
      "name": "mysection",
      "labelKey": "label.engineTab.mysection",
      "requiredPermission": "viewContentTab"
    },
    {
      "name": "classification",
      "labelKey": "label.engineTab.categories",
      "requiredPermission": "viewCategoriesTab"
    },
    {
      "name": "metadata",
      "labelKey": "label.engineTab.metadata",
      "requiredPermission": "viewMetadataTab"
    },
    {
      "name": "layout",
      "labelKey": "label.engineTab.layout",
      "requiredPermission": "viewLayoutTab"
    },
    {
      "name": "options",
      "labelKey": "label.engineTab.options",
      "requiredPermission": "viewOptionsTab"
    },
    {
      "name": "seo",
      "labelKey": "label.engineTab.seo",
      "requiredPermission": "viewSeoTab"
    }
  ]
}

With this definition, when you will create or edit a node of the type  jnt:news, a form with the sections mysection classification metadata layout options seo will be displayed. 

Add a fieldset and a field:

When using static declaration of fieldsets, only override to existing properties are provided, although it is also possible to add fields that are not in a JCR definition (but this is not 100% supported yet).

A fieldset is composed of:

  • a name
  • a priority
  • a collection of field definitions

The following example shows how to add a fieldset which contains a field and is placed in mysection

{
  "name": "nt:base",
  "rank": 1.0,
  "priority": 1.0,
  "dynamic": false,
  "removed": false,
  "activated": true,
  "fields": [
    {
      "name": "ce:systemName",
      "description": "",
      "requiredType": "STRING",
      "selectorType": "Text",
      "i18n": false,
      "readOnly": false,
      "multiple": false,
      "mandatory": true,
      "target": {
        "sectionName": "mysection",
        "rank": 0.0
      }
    }
  ]
}