Linh Nguyen
Mar 31, 2020
  1950
(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!");
            console.log(event.contentLink);
        }
    }

    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) {
            return;
        }
    
        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.
            setContext();
    
        // 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

Comments

Please login to comment.
Latest blogs
Improve error handling for visitor groups

In CMS UI 12.15.0 we added several improvements in handling errors for visitor groups. The visitor group list and detailed visitor group page will...

Linh Nguyen | Dec 8, 2022

Optimizely SendGrid SMTP host is deprecated

SendGrid is a services for sending email that is included in Optimizely DXP. Previously smtp.episerver.net was the recommended SMTP server to use,...

Tomas Hensrud Gulla | Dec 4, 2022 | Syndicated blog

Hosting Optimizely CMS 12 on Docker Engine

Since Optimizely CMS can now be deployed as a Docker container, here is a demonstration of building, running and scaling an Optimizely CMS 12 site ...

Stefan Holm Olsen | Dec 4, 2022 | Syndicated blog

How to use CacheTagHelper with content areas in Optimizely CMS 12

I might be going out on a limb here - if you have a better solution, feel very free to share it!  Upgrading your Optimizely web application from .N...

Andreas J | Dec 2, 2022

The 1001st Piece in your 1000 Piece Puzzle: .NET Default Interface Functions

I was recently working with a client who wanted a reasonably large subsystem added to Optimizely that would add automated management to their...

Greg J | Nov 28, 2022 | Syndicated blog

Video Demonstration, creating a CMS12 Alloy Sample Site

Hey All Below you will find a quick video demonstration on how to install a local version of Alloy Sample based on CMS12 / .Net 6. As you will see ...

Minesh Shah (Netcel) | Nov 28, 2022