Reference: Render Functions

• Using Render Functions
• Built-in Render Functions
• Publish-only Render Functions

Using Render Functions

Render Functions are used to apply the Page Properties to the page.

Page Properties are defined in the cms-page-config tag, for example:

"properties": {
  "fields": [
    { "name": "headerImage", "caption": "Header Image", "control": "media_browser"},
    { "name": "showTitle", "caption": "Show Title", "default": "Y", "control": "checkbox", "controlparams": { "value_true": "Y", "value_false": "N" } },
    { "name": "bodyClass", "caption": "Body CSS Class", "controlstyle": "width:400px"},
    { "name": "bodyStyle", "caption": "Body CSS Style", "controlstyle": "width:400px"},
  ]
}

In order to apply the Page Properties to the page, add the cms-onRender attribute to an element.  For example, the following code would hide the title tag if showTitle was set to "N":

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

Page Editor vs Publish Rendering

In the Page Editor, Render Functions are applied each time the Page Properties are updated.

During Publish, however, the Render Functions are applied in one pass to the resulting static HTML.

This can result in slightly different behavior in some Render Functions between Page Preview and Publish.

For example, in the Page Editor, if "showIf" condition evaluates to false, it will hide the DOM element, so it can restore it later if necessary.

During Publish, however, if the "showIf" condition evaluates to false, it will completely remove the HTML from the final page.

Built-in Render Functions

addClass(classNames)
setClass(classNames)
* Add classNames to the element.
* Note: Class name can reference a page property or contain any valid JavaScript
* ex: addClass(page.properties.bodyClass)
* ex: addClass(page.properties.bodyClass||'basicPage')

addStyle(styles)
setStyle(styles)
* Add styles to the element.
* Note: Styles can reference a page property or contain any valid JavaScript
* ex: addStyle(page.properties.bodyStyle)
* ex: addStyle("background-image:url("+JSON.stringify(page.properties.headerImage)+");")

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

Publish-only Render Functions

The following functions are only available in publish templates:

include(pathFromRoot)
* Include another page into this page
* Note: Path should be root-relative to the publish root folder
* ex: <%-include('/path/to/page.html')%>