Reference: cms-component-config
Component Config
The component config is defined in JSON, inside of each component template. There are two ways to define the component config:
<!-- Option 1: <cms-component-config> tag -->
<cms-component-config>
{
"title": "Component Name",
"type": "content"
}
</cms-page-config>
<!-- Option 2: Script tag -->
<script type="text/cms-component-config">
{
"title": "Standard Template",
"type": "content"
}
</script>The Script Tag config cannot be used inside of an in-page component template, because the in-page component template itself is a script tag.
The Component Config can contain any of the following properties:
{
"id": "component_id", //Auto-populated based on Component file name
"title": "Component Name",
//Type of component: "site", "page", or "content" (default)
//Content components are used to edit items in the content area, and are added to the Component Toolbar
//Page components are used to render page template components such as menus and breadcrumbs
//Site components are used to generate system files on publish, like XML sitemaps and routers
"target": "content",
//Icon used by the content components in the Component Toolbar
// Icons can be specified using Google Material icon font name, as SVG, or as HTML
// 1. For Material Icon: "material:<Google Material Icon Name>". Example: "material:photo_library"
// 2. For SVG: "svg:<SVG Code>". Example: "svg:<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'><path d='M0 0h24v24H0z' fill='none'/><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/></svg>"
// 3. For HTML: "html:<HTML Code>". Example: "html:<i class="iconClass">iconName</i>"
"icon": "material:photo_library",
//(Optional) Data Item captions for messages in Component Data Editor
//["singular", "plural"]
"caption": ["Item", "Items"],
//(Optional) JavaScript executed when component is rendered by page editor
// * Any text in the "<componentFileName>.js" file will be appended to this property value
// The js property can be used to add Page Editor hooks:
// There are two hooks that can be used in the render process
// 1. onBeforeRender(renderConfig): this hook is called before rendering the component. The renderConfig contains
// an object that can be manipulated before being used to render the component.
// 2. onRender(element, data, properties, cms, component): this hook is called when the component is rendered.
"js": "...JS Code...",
//(Optional) Define the component render template in a separate file or as a string in the config
//Separate templates can be used for Page Editor and Publish:
"templates": {
//Editor template
// * Any text in the "<componentFileName>.templates.editor.ejs" file will be appended to this property value
"editor": "...HTML/EJS Code...",
//Publish template
// * Any text in the "<componentFileName>.templates.publish.ejs" file will be appended to this property value
"publish": "...HTML/EJS Code...",
},
//(Optional) Remote templates can be used to load templates from a remote site on edit or publish
"remote_templates": {
"editor": "https://server/templates/components/content_element_name.html?source=1&_=%%%timestamp%%%",
"publish": "https://server/templates/components/content_element_name.html?source=1&_=%%%timestamp%%%",
},
//(Optional) Features to improve speed of Page Editor
"optimization": {
//Disable server-side editor template parsing (and downloads remote templates client-side)
// May be slightly faster, but will disallow using tags like "jsh-foreach-item" in component template
"bare_ejs_templates": false,
},
//(Optional) Empty component placeholder behavior in Page Editor
"editor_placeholder": {
//Display a placeholder if no items are entered, when component.multiple_items=true
"items_empty": true,
//Display a placeholder for an item when field validation fails
// (on single item, or on component.multiple_items when the jsh-foreach-items tag is used)
"invalid_fields": true,
},
//For Content Components - whether data has one item or multiple items
// For example, a banner has one item, while an item listing has multiple items
// (Default) When false, this sets data.layout="form"
// When true, this sets data.layout="grid_preview"
"multiple_items": false,
//Component Properties
"properties": {
//List of Component Properties Fields
//Same syntax as jsHarmony model fields
"fields": [
//Short definition:
{ "name": "cssStyle", "caption": "CSS Style" },
//Long definition:
{ "name": "cssClass", "caption": "CSS Class", "type": "varchar", "length": 1024,
"control": "textbox", "controlstyle": "width:260px", "validate": ["MaxLength:1024"]}
],
//(Optional) HTML added to the top of the Component Properties form
// * Any text in the "<componentFileName>.properties.ejs" file will be appended to this property value
"ejs": "...HTML/EJS Code...",
//(Optional) CSS added when the Component Properties form is rendered
// * Any text in the "<componentFileName>.properties.css" file will be appended to this property value
"css": "...CSS Code...",
//(Optional) JS executed when the Component Properties form is rendered
// * Any text in the "<componentFileName>.properties.js" file will be appended to this property value
"js": "...JS Code...",
},
//Component Data
"data": {
//List of Component Data Fields
//Same syntax as jsHarmony model fields
"fields": [
//Short definition:
{ "name": "cssStyle", "caption": "CSS Style" },
//Long definition:
{ "name": "cssClass", "caption": "CSS Class", "type": "varchar", "length": 1024,
"control": "textbox", "controlstyle": "width:260px", "validate": ["MaxLength:1024"]},
// To display a link browser control, set field.control to "link_browser":
{ "name": "link", "caption": "Link", "control": "link_browser" },
// To use a media browser control, set field.control to "media_browser":
{ "name": "image", "caption": "Image", "control": "media_browser" },
// To use a WYSIWYG HTML editor:
// 1. Add a field, and set field.control="htmleditor":
{ "name": "body", "control": "htmleditor" },
// 2. In the component render template, add an element with "cms-content-editor" attribute set to the field name:
// <div cms-content-editor="item.<fieldName>">Default Value</div>
// Example of a dropdown control:
{ "name": "content_layout", "caption": "Layout", "control": "dropdown", "default": "all",
"lov": { "values": { "all": "Title + Body", "title": "Title Only", "body": "Body Only", "none": "None" } }}
],
//(Optional) jsHarmony Model Layout for Page Editor Component popup.
// "form", "grid", or "grid_preview". Automatically set based on "multiple_items" property.
"layout": "grid_preview",
//(Optional) HTML added to the top of the Data Properties form
// * Any text in the "<componentFileName>.data.ejs" file will be appended to this property value
"ejs": "...HTML/EJS Code...",
//(Optional) CSS added when the Component Data form is rendered
// * Any text in the "<componentFileName>.data.css" file will be appended to this property value
"css": "...CSS Code...",
//(Optional) JS executed when the Component Data form is rendered
// * Any text in the "<componentFileName>.data.js" file will be appended to this property value
"js": "...JS Code...",
//(Optional) Override Page Editor render templates
"templates": {
//(CSS Selector) Override the template used to render a grid_preview row component preview
// * Define the template in data.ejs
"gridRowPreview": ".rowPreview",
//(CSS Selector) Override the template used to render a form component preview
// * Define the template in data.ejs
"itemPreview": ".itemPreview"
},
//(Optional) Width and height of grid popup window
"popup": [1000, 200],
//jsHarmony "oninit" hook for the form/item preview. Other standard jsHarmony hooks as also available
"oninit": "_this.oninit_form()",
//Additional CMS Page Editor hooks can be defined for the Component Data Editor
// To use a component data editor hook, add the following scripts to the data.js property or <componentFileName>.data.js file:
// onBeforeRenderGridRow :: Called before rendering a grid row. The renderConfig is passed for optional pre-processing.
// Usage: this.onBeforeRenderGridRow = function(renderConfig){ ... }
// onRenderGridRow :: Called when the grid row is rendered.
// Usage: this.onRenderGridRow = function(element, data, properties, cms, component){ ... }
// onBeforeRenderDataItemPreview :: Called before rendering the item preview. The renderConfig is passed for optional pre-processing
// Usage: this.onBeforeRenderDataItemPreview = function(renderConfig){ ... }
// onRenderDataItemPreview :: Called when the item preview is rendered.
// Usage: this.onRenderDataItemPreview = function(element, data, properties, cms, component){ ... }
},
//The following property is a shortcut for "properties.fields". Values are appended to the properties.fields array
"component_properties": [ ... field array ... ],
// or, if defined as an object, component_properties is a shortcut for "properties"
"component_properties": { ... },
//The following property is a shortcut for "data.fields". Values are appended to the data.fields array
"item_properties": [ ... field array ... ],
// or, if defined as an object, item_properties is a shortcut for "data"
"item_properties": { ... },
//Component Options
"options": {
//Editor Options
//--------------
//Defines how the component preview will be rendered when editing Component Data in the Grid and Form
// "expand" (default) expands preview to width of container. "collapse" shrinks container to fit preview
"component_preview_size": "expand",
//Defines how content components will be displayed in the editor preview (*on publish, content components do not have a container)
// "block" (default) displays the component in a separate block. "inline" enables components that flow with existing text
"editor_container": "block",
//(Array <string>) Parent menu hierarchy, so that the content component will be grouped under a flyout menu
"menu_parents": ["Parent 1","Parent 2"],
//JS Function that returns a boolean of whether or not to show the content component in the menu
// Parameters: jsh, cms, component, window (DOM)
"menu_visibility": "return cms.controller.page.page_template_id=='two-column';"
},
//Export rendered component to files on publish (For page / site components)
"export": [
//List of additional content files that will be exported by this component
// Multiple export items are supported - add an export item for each file that will be generated
{
//Where the export file will be generated
"export_path": "path/to/file.php",
//(Optional) Export render template. If not set, the component render template will be used
"template": "...HTML/EJS Render template...",
//(Optional) Remote render template.
"remote_template": "https://server/templates/components/content_element_name.export.routes.html?source=1&_=%%%timestamp%%%",
//If both "template" and "remote_template" are defined, "template" value will be prepended to "remote_template" content
//(Optional) Menu to be loaded into the "menu" Render Variable
"menu_tag": "main",
//(Optional) Data that will be passed to the component for rendering
"data": [{"itemField1":"value","itemField2":"value"},{"itemField1":"value1","itemField2":"value"}],
//(Optional) Property values that will be passed to the component for rendering
"properties": {"propertyName":"propertyValue"},
},
//Advanced Export Feature: "addFile"
//Multiple files can be generated from one export template using the "addFile" function
//If no export_path is specified, the template itself will need to call the "addFile" function to produce output files
{
"template": "<% addFile('config/file1.php', 'File content 1'); addFile('config/file2.php', 'File content 2'); %>",
}
]
}
Loading
