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
Loading