Examples: Content Components
- Download Examples
- Example 1 - Single Item
- Example 2 - Multiple Items
- Example 3 - Component Properties
- Example 4 - Render Hooks
- More Examples
Download Examples
All the Content Component Examples are available as a jsHarmony CMS Theme. You can download the theme using the button above and extract it into a site SFTP folder to install. A video tutorial for installing templates can be found in Getting Started Tutorial 1.
Example 1 -Single Item
By default, a component will be bound to a single data item. Add any number of fields to the data item.
The example below is for a banner, with three editable fields (Background Image, Title, and Body). As changes are made in the component editor, the preview will be updated.
The "cms-component-config" section on top defines the component fields and options, and the render template is below the config.
<cms-component-config>
{
"title": "01 - Banner",
"caption": ["Banner", "Banners"],
"target": "content",
"icon": "material:image",
"data": {
"fields": [
{ "name": "image", "caption": "Image", "control": "media_browser", "validate": ["Required"]},
{ "name": "title", "control": "htmleditor" },
{ "name": "body", "control": "htmleditor" },
]
}
}
</cms-component-config>
<div style="background-image:url(<%=item.image%>); padding: 40px;">
<h1 cms-content-editor="item.title">Item Title</h1>
<div cms-content-editor="item.body">Item Body</div>
</div>Example 2 - Multiple Items
A content component can be bound to multiple data items by setting the "multiple_items" config property to "true".
When editing a content component that is bound to multiple data items, the interface will first display a grid of all the items, and then the user can double-click on an item to edit its contents.
Be sure to include a "jsh-foreach-item" attribute in the render template, to iterate over the data items:
<cms-component-config>
{
"title": "02 - Item Listing",
"caption": ["Item", "Items"],
"target": "content",
"multiple_items": true,
"icon": "material:view_headline",
"data": {
"fields": [
{ "name": "title", "control": "htmleditor" },
{ "name": "body", "control": "htmleditor" },
]
}
}
</cms-component-config>
<div jsh-foreach-item style="border:4px solid #ccc; margin: 10px; padding: 25px;">
<h2 cms-content-editor="item.title">Item Title</h2>
<div cms-content-editor="item.body">Item Body</div>
</div>Example 3 - Component Properties
The Component Properties form allows for additional configuration options. Access the component properties by clicking on a component, and selecting "Configure".
The example below enables the user to set a CSS Class and CSS Style on the container element via the Component Properties.
Notice that the CSS Class is set using the EJS Container Slurp tag, so that if the CSS Class is missing, the entire class attribute will not be rendered. More information about the tags can be found in the Component HTML Render Tags documentation.
<cms-component-config>
{
"title": "03 - Banner w/Properties",
"caption": ["Banner", "Banners"],
"target": "content",
"icon": "material:image",
"properties": {
"fields": [
{ "name": "cssClass", "caption": "CSS Class" },
{ "name": "cssStyle", "caption": "CSS Style" },
]
},
"data": {
"fields": [
{ "name": "image", "caption": "Image", "control": "media_browser", "validate": ["Required"]},
{ "name": "title", "control": "htmleditor" },
{ "name": "body", "control": "htmleditor" },
]
}
}
</cms-component-config>
<div class="<%~properties.cssClass%>" style="background-image:url(<%=item.image%>); padding: 40px; <%=properties.cssStyle%>;">
<h1 cms-content-editor="item.title">Item Title</h1>
<div cms-content-editor="item.body">Item Body</div>
</div>Example 4 - Render Hooks
Render hooks enable advanced page editor integration.
In the example below, the slideshow needs to call the "SimpleSlideshow" function to be initialized.
In order to call the function, we need to hook into the "onRender" function, so that the Page Editor can call SimpleSlideshow each time it renders the component.
Here, the Render Hook is defined in the separate "js" file, in order to make it easier to edit. Alternatively, the Render Hook could be defined in the "js" property of the "cms-component-config".
First, the component template main file defines the Component Config and render template:
<!-- templates/components/04_RenderHooks_Slideshow.html -->
<cms-component-config>
{
"title": "04 - Slideshow",
"caption": ["Slide", "Slides"],
"target": "content",
"multiple_items": true,
"icon": "material:image",
"data": {
"fields": [
{ "name": "image", "caption": "Image", "control": "media_browser", "validate": ["Required"]},
{ "name": "title", "control": "htmleditor" },
{ "name": "body", "control": "htmleditor" },
]
}
}
</cms-component-config>
<div class="SimpleSlideshow">
<div jsh-foreach-item style="background-image:url(<%=item.image%>); padding: 40px;">
<h1 cms-content-editor="item.title">Item Title</h1>
<div cms-content-editor="item.body">Item Body</div>
</div>
</div>Next, the separate "js" file defines the Render Hook:
// templates/components/04_RenderHooks_Slideshow.js
component.onRender = function(element, data, properties, cms, component) {
SimpleSlideshow(element);
}
More Examples
Additional Content Component examples can be found in the Starter Templates. Open any theme and navigate to the "templates/components" subfolder to see the component source code.
