Content modeling and presentation
This topic is an introduction to managing content in XM Cloud. It clarifies core concepts, such as templates, layouts, page designs, partial designs, and data sources.
XM Cloud provides end-to-end solutions for content creation. When discussing content in XM Cloud, we differentiate between two types:
-
Data - the model of the content that's presented on a webpage. This can also be known as modeling schemas and content types. In XM Cloud, you create data models using the Content Editor.
-
Presentation - the way the content is presented, including layout definitions and page structures. This is also known as a layout. In XM Cloud, you control the presentation using Content Editor, Pages, Components, and Forms.
You bind data and presentation when you specify data sourcesdata sources in Pages.
Content modeling
Content modeling means creating the schema structure of an element that will be presented on your website. You do this using templatestemplates, also known as data templates, that are made up of fieldsfields. For example, you create the data structure for a widget that contains information about the authors that contribute articles to your site. That model could include the full name of the author, a one-line bio, an image of them, and their areas of expertise. These fields are just data: they don't contain information about how the data will be presented.
The following video demonstrates content modeling in XM Cloud:
Presentation
You start creating presentation elements after you have a design in mind for the elements you're going to build. In XM Cloud, most of the presentation elements are built in the Content Editor. Presentation includes these elements:
-
Placeholder - determines the allowed location of elements in a component, a page, or any type of presentation element, using placeholder keys. You can also determine the type of components allowed in a placeholder.
-
Partial design - an element that's prebuilt with some presentation and content elements. When you update a partial design, it changes in all the places it's reused in the site.
-
Component - a presentation definition that you can add to your webpage in Pages, then add or edit its content, and customize its appearance.
-
Page design - the presentation definition of a page. It consists of placeholders, partial designs, components, and rendering parameters.
-
Layout - any combination of presentation definitions, combining the different presentation elements.
Binding content and layout
You use data sourcesdata sources to bind content with the page layout. For example, you can populate the a drop-down menu (layout) with the names of child items in your content tree. You can bind dynamically by using placeholders.
In addition to using data sources, you can use rendering parameters to control presentation without having to bind content. When you use rendering parameters, you can configure presentation options for a component that a content author can choose from when they use the component. For example, if the component is a widget that displays information about authors, you can configure rendering parameters that allow them to choose the background color of their widget.
Reusing elements
In XM Cloud, you can reuse many of the data or presentation elements in flexible ways and powerful combinations throughout your site and site collections. Some examples include:
-
Create headers and footers as partial designs that can be reused throughout your site. This has an added benefit of the ability to query and load the partial design once, and cache it to improve site performance.
-
Reuse content items by creating a folder with a group of content items (a Shoes product folder that includes these content items: heels, men's elegant shoes, hiking boots) then displaying those items in different types of components (a carousel component that rotates your shoe collections, and a promo component with an offer of 20% off hiking boots).
-
Assign rendering parameters to a component, so that the exact same component can be rendered in a different style.
-
If a data source is reused across multiple pages, you only need to update it once for the changes to go into effect everywhere.
Example component
The following example shows a template for an employee card component, that contains their name, role, image, and a quote:
The component itself is populated with media from the media library, and the text fields fields are filled out:
Finally, the component is rendered on the website, where the presentation details and CSS are applied:
Further reading
You can model content and control your layout using interfaces, such as the Content Editor and Pages, or using the content authoring and management GraphQL API.
You can read more about these features:
A data source contains content that's managed outside of a specific component. Components can call the data source to add that content at runtime. For example, a component can have its own content, such as a title, text, and a button, and an image that is added from a data source when a page is rendered.
We differentiate between internal and external data sources. An internal data source is created and handled within XM Cloud, for example: text, images, media, a site page. The can be stored on a page level (available to all the components on that page) or the site level (available to all the site components). In addition, you can set the data source of a page to be the page itself. This is useful for utilizing the page's metadata. For example, the title of the page as it appears in the browser tab can be tied to the page name.
External data sources are created and saved outside of XM Cloud. A component can fetch the data from an external source using one of the following methods: by including some JSON that calls the data source, sending an HTTP request and handling the response, or using the result of a GraphQL query.
Templates, also called data templates, define the structure of content items. Each template contains fields that are organized into sections. The template defines the field names and the sections the fields belong to. It also defines the type of each field, meaning, the input that the field can accept.
For example, a Product data template contains 2 sections: General information, and Manufacturing details. The General information section contains these fields:
-
Name – string
-
Catalog ID – string
-
Price – integer
The Manufacturing details section contains:
-
Manufacturer – string
-
Manufacturing country – list
Templates inherit definitions from a base template, which is simply a template that other templates inherit fields and sections from.
A field is a property of an item that stores data about the item. They can be simple (for example, string, text, number) or more complex (for example, Rich Text, General Link, Multilist) The template that an item is based on determines which fields are included in an item.
The following image from XM Cloud Explorer shows a Title component (also known as a rendering) and default variant. On the right are the various fields that this item is made of.
