Linh Nguyen
Mar 31, 2020
(4 votes)

Improve OPE with client-side rendering (features out of beta in 11.24.0)

Several features to improve the client-side rendering in OPE have been tested with beta customers for a while. With EPiServer.CMS.UI 11.24.0, they have finally dropped the beta tag.

The features are:

  1. contentSaved: introduced in CMS UI 10.12.0 (Taking control of client-side rendering in OPE)

    When a property value has been saved, a message is published on the topic contentSaved, together with an object containing the content link to the content that was just updated.

    Now you can listen to this event with:

    // Wait for the scripts to run so we can use the 'epi' global object.
    window.addEventListener("load", function() {
        epi.subscribe("contentSaved", function(event) {
            console.log("On Page Edited!");

    The event will look like this:

        "contentLink": "6_164",
  2. epiReady: introduced in CMS UI 11.11.0 (Routing in a SPA with a working On-Page Editing experience)

    The epiReady event will be raised as soon as the iframe inside the UI is loaded. It contains information regarding if the current content is editable. In addition to that event, a few properties are set on the global epi object that are available in edit view. Those properties are:
    epi: {
        isEditable: false, // true in edit mode, and false in preview mode
        inEditMode: true,  // true in both edit mode and preview mode
        ready: true  // true if the property isEditable has been initialized        

    isEditable value will not be correct until the event has been raised. By looking at the ready property you will know if the property isEditable has been initialized or not.

    Here is a sample of how this event and properties could be used:

    const context = {
        inEditMode: false,
        isEditable: false
    // Listen to the `epiReady` event to update the `context` property.
    window.addEventListener('load', () => {
        // Expect `epi` to be there after the `load` event. If it's not then we're
        // not in any editing context.
        if (!window.epi) {
        function setContext() {
            // The event only has `isEditable`, but the epi object has both.
            context.inEditMode = window.epi.inEditMode;
            context.isEditable = window.epi.isEditable;
        // Check that ready is an actual true value (not just truthy).
        if (window.epi.ready === true) {
            // `epiReady` already fired.
        // The subscribe method won't be available in View mode.
        } else if (window.epi.subscribe) {
            // Subscribe if the `epiReady` event hasn't happened yet.
            window.epi.subscribe('epiReady', () => setContext());

  3. domUpdated: first introduced in CMS.UI 11.2.0 (Taking more control of client-side rendering in OPE 2). At that time, you needed to tell the OPE view to remap all the overlays on the page by publishing to the domUpdated topic like epi.publish("beta/domUpdated").
    From CMS.UI 11.4.0, you didn't need to publish to that topic anymore because the overlays automatically get updated. BUT, this feature applied only for beta users.

    From CMS.UI 11.24.0, it will work with all users - when a new element with the attribute data-epi-edit, or an existing element change their value to another property name (which makes the DOM changes), the overlays will update themselves automatically.

Related topics

Mar 31, 2020


Please login to comment.
Latest blogs
Display Child Pages in Content Delivery API Response

The below example will implement an instance of IContentConverterProvider to customise the serialisation of PageData and output child pages in the...

Minesh Shah (Netcel) | Oct 4, 2022

Bring the Report Center back in Optimizely CMS 12

The Report Center has been a part of Optimizely CMS since its first debut in version 5R2 in 2008, but in CMS 12, it's removed! Don't despair! Make...

Tomas Hensrud Gulla | Oct 4, 2022 | Syndicated blog

Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog

Optimizely names Luminary Senior Developer, Ynze Nunnink, OMVP

Luminary Senior Developer and Optimizely Lead, Ynze Nunnink has secured the coveted position of Optimizely MVP. Earning a Platinum badge for his...

Ynze | Oct 2, 2022 | Syndicated blog