Reference: Page Editor Hooks

• Page Preview Hooks
  • onBeforeRender
  • onRender
• Component Editor Hooks
  • onBeforeRenderGridRow
  • onRenderGridRow
  • onBeforeRenderDataItemPreview
  • onRenderDataItemPreview

Page Preview Hooks

Page Preview Hooks are executed when the component is rendered in the Page Editor / Page Preview.

In order to use Page Preview Hooks, either modify the Component Config "js" property, or add the hooks to the <componentFileName>.js file:

component.onRender = function(element, data, properties, cms, component) {
  /* Code Here */
}

onBeforeRender

Fired each time before the component is rendered in the Page Preview.  The renderConfig object can be manipulated before it is passed to the renderer.

component.onBeforeRender = function(renderConfig) {
  /* Code Here */
}

onRender

Fired each time after the component is rendered in the Page Preview

component.onRender = function(element, data, properties, cms, component) {
  /* Code Here */
}

Component Editor Hooks

The Component Editor Hooks are executed in the Component Editor popup, when a user goes to edit a component.

In order to use Component Editor Hooks, either modify the Component Config "data.js" property, or add the hooks to the <componentFileName>.data.js file.

The file should use the jsHarmony Model pattern, with the Component Editor hooks defined as methods of "jsh.App[modelid]" (the jsHarmony Model).

Only the necessary hooks should be added.  All hooks are listed below to explain how it works:

jsh.App[modelid] = new (function() {


  //Called before rendering a grid row. The renderConfig is passed for optional pre-processing.
  this.onBeforeRenderGridRow = function(renderConfig) {
    /* Code Here */
  }


  //Called when the grid row is rendered.
  this.onRenderGridRow = function(element, data, properties, cms, component) {
    /* Code Here */
  }


  //Called before rendering the item preview. The renderConfig is passed for optional pre-processing
  this.onBeforeRenderDataItemPreview = function(renderConfig) {
    /* Code Here */
  }


  //Called when the item preview is rendered.
  this.onRenderDataItemPreview = function(element, data, properties, cms, component) {
    /* Code Here */
  }

})();