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 |