Understanding Content Editor forms and fields
Content Editor is divided into three main areas. The header at the top, the form at the left, and the preview pane on the right.
The header includes:
- a back button
- the display name of the content
- Save and Publication options
- badges to describe the content status
- a language switcher
- A menu with 3 dots where you can access work in progress and copy from languages functionality
The form hierarchy is made of 3 levels:
Corresponding to "itemType" for developers
- Fieldsets or dynamic fieldsets
Corresponding to mixins and dynamic mixins for developers
Corresponding to content properties
The preview panel that displays a preview of content.
Understanding the Content Editor form
Content Editor includes the following sections by default:
The first section you'll see when editing content. It is meant to host any field that is editorial. Any value that you set in the content section is likely to be seen by the visitors on your site.
Helps you classify your content with tags and categories.
Information about your content, for instance, top story, author, and persona
Includes by default the choice for the view. A view contains the logic that renders your content. Developers can create several views for one content type and make them available to you. As a best practice, any field regarding the presentation of the content can be added to the layout section.
You can use the Options section for different purposes. For instance, geolocation, address, or Google Tag Manager ID
- List ordering
Displayed for contents of type list or for contents that have sub-contents ("children") that can be ordered. This section cannot be extended with a custom field.
It is possible to show or hide sections depending on the permissions of the editor. For more information, see About Content Editor permissions.
Understanding a Content Editor field
Whether it's representing a simple input, a rich text, a choicelist, an image, or any other property type, a field in Content Editor always have the following components:
The name of the property. In this example, it's "News title".
Badges are used to inform you about the field. In this example, you can see that the property is required and that the current translation is work in progress.
A short description that can help the editors to understand how this field will be used
The UI component that will be used by the editors to fill the value, such as a simple input, date picker, or reference field. In this example, it's a simple input.
- Validation feedback
A left bar and a custom message if needed to display any validation error. In this example, there is a left bar because the field is required and the value is empty.
The field value that is typically provided by editors, but can also be filled by default if it's configured in your content definitions.
About Content Editor preview
The preview pane provide editors with relevant feedback when they're editing content inside pages or inside folders when the content is used in headless. Here is how the preview is managed:
- When the content you're editing has a Jahia template: a page, or a content with a content template (like our news example), then the preview will render the content as a full page using this template.
- If you're editing a content that is inside a page, then Content Editor preview loads the page and zooms in the content. By loading the CSS of the whole page, Content Editor preview is more accurate. It can happens that
- If the content you're editing is inside a folder and doesn't have a template, (for headless use cases) then Content Editor preview loads a specific "view". This view can be added by the developers you're working with: the name of the view needs to end with .cm.jsp).