Novulo Headless CMS: core set-up of the components and concepts

This post describes the data model and design philosophy for Novulo Headless CMS.

Components for Headless CMS

In order to use Headless CMS, you need M8632 Novulo Headless CMS as the core component.

In order to use Headless CMS, you’ll also need the REST API components to be installed, most notably M8465 and M8737. See also: Best practices and tips & tricks for Novulo REST Endpoints

For Headless CMS, there are various useful additions, including:

  • M8860, to add corporate identities to Headless CMS
  • M8828, for multi-language Headless CMS
  • M8751, to add functionality for Product Detail Pages (PDP) for Headless CMS

Headless CMS and REST Endpoints

Headless CMS and REST Endpoints work together in a specific way.
REST endpoints can work without Headless CMS, but Headless CMS has no practical use case without REST Endpoints.

WebsiteTranslation Website translation Website Website WebsiteTranslation->Website URL URL URL->WebsiteTranslation

Now, the URL will also refer to a Web page.
A web page typically has 1 or more containers.
In turn, a container typically as 1 or more elements.

WebsiteTranslation Website translation Website Website WebsiteTranslation->Website URL URL URL->WebsiteTranslation WebPage WebPage URL->WebPage Element Element Container Container Element->Container Container->WebPage

In this set-up, an element always points to one single page. It means that elements and containers can only appear in one web page at the time, and are not reusable by itself. However, using the “Template or Master” set-up, reusability can be achieved.

In the design, this trade-of choice has been made explicitly: by having a one-to-many relation between Elements and Containers, as well as between Containers and Web Pages, it’s always clear to which page containers or elements are linked. In the classic Novulo CMS, which has been replaced by the Headless CMS, a many-to-many set-up was used. Here, overall feedback was that after using it for a couple of years, it became very difficult to keep track of all elements.

Containers and elements

Containers are only there to keep 1 or more elements together. Typically, a container represents a <div> section in a website.

Elements are actual elements or components on a website that show (visual) information to the end user. Using the default M8632 component, elements can contain:

  • Markdown text
  • One or more Media elements, referring to Novulo Media
  • One or more URLs, either internal (within the same website) or external
  • One or more custom fields to send information to the website

By using additional components, other data types can be linked to elements. As an example, using M8703, Products (as used in the ERP) can be linked to Headless CMS elements. This can be used, as an example, to integrate webshop products in website pages to achieve commerce at every page.

G WebsiteTranslation Website translation Website Website WebsiteTranslation->Website URL URL URL->WebsiteTranslation WebPage WebPage URL->WebPage Element Element Container Container Element->Container Container->WebPage ElementMedia ElementMedia ElementMedia->Element ElementURL ElementURL ElementURL->Element ElementProduct ElementProduct ElementProduct->Element

Headless CMS Web page templates, Container templates and element templates

Web pages, containers and elements all refer to a template:

Templates: Master or Template

Both Container templates and Element templates have an option that allows for two types:

  1. Master
  2. Template

They result into different behaviour at Element or Container level:

When an element template or container template has the master type, this means that all content is defined at the Template level. Content cannot be changed on element level.

When an element template or container template has the template type, this means that the content on the template represent initial values that are set when adding templates, but can (and must) be changed on the container or element level.

Example
For an element with Markdown text of the type Master, the Markdown text can be changed on the Element template page. It is read only on the Element. Changes to the Element template immediately apply to the Elements.

When the type is Template, the Markdown text on the template will be copied to the Element as soon as the element is instantiated. The text can be changed on the Element level. Changes to the template are only effective for new elements, but do not change existing elements.

(this post will be expanded)