Start page / Template development / ContentCreator / JavaScript API / Preview

JavaScript API: Preview

JavaScript object: top.WE_API.Preview
Developer API documentation: Preview

The Preview object provides functionality related to the ContentCreator preview, such as

Reloading the preview or parts thereof
Refreshing editor highlighting
Interacting with Multi Perspective Preview

Refreshing the Preview

Reloading the Entire Preview

void reload() - without parameters - initiates a reload of the entire preview, causing the entire page to be generated anew.

<script type="text/javascript">
    function reloadPreview() {
        top.WE_API.Preview.reload();
    }
</script>

<a href="#" onClick="reloadPreview();">Reload this page</a>

Reloading Specific DOM Elements

void reload(Element element) - parameterized with a JavaScript DOM element object - causes a reload of part of the document, reflecting changes to associated store elements:

If the DOM element passed as a parameter has an editor identifier (added with the function editorId() in the output channel definition), this DOM element will be reloaded.
Otherwise, the nearest surrounding DOM element with an editor identifier will be reloaded. If no surrounding DOM element with an editor identifier is present, the entire preview document will be reloaded.

Reacting to Preview Changes

In order to react to partial changes in the preview's DOM caused by ContentCreator (e.g. due to a drag-and-drop operation, after which only part of the document is reloaded), reload listeners may be registered.

void addElementReloadListener(ElementReloadListener listener) registers a function, either named or anonymous, which accepts a single parameter. If a partial document reload is triggered by ContentCreator functionality, this function is called with the DOM element which was reloaded as the function's parameter.

<script type="text/javascript">
    // Function that will be registered as a reload listener.
    function handlePartialReload(element) {
        // Determine if the reloaded DOM segment contains an element with a certain ID.
        if (element.id == "importantElementID") {
            // Reloaded element has ID "importantElementID".
            top.WE_API.Common.showMessage("Important DOM element was reloaded directly.");
        } else if (element.getElementById("importantElementID") != null) {
            // Reloaded DOM element contains a child element with ID "importantElementID".
            top.WE_API.Common.showMessage("Ancestor of important DOM element was reloaded.");
        }
    }

    // Register function "handlePartialReload" as a reload listener.
    top.WE_API.Preview.registerElementReloadListener(handlePartialReload);
</script>

Refreshing Editor Highlighting

Two functions aid in refreshing editor highlighting. This is essential for highly dynamic documents, whose content and layout may change due to interactions with the preview such as resizing the client window or performing drag and drop operations.

Repainting Visible Highlight Frames

void repaint() may be used to repaint any currently active highlight frames in the preview, resizing and repositioning these frames to match their associated DOM elements. This function is useful in callback functions for FS_BUTTON instances, where drag-and-drop operations may result in layout changes to a surrounding DOM element while the mouse pointer is still within this element's bounds and highlighting cannot automatically reflect these layout changes.

Rescanning a DOM Element for Highlightable Elements

void rescan(Element element) is parameterized with a DOM element object and scans this element as well as its child elements for editor identifiers. DOM elements with editor identifiers found during this scan will then be enabled for highlighting.

This function may be used in conjunction with operations that dynamically change the document's contents, such as inserting the rendered HTML of a page store section into the document flow without reloading the entire page.

Obtaining the Window Object

JavaScriptObject getWindow() may be used to obtain the window object currently associated with the preview frame.

Multi Perspective Preview

Multi Perspective Preview (MPP) is a ContentCreator feature which allows simulation of various user perspectives such as device type (e.g. desktop PC or smartphone) used to view a web page, time of visit, and user attributes (e.g. customer role, location, number of items in the shopping cart).

The Preview object of ContentCreator's JavaScript API provides several functions that allow access to the current time and custom parameters set in the MPP toolbar.

The JavaScript API does not provide information about the current viewport setting.

Identifying MPP State

boolean isParameterized() indicates whether MPP parameterization is active (true; the MPP toolbar is displayed in the user interface) or not (false; the MPP toolbar is not displayed).

Obtaining Parameters Set in the MPP Toolbar

The following functions provide information about the values currently set in the MPP toolbar. This allows dynamic adjustment of content in the preview to match these MPP settings, e.g. displaying certain HTML elements based on the currently selected date in the timeline or the currently active visitor role in custom MPP parameters.

JavaScriptObject getTimeParameter() provides the current date and time set in the MPP timeline.

Object getParameter(String name) provides the current value of the custom preview parameter. The parameter name indicates an input component with a matching name attribute in the page template used for MPP parameterization.

Setting Parameters in the MPP Toolbar

While working in the preview, it may become necessary to adjust MPP parameters, e.g. because the visitor role changes from "not logged in" to "logged in". The following functions allow setting MPP parameters so that the toolbar reflects the current state of the preview.

void setTimeParameter(JavaScriptObject date) sets the provided date and time in the MPP timeline.

void setParameter(String name, Object value) sets the value of the custom preview parameter in the MPP toolbar. The parameter name indicates an input component with a matching name attribute in the page template used for MPP parameterization, while the parameter value must be an object compatible with that input component's value type.

Print version | Page start