As presented in our previous article “How Integrators Can Design the Ultimate Content Author Experience in a CMS”, the role of integrators is key to delivering the right tools to the content authors, such as templates and content types set. Their ability to execute their daily tasks with autonomy and agility depends on what integrators will deliver and provide them with the best experience using the platform.

Mockups & design, UI/UX workshops, and user journey maps are the foundation for the implementation of the components that are necessary to build web experiences. 

Remember to confront and challenge every step of the implementation and bring agility to your integration to ensure that your content authors' expectations are met.

How can the Jahia DXP platform help you?

This article will cover all available options that integrators have to make business users' experience simpler:

Page Template

Content Type

Resources Bundles

Helpers

Content & Assets Pickers customisation 

Content Editor forms override 

Content Editor UI extension 

Roles & Permissions 

RichText options 

Content Storage and reusability 

Granularity in module development 

Sample your development for page templates and component rendering 

What to think when defining a Content Type 

Template to specify a Jahia component 

Page Templates

Page Templates define the page layout,  help keep consistency throughout the website and preserve the Brand guidelines. Page Templates can be either structured and restricted, open or both, it will depend on their usage.

Those templates are usually created within a template-set module to control their updates (versioning of the module). The base template, usually the Home template, would be the starting point of your template integration; it will include all necessary javascript and CSS libraries that are needed to render your final website, such as your preferred grid system (ie: bootstrap), your global stylesheet, etc. It’s a JSP file called jnt_template, and all other templates will inherit from it.

Structured page templates are meant to guide content authors with their contribution, it defines areas or zones that are often restricted to a specific content type and limited to a certain number of items (content type restrictions).

Figure 1: part of a structure page template where areas are restricted to a single content type.

Restrictions can be coded directly in the template, or defined using the UI, content type restrictions will be available for all areas, and content lists.

Figure 2: content type restriction panel, accessible from the Content Editor advanced options.

Tip: Structured page templates may cause frustration to more advanced content authors, ensure that your author's audience will be tasked to content entering solely

Free page templates are used for advanced content authors to let them handle the layout structure of a page. This type of template needs to be coupled with grid layout components such as Bootstrap grid system for instance (provided by default by Jahia) so the content authors are autonomous in page layout construction. This requires that the content authors are familiar with the grid system vocabulary and specifications, and potentially extend the corresponding custom style sheets. Those types of templates will give the opportunity to be creative with landing pages.

Tip: Free page templates are often missing from template sets, leading to a lack of autonomy for some digital marketers who want to try new layouts for landing pages. Feel free to bring this topic up early in the process, ideally during the specification phase.

However free templates should still make it possible to respect branding guidelines, for example by using common CSS styles and static assets (such as images, videos, etc…)

Figure 3: Bootstrap layout and grid component for the advanced content authors.

Content Template aim to render  content types as full independent web pages. Not every content type will need a content template (i.e. banners, teasers), however content types such as news, articles, and products are legitimate candidates to be rendered as a web page presenting their own URL and SEO properties.

Content templates are created using the Jahia Studio (packaged in a module), you can have several content templates for the same content type.

Tip: Using the content template will prevent content authors from creating a new page to display a specific content type

Content Type

Content types define the different content elements that will be needed to build your website, they are also referred to as node types in Jahia vocabulary, there are 2 types of node types available: primary nodetype and mixin nodetype.

Primary nodetype can be very basic such as a simple text, or more complex proposing several properties, such as news (title, date, text, image, ..).

Nodetype properties can vary from string, number, date, references, lists, and other more complex (see the documentation for complete list), they can be used for editorial purposes (rendered in a page) or as properties hidden in the HTML rendering of a page to serve other needs, like the alternative title for the meta title or the breadcrumb, the target for a hyperlink, the configuration of a slideshow, the name of a CSS class, etc. Nodetype properties may have additional definitions such as being mandatory, internationalized, indexable, etc.

Mixin nodetypes are abstract data types, they can also have properties and be used to extend primary nodetypes with global properties. This means that if additional set of properties could be applied to several primary notypes, it should be handled as a mixin nodetype. it ensures that the same information (opengraph, noindex, ...) is presented and managed in a consistent way across every content types.

Let’s take the OpenGraph tags as an example:

Open Graph is an internet protocol that was originally created by Facebook to standardize the use of metadata within a webpage to represent the content of a page. Within it, you can provide details as simple as the title of a page or as specific as the duration of a video.

As we saw earlier in this article, structured primary nodetypes such as news, articles, and products, could be displayed as an independent webpage, with a potential need for Open Graph tags for social sharing.

In the above declaration, we understand that the openGraph mixin will be applied to all primary nodetypes that inherit jnt:content and jnt:page and be accessible in the Metadata section.

Figure 4: Content Editor with OpenGraph Metadata for News type Content.

Tip: Do not forget to clean and remove the mixins and the content types that are not used anymore!

Resources Bundles

Resources bundles files are parts of a module used to label the different nodetype properties in the languages used for the platform. It presents content authors with a better readable and understandable label for content type properties.

Files are located under resources/resources/<module_name>.properties

A file needs to be created for each language.

Helpers

You may want to add a description or helper text to either your content fieldset or a given field, to give some additional information to the content authors to guide them and enrich their experience. They are managed within the resource bundle page along the labels of the properties fields. They will be displayed for mixins properties even if they are disabled.

Fieldset:

Field Helper:

Continuing on the Open Graph example:

Figure 5: Helpers added to the definition of the Open Graph Component

Tip: Avoid long names for fields and fieldset, and leverage helpers instead. 

Views

Content Types are rendered based on their assigned views. A content type can have multiple views, depending on how, where and when it needs to be rendered. The base structure of a view is based on the JSPs syntax, API, and all the necessary javascript/CSS framework. Having different views, avoid having too many content types declared.

Below is an example of 3 different views for the same content type illustrating 3 types of rendering.

Figure 6: Standard HTML view using JSP

Figure 7: Card view mixing standard HTML and business logic 

Figure 8: View that embeds the React application rendered within a page.

Tip: Make sure that the views that can be selected by the users are actually good looking. If a view is not meant to be used for a content type, it shouldn’t be possible to select it.

Content & Assets Pickers customisation

User interface simplification and guidance help with content authors' efficiency. Since Jahia v8, content and assets pickers are customizable, the main goal is to minimize the options of the picker to concentrate on the task at hand. (i.e.: launch the page picker to select only pages or contents displayable in full page from a specific folder from a known site, without the need to navigate through the folder tree structure)

Figure 9: customized pages/contents picker

See an example of a custom picker for Events content types: https://github.com/smonier/components-features-test/blob/master/src/main/resources/javascript/apps/registerExtensions.js

Content Editor forms override 

From Jahia V8, we introduced a new Content Editor developed with react.js with the ability to manipulate and override fields and sections. It is important that you are aware of the possibilities that you have to customize, and/or simplify the UI for your content authors and present them with the options.

See the following documentation for a complete understanding of it: https://academy.jahia.com/documentation/developer/jahia/8/extending-and-customizing-jahia-ui/customizing-content-editor-forms/examples-of-content-definition-json-overrides

Tip: Only use json overrides if you need to, they can add complexity to your implementation

Content Editor UI extension

Leveraging the Content Editor react.js implementation, integrators can now add their own react.js extension with their own business logic to the Content Editor.

As an example, let’s take a quiz, which simply presents questions, and to these questions, multiple choices of answers which several could be true, with storage of the answer in the customer data platform (for further personalised engagement).

In one single field (the answer) 3 properties are handled at the same time:

1. The answer label
2. A toggle to specify if it is the expected answer
3. The CDP profile property to store the answer

Figure 10: Content Editor presenting a UI extension to handle a specific logic.

See https://academy.jahia.com/documentation/developer/jahia/8/extending-and-customizing-jahia-ui/customizing-content-editor-forms/extending-content-editor-ui for further explanations.

Roles & Permissions

In a CMS (Content Management System), roles and permissions determine what users can and cannot do within the system. Roles are a set of permissions that can be assigned to users. For example, an administrator role would have more permissions than a regular user role. Permissions control specific actions that a user can take, such as creating, editing, deleting or publishing content for instance. In Jahia new permissions can be declared within a module if dedicated permissions are required (i.e.: post a message in the comment module, you could only allow authenticated users to post a message).

The content author's UI can also be simplified using the roles & permissions (available options in the Content Editor, and advanced content options). This is valid to customize every main entry and what’s within.

It is recommended torecommended, to identify the roles of your content users and to what extend they need to use the platform, therethey is no need to confuse them with many options that they will never use. You have the ability to make it simple for your content authors, don’t hesitate to do so.

• Permission to view form sections
• Permission to view rich text options
• Permission to access SEO tools robots / sitemap / vanity URL and vanity URL dashboards 
• Permission for jExperience
• Permission to create and manage forms
• Permission to access category manager 
• Permission to limit access to templates and content types

Figure 11: Superuser Main Menu versus Content Author Main Menu

Tip: Don’t make too many assumptions about which features business users will need. Instead, identify 2-3 representative users and walk through the UI with them. Do not do this workshop with their manager, really do it with the users.

RichText options

The standard RichText is based on ckEditor, and by default, Jahia provides 3 permissions, that are reusable within your custom roles.

With Jahia 8, Jahia introduced selector type override (JSON override configuration), a selector type that defines how Content Editor displays data depending on its data type. RichText can present different options of what could be entered, and adapting the look and feel will provide the right experience to the content authors.

Let’s take a look at the CodeMirror module (https://github.com/Jahia/content-editor-codeMirror), CodeMirror is an editor used to write HTML, CSS, Javascript, and many other types of source code directly from a web page. It can be a little bit technical, but helpful to add javascript, css, JSON configuration files to a component for instance. The example below shows the JSON configuration for the well-known OWL carousel, declared as a RichText, but overridden with a custom CodeMirror selector type, which offers the content author the ability to have multiple owl carousels with different configurations within their sites.

Figure 12: OWL Carousel Content Type with Code Mirror Selector Type

Content Storage and reusability

Content authoring within the Jahia platform can be done following two different approaches:

Using Page Composer, content authors contribute in the context of a page following the structure of the site, most often contributed contents in that specific mode have a unique purpose, they sit in one place, and one place only.

Not to mention that content authors have the ability to switch from the composer mode to the preview mode to validate their content before triggering the publication workflow.

Using jContent, content authors contribute within a directory structure like a file system, out of the context of the site page structure. Those contents usually are queried with automatic retrieval components based on the taxonomy attached (categories, tags, keywords, …) and placed within a page. Any new addition will appear automatically based on the query.

Those contents are also easily reusable within the platform (copy and paste as reference) and also through the GraphQL API to be queried remotely by distant applications.

Granularity in module development

Development life cycle can take up to 3, or 4 times to answer business users' requests, remember that business needs are always now. Remember that you can optimise how you package your developments in modules. Having several modules containing few components will give you a better ability to answer quickly to business needs, as you will reduce delay with the specification, development, testing and deployment of the module and what it contains. On the contrary, having one sole module with everything in it might slow down maintenance and/or enhancements requests as the whole application will have to be tested.

Sample your development for page templates and component rendering

The content creation approach that content authors have is mainly done by duplicating existing content. Having an example of the rendering of all pages and components (in a non-published part of the site) will give content authors the ability to see structure, and how contents are rendered in context and quickly copy/paste to the desired section of the page. Having samples will boost content authors' agility and experience throughout the life cycle of their projects.

What to think when defining a Content Type

Content Types are key in providing Content Authors with the experience and the autonomy they expect. Content Type can be very straightforward and address just editorial needs, or can present additional properties to manage layout, configuration, or anything that may be needed for a proper or flexible HTML rendering (views).

Here are below the minimum requirements you need to ask yourself when defining a Content Type.

Template to specify a Jahia component

Full detail to understand module development is available here: Technical overview of Jahia