Overview Page Templates Component Templates Web Snippet Templates Site Config

Template Quick Reference

The Quick Reference provides commonly-used tags and examples of Page Templates, Component Templates, Web Snippet Templates, and the Site Config.

Visit the jsHarmony CMS Resources site for extended documentation, video tutorials, and additional examples.

Page Templates

Full documentation and examples available in the jsHarmony CMS Page Template Reference

-- cms-title
<h1 cms-title>Page Title</h1>

-- cms-content-editor
<div cms-content-editor="page.content.body"></div>
<div cms-content-editor="body"></div>

-- cms-onRender
<body cms-onRender="addClass(page.properties.bodyClass);  addStyle(page.properties.bodyStyle);">
<h1 cms-title cms-onRender="showIf(page.properties.showTitle!='N');">Page Title</h1>

-- cms-component
<div cms-component="sidebar"></div>
<div cms-component="menus/main.top" cms-menu-tag="main"></div>
<div cms-component="tiles" cms-component-properties='{"cssClass":"testClass"}' cms-component-data='[{"image":"test"}]'></div>
<div cms-component="analytics" cms-component-remove-container></div>

-- cms-component in Standalone Template or client-side JS with JSON export:
<div cms-component="breadcrumbs" cms-component-content="page.content.breadcrumbs"></div>
  * In the Page Template Config, set:
    {
      "templates": { "publish": "format:json" },
      "content": { "breadcrumbs": "<div cms-component='breadcrumbs'></div>" }
    }

-- cms-template
<div cms-content-editor="body" cms-template="one-column"></div>

-- removeOnPublish
<script type="text/javascript" src="editor_extensions.js" class="removeOnPublish"></script>

-- Page Config
<cms-page-config>...</cms-page-config>
<script type="text/cms-page-config">
  {
    "title": "Generic",
    "content_elements": {
      "subhead": { "type": "text", "title": "Subhead" },
      "body": { "type": "htmleditor", "title": "Body" }
    },
    "options": {
      "page_toolbar": { "dock": "top" }
    },
    "properties": {
      "fields": [
        { "name": "showTitle", "caption": "Show Title", "type": "varchar", "length": "32", "default": "Y",
          "control": "checkbox", "controlparams": { "value_true": "Y", "value_false": "N" } },

        { "name": "showSubhead", "caption": "Show Subhead", "type": "varchar", "length": "32", "default": "Y",
          "control": "checkbox", "controlparams": { "value_true": "Y", "value_false": "N" } },
  
        { "name": "bodyClass", "caption": "Body CSS Class", "type": "varchar", "length": 1024,
          "control": "textbox", "controlstyle": "width:400px", "validate": ["MaxLength:1024"]},
  
        { "name": "bodyStyle", "caption": "Body CSS Style", "type": "varchar", "length": 1024,
          "control": "textbox", "controlstyle": "width:400px", "validate": ["MaxLength:1024"]}
      ]
    }
  }
</script>

=======================================
Inline Component / Websnippet Templates
=======================================
-- Inline Component Template
<script type="text/cms-component-template">
  <cms-component-config>
  {
    "id": "banner",
    "title": "Banner",
    "target": "content",
    "icon": "material:view_module",
    "component_properties": [
      { "name": "cssStyle", "caption": "CSS Style" },
      { "name": "cssClass", "caption": "CSS Class" },
    ],
    "item_properties": [
      { "name": "image", "caption": "Image", "control": "media_browser", "validate": ["Required"]},
      { "name": "link", "caption": "Link", "control": "link_browser"},
      { "name": "title", "control": "htmleditor" },
      { "name": "body", "control": "htmleditor" },
    ]
  }
  </cms-component-config>
  <div ...>
    ... Component HTML ...
  </div>
</script>

-- Component Instance
(See above : cms-component )

-- Inline Websnippet Template
<script type="text/cms-websnippet-template">
  <cms-websnippet-config>
    {
      "title": "Web Snippet Title",
      "description": "Web Snippet Description"
    }
  </cms-websnippet-config>
  <div ...>
    ... Websnippet HTML ...
  </div>
</script>

=================================
JavaScript CMS onRender Functions
=================================
addClass(classNames) / setClass(classNames)
  * Adds the class to the element.  Class name can reference a page property.
  ex: addClass(page.properties.bodyClass)

addStyle(styles) / setStyle(styles)
  * Adds the styles to the element.  Styles can reference a page property.
  ex: addStyle(page.properties.bodyStyle)

showIf(condition) / toggle(condition)
  * Hide the element if it the condition is not met
  ex: showIf(page.properties.showTitle!='N')

setText(val) / setHTML(val)
  * Set text or HTML of the element to the target value
  ex: setText(page.properties.title)

===========================
JavaScript CMS Editor Hooks
===========================
cms.onInit: function(jsh){ }
  * Fired after the core jsHarmony script is loaded, but before jsHarmony CMS scripts are loaded
  if(window.jsHarmonyCMSInstance) jsHarmonyCMSInstance.onInit = function(jsh){ /* Code Here */ }

cms.onLoad: function(jsh){ }
  * Fired after the core jsHarmony CMS is loaded, but before the Page Editor is loaded
  if(window.jsHarmonyCMSInstance) jsHarmonyCMSInstance.onLoad = function(jsh){ /* Code Here */ }

cms.onLoaded: function(jsh){ }
  * Fired when the jsHarmony CMS Page Editor is fully loaded
  if(window.jsHarmonyCMSInstance) jsHarmonyCMSInstance.onLoaded = function(jsh){ /* Code Here */ }

cms.onRender: function(page){ }
  * Fired each time the Page Editor renders the page content (on load and after each save)
  if(window.jsHarmonyCMSInstance) jsHarmonyCMSInstance.onRender = function(page){ /* Code Here */ }

cms.onGetControllerUrl: function() => url
  * Fired on initialization.  Can be used to return the URL of a custom CMS Page Controller.
  * See jsharmony-cms/clientjs/jsHarmonyCMS.Controller.js for a template
  if(window.jsHarmonyCMSInstance) jsHarmonyCMSInstance.onGetControllerUrl = function(){ return 'https://domain/path/to/controller.js'; }

cms.onGetFilePickerParameters: function(filePickerType, url){ }
  * Override the standard file picker querystring parameters
  if(window.jsHarmonyCMSInstance) jsHarmonyCMSInstance.onFilePickerCallback = function(filePickerType, url){
    if(overrideFilePicker){
      return { init_page_path: 'path/to/page'; }
    }
  }
  
cms.onFilePickerCallback: function(jdata){ }
  * Override the standard file picker completion callback
  if(window.jsHarmonyCMSInstance) jsHarmonyCMSInstance.onFilePickerCallback = function(jdata){
    if(overrideFilePicker){
      //Handle response
      var cms = jsHarmonyCMSInstance;
      cms.filePickerCallback('path/to/path#@JSHCMS', jdata);
      return true;
    }
  }

=================
Publish Functions
=================
* The following functions are only supported in publish templates, not editor templates

Page Includes
  On publish, pages can include other pages via:
    <%-include('/path/to/page')%>
  Path should be absolute relative to the publish root folder

Component Templates

Full documentation and examples available in the jsHarmony CMS Component Template Reference

================
Component Config
================
<cms-component-config>...</cms-component-config>
<script type="text/cms-component-config">
{
  "title": "Tiles",
  "icon": "material:view_module",
  "multiple_items": true,
  "remote_templates": {
    "publish": "localpublishtiles.publish.html"
  },
  "component_properties": [
    { "name": "cssStyle", "caption": "CSS Style" },
    { "name": "cssClass", "caption": "CSS Class" },
  ],
  "item_properties": [
    { "name": "image", "caption": "Image", "control": "media_browser", "validate": ["Required"]},
    { "name": "link", "caption": "Link", "control": "link_browser"},
    { "name": "cssClass", "caption": "CSS Class"},
    { "name": "title", "control": "htmleditor" },
    { "name": "body", "control": "htmleditor" },
  ]
}
</script>
<script type="text/cms-component-config">
{
  "title": "Routers",
  "target": "page",
  "export": [
    {
      "export_path": "menus/main.html",
      "menu_tag": "top",
    }
  ]
}
</script>

====
Tags
====
jsh-for-item
jsh-for-item="item"
jsh-for-item-variable="menuitem"

jsh-foreach-item
jsh-foreach-item="item collection"
jsh-foreach-item-separator=" "
jsh-foreach-item-start="2"
jsh-foreach-item-end="4"
jsh-foreach-item-skip="2"
jsh-foreach-item-variable="menuitem"
jsh-foreach-item-index="i"

jsh-group-items
jsh-group-items="item collection"
jsh-group-items-into="3"
jsh-group-items-by="item.type"
jsh-group-items-subgroup="items"
jsh-group-items-index="cnt"
jsh-group-items-separator=" "

jsh-template="templateName"
jsh-template-items="items"

cms-content-editor
cms-content-editor-type
cms-component-editor-remove-class
cms-component-editor-add-class
cms-image-dimensions

===================
EJS Container Slurp
===================
<%~...%>

=========
Functions
=========
_ (Lodash)
escapeHTML
escapeRegEx
stripTags(str, ignore, options)
iif(condition, valueTrue, valueFalse)
isNullUndefinedEmpty(val)
isNullUndefined(val)
renderTemplate(templateName, items)
getEJSOutput(f)
  var str = getEJSOutput(function(){ -%>HTML<% })
getSitemapURL(sitemap_item)
getMenuURL(menu_item)
getMenuImageURL(menu_item)
renderPlaceholder({ errors: '' })
getMediaThumbnails(url)
getPageVar(key)
setPageVar(key, val)
hash(val)

* Only available for Export Components
addFile(filePath, fileContent)
hasFile(filePath)
deletefile(filePath)

================
Render Variables
================
renderType
templateName
baseUrl
isInEditor
isInPageEditor
isInComponentEditor
componentRenderClass
sitemap
menu  (from cms-menu-tag)
data  { item: <object>, items: Array<object> }
properties

--- Aliases ---
items => data.items
item => data.item
component => properties

--- Content / Page Component Variables ---
page
template

---- Export Variables ---
sitemaps
menus
site_redirects
page_paths
branchData
publish_params

===============
Menu Properties
===============
menu
  tag
  tree
  allItems
  currentItem
  --- Aliases ---
  topItems => tree
  items => tree
  topItems => tree
  topItems => tree
  --- System ---
  menu_tag => tag
  menu_key
  menu_item_tree => tree
  menu_items => allItems

menu_item
  id
  children
  getSiblings()
  parents
  parent
  depth
  html
  text
  tag
  class
  style
  href
  onclick
  target
  selected
  --- System ---
  menu_item_id
  menu_item_parent_id
  menu_item_path
  menu_item_text
  menu_item_type: 'TEXT','HTML'
  menu_item_tag => tag
  menu_item_style => style
  menu_item_class => class
  menu_item_link_type: 'PAGE','MEDIA','URL','JS'
  menu_item_link_dest
  menu_item_link_target 'NEWWIN',''
  menu_item_image
  menu_item_image_path
  menu_item_children => children

==================
Sitemap Properties
==================
sitemap
  tree
  allItems
  --- Content / Page Component Variables ---
  currentItem
  root
  parents
  children
  breadcrumbs
  --- Aliases ---
  topItems => tree
  self => currentItem
  item => currentItem
  --- Export Variables ---
  sitemap_items

sitemap_item
  id
  children
  getSiblings()
  siblings
  parents
  parent
  depth
  html
  text
  tag
  class
  style
  href
  onclick
  target
  selected
  --- System ---
  sitemap_item_id
  sitemap_item_parent_id
  sitemap_item_path
  sitemap_item_text
  sitemap_item_type: 'TEXT','HTML'
  sitemap_item_tag => tag
  sitemap_item_style => style
  sitemap_item_class => class
  sitemap_item_exclude_from_breadcrumbs
  sitemap_item_exclude_from_parent_menu
  sitemap_item_hide_menu_parents
  sitemap_item_hide_menu_siblings
  sitemap_item_hide_menu_children
  sitemap_item_link_type: 'PAGE','MEDIA','URL','JS'
  sitemap_item_link_dest
  sitemap_item_link_target: 'NEWWIN',''

=================
Publish Functions
=================
* The following functions are only supported in publish templates, not editor templates

Page Includes
  On publish, components can include other pages via:
    <%-include('/path/to/page')%>
  Path should be absolute relative to the publish root folder


========
Examples
========

Content Component
-----------------
<section class="tiles <%=component.cssClass%>" style="<%=component.cssStyle%>">
  <div jsh-group-items-into="3" class="inner flex flex-3" cms-component-editor-remove-class="flex-3">
    <div jsh-foreach-item class="flex-item box <%=item.cssClass%>">
      <div class="image fit">
        <img src="<%=item.image%>" alt="<%=item.title%>" />
      </div>
      <div class="content">
        <a href="<%~item.link%>">
          <h3 cms-content-editor="item.title" cms-content-editor-type="simple">Default Title</h3>
          <div cms-content-editor="item.body">Default Body <b>Text</b></div>
        </a>
      </div>
    </div>
  </div>
</section>


Simple Menu
-----------
<div jsh-foreach-item="menu.topItems" jsh-foreach-item-separator=" " class="nav_button_container <%-item.class%>" style="<%~item.style%>">
  <a href="<%~item.href%>" onclick="<%~item.onclick%>" target="<%~item.target%>"><%-item.html%></a>
</div>

Nested Menu
-----------
<ul jsh-template="menu">
  <li jsh-foreach-item class="<%~item.class%>" style="<%~item.style%>">
    <a href="<%~item.href%>" onclick="<%~item.onclick%>" target="<%~item.target%>"><%-item.html%></a>
    <%-renderTemplate('menu', item.children)%>
  </li>
</ul>
<%-renderTemplate('menu', menu.tree)%>


Sidebar
-------
<div class="xsidenav">
  <div jsh-for-item="sitemap.root" class="xsidenav_head" style="<%~item.style%>">
    <div class="xsidenav_item">
      <a href="<%~item.href%>" onclick="<%~item.onclick%>" target="<%~item.target%>"><%-item.html%></a>
    </div>
  </div>
  <div class="xsidenav_tree">
    <ul jsh-template="sitemap-items">
      <li jsh-foreach-item class="<%~item.class%>" style="<%~item.style%>">
        <div class="xsidenav_item <%=iif(item.selected,"selected")%>">
          <a href="<%~item.href%>" onclick="<%~item.onclick%>" target="<%~item.target%>"><%-item.html%></a>
        </div>
        <%-renderTemplate("sitemap-items", item.children)%>
      </li>
    </ul>
    <%-renderTemplate("sitemap-items", ((!sitemap.parents && (sitemap.tree.length > 1)) ? sitemap.tree : sitemap.root.children))%>
  </div>
</div>

Breadcrumbs
-----------
<div jsh-for-item="sitemap.currentItem">
  <% var breadcrumbs = _.filter(sitemap.parents.concat(sitemap.currentItem), function(item){ return !item.sitemap_item_exclude_from_breadcrumbs }); %>
  <a jsh-foreach-item="breadcrumbs" jsh-foreach-item-separator=" / " href="<%~(!item.selected && item.href)%>" onclick="<%~item.onclick%>" target="<%~item.target%>"><span class="<%~iif(item.selected,'current_page')%>"><%-item.html%></span></a>
</div>

Web Snippet Templates

Full documentation and examples available in the jsHarmony CMS Web Snippet Reference

-- Web Snippet Config
<cms-websnippet-config>...</cms-websnippet-config>
<script type="text/cms-websnippet-config">
{
  "title": "Button: Call to Action",
  "description": "Link button used as a Call to Action",
}
</script>

Site Config

Full documentation available in the jsHarmony CMS Site Config Reference

-- Site config
{
  "menus": [ // Array of required menus
    { "name": "Main Menu", "tag": "main", "max_depth": 2 }
  ],
  "defaultEditorConfig": {   // Default GUI page editor config
    "webSnippetsPath": "/templates/websnippets/listing.html",  // Web snippets listing path
    "materialIcons": false   // Whether to enable Material Icons in the Editor
                             //   If enabled, Material Icons Font CSS Link must be added to the Page Template HTML
  }
}