The Component Templates use HTML / EJS to take the Component Data and Component Properties, and transform them into the resulting HTML.
The Render Variables are built-in JavaScript variables that can be used to dynamically render component content and build advanced components.
Render Variables are used directly in the EJS:
<div>
<%=templateName%>
</div>
The following variables can be used in any Component Render Template EJS / HTML:
| renderType | (string) Component Type - "content", "page", or "site" |
| templateName | (string) Component Template Name |
| baseUrl | (string) The CMS server base URL <cms._baseurl> * On publish, baseUrl will be an empty string |
| componentRenderClass | (string) Unique class name for inline template styles or scripts * This class cannot be used outside of the component itself - is dynamically regenerated each time the component is rendered |
| isInEditor | (bool) Whether the render is in the Page Editor |
| isInPageEditor | (bool) Whether the render is in the Page Editor Preview |
| isInComponentEditor | (bool) Whether the render is in the Edit Component Popup |
| sitemap | (object) <cms.controller.sitemap> The primary sitemap * If sitemap is used in an Export Component, it will only contain the "sitemap_items" property |
| menu | (Optional) (object) <cms.controller.menus[menu_tag]> If the cms-menu-tag attribute is set on the component object or in the export parameters, the menu variable will be populated with that menu |
| data | (object: { item: <object>, items: Array<object> }) (Component Data Values) item :: (object) The Component Data item as an object, if the "multiple_items" component config property is false items :: (Array<object>) The Component Data Items array |
| properties | (object) (Component Properties Values) |
| --- Aliases --- | |
| items | Alias to the "data.items" Array (Component Data) |
| item | Alias to the "data.item" Object (Component Data) |
| component | Alias to the "properties" Object (Component Properties) |
Content components and page components provide the following additional render variables:
| page | (object) <cms.controller.page> |
| template | (object) <cms.controller.template> |
Site components provide the following additional render variables during export:
| sitemaps | (object) Dictionary of all sitemaps, indexed by sitemap type |
| menus | (object) Dictionary of all menus, indexed by menu tag |
| site_redirects | (Array) Site redirects, configured in the Pages > Redirects grid |
| page_paths | (object) Dictionary of Page URL to Page Path mapping * Pages that are the default documents in a folder will have two entries: /path/to/folder/ /path/to/folder/index.html |
| branchData | (object) Publish branch data |
| publish_params | (object) Publish target parameters |
The menu object has the following properties:
| tag | (string) Menu tag |
| tree | (Array<menu_item>) Top-level menu items * Tree can be traversed using the menu_item.children property |
| topItems | Alias for "tree" property |
| allItems | (Array<menu_item>) All items in the menu |
| items | Alias for "allItems" property |
| currentItem | (menu_item) The current selected menu item, based on the current page |
| --- System Properties --- | |
| menu_tag | Alias for "tag" property |
| menu_key | (number) CMS Menu Key identifier |
| menu_item_tree | Alias for "tree" property |
| menu_items | Alias for "allItems" property |
The menu_item object has the following properties:
| id | (number) Internal Menu Item ID |
| children | (Array<menu_item>) Array of this menu item's children |
| getSiblings() | (Function) Returns an array of this menu item's siblings |
| parents | (Array<menu_item>) Array of this menu item's parent hierarchy, tracing back to root |
| parent | (menu_item) This menu item's immediate parent |
| depth | (number) Depth of this menu item from root |
| html | (string) HTML for the menu item text |
| text | (string) Menu item text stripped of any HTML tags |
| tag | (string) The tag property, if defined in the menu item's Advanced Options |
| class | (string) CSS Class, if defined in the menu item's Advanced Options |
| style | (string) CSS Style, if defined in the menu item's Advanced Options |
| href | (string) Menu item URL. If the link type is "JS", this will be set to "#" |
| onclick | (string) Menu item onclick JS function, if the link type is "JS" |
| target | (string) Menu item link target - value is "_blank" if target is "New Window" |
| selected | (bool) Whether the current page is the same as the menu item link destination |
| ---- System Properties --- | |
| menu_item_id | Alias for "id" property |
| menu_item_parent_id | (number) ID of this menu item's immediate parent |
| menu_item_path | (Array<number>) The IDs of all menu items from the root to this item |
| menu_item_text | (string) The raw menu item text field |
| menu_item_type | (string) Menu item type - "TEXT" or "HTML" |
| menu_item_tag | Alias for "tag" property |
| menu_item_style | Alias for "style" property |
| menu_item_class | Alias for "class" property |
| menu_item_link_type | (string) Menu item link type - "PAGE", "MEDIA", "URL", or "JS" |
| menu_item_link_dest | (string) The raw menu item link destination |
| menu_item_link_target | (string) Menu item link target - "NEWWIN" or empty string |
| menu_item_children | Alias for "children" property |
The sitemap object has different properties available for Content / Page Components and Site Export Components.
Relative Sitemap Properties (Content / Page Components)
A "relative sitemap" is the relative to the current page, and factors in Advanced Sitemap Item Options, such as "Hide Parents", "Hide Siblings", and "Hide Children". Each page has a unique perspective of the sitemap, so the relative sitemap is the sitemap from the perspective of that page.
The relative sitemap properties are available to Content and Page Components:
| currentItem | (sitemap_item) Current sitemap item, based on the current page |
| tree | (Array<sitemap_item>) Top-level sitemap items in relative sitemap * Tree can be traversed using the sitemap_item.children property |
| topItems | Alias for "tree" property |
| allItems | (Array<sitemap_item>) All items in the relative sitemap |
| root | (sitemap_item) Root-most element of the relative sitemap |
| parents | (Array<sitemap_item>) Hierarchy from root to current sitemap item |
| children | (Array<sitemap_item>) List of current sitemap item's children |
| breadcrumbs | (Array<sitemap_item>) Breadcrumbs for the current page |
| self | Alias for "currentItem" property |
| item | Alias for "currentItem" property |
Export Properties (Site Components)
The following properties are available for Site components during Export:
| tree | (Array<sitemap_item>) Top-level sitemap items in sitemap * Tree can be traversed using the sitemap_item.children property |
| topItems | Alias for "tree" property |
| allItems | (Array<sitemap_item>) All visible items in the sitemap |
| sitemap_items | Array<sitemap_item> List of all items in the sitemap, including hidden items |
The sitemap_item object has the following properties:
| id | (number) Internal Sitemap Item ID |
| children | (Array<sitemap_item>) Array of this sitemap item's children |
| getSiblings() | (Function) Returns an array of this sitemap item's siblings |
| siblings | (Array<sitemap_item>) This sitemap item's siblings |
| parents | (Array<sitemap_item>) Array of this sitemap item's parent hierarchy, tracing back to root |
| parent | (sitemap_item) This sitemap item's immediate parent |
| depth | (number) Depth of this sitemap item from root |
| html | (string) HTML for the sitemap item text |
| text | (string) Sitemap item text stripped of any HTML tags |
| tag | (string) The tag property, if defined in the sitemap item's Advanced Options |
| class | (string) CSS Class, if defined in the sitemap item's Advanced Options |
| style | (string) CSS Style, if defined in the sitemap item's Advanced Options |
| href | (string) Sitemap item URL. If the link type is "JS", this will be set to "#" |
| onclick | (string) Sitemapitem onclick JS function, if the link type is "JS" |
| target | (string) Sitemap item link target - value is "_blank" if target is "New Window" |
| selected | (bool) Whether the current page is the same as the sitemap item link destination |
| ---- System Properties --- | |
| sitemap_item_id | Alias for "id" property |
| sitemap_item_parent_id | (number) ID of this sitemap item's immediate parent |
| sitemap_item_path | (Array<number>) The IDs of all sitemap items from the root to this item |
| sitemap_item_text | (string) The raw sitemap item text field |
| sitemap_item_type | (string) Sitemap item type - "TEXT" or "HTML" |
| sitemap_item_tag | Alias for "tag" property |
| sitemap_item_style | Alias for "style" property |
| sitemap_item_class | Alias for "class" property |
| sitemap_item_exclude_from_breadcrumbs | (bool) Whether to exclude this sitemap item from the breadcrumbs |
| sitemap_item_exclude_from_parent_menu | (bool) Whether to exclude this sitemap item from its parent's and siblings' relative sitemaps |
| sitemap_item_hide_menu_parents | (bool) Whether to exclude this sitemap item's parents from its relative sitemap |
| sitemap_item_hide_menu_siblings | (bool) Whether to exclude this sitemap item's siblings from its relative sitemap |
| sitemap_item_hide_menu_children | (bool) Whether to exclude this sitemap item's children from its relative sitemap |
| sitemap_item_link_type | (string) Sitemap item link type - "PAGE", "MEDIA", "URL", or "JS" |
| sitemap_item_link_dest | (string) The raw sitemap item link destination |
| sitemap_item_link_target | (string) Sitemap item link target - "NEWWIN" or empty string |
