Improvements for client-side routing with OPE

Fixed in

EPiServer.CMS.UI 11.11.0

Created

Sep 21, 2018

Updated

Oct 26, 2018

Area

CMS UI

State

Closed, Acceptance tests pass


Description

Since this is a beta feature you need to enable `EPiBetaUsers` https://world.episerver.com/documentation/Items/Installation-Instructions/beta-features/

New beta isEditable feature

A new message will be published with topic "beta/epiReady", similar to the already existing "beta/contentSaved". The message will contain information regarding if the current content is editable. Together with a new beta field on the global window.epi object, a developer can know if a content is editable or not in their client side rendering code. An example of how to use this feature could be something like this:

// Listen to the `beta/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 logContext() {
        // The event only has `isEditable`, but the epi object has both properties.
        var context = { 
            inEditMode: window.epi.beta.inEditMode,
            isEditable: window.epi.beta.isEditable
        };
        console.log(context);
    }
 
    // Check for beta and that ready is an actual true value (not just truthy).
    if (window.epi.beta && window.epi.beta.ready === true) {
        // `beta/epiReady` already fired, so just grab the `isEditable` from the window.epi object.
        logContext();
    } else if (window.epi.subscribe) { // The subscribe method won't be available in View mode, so we need to check for it.
        // If the `beta/epiReady` event hasn't happened yet, then subscribe to it.
        window.epi.subscribe('beta/epiReady', () => logContext());
    }
});

Additional improvements

  • Adding editing attributes to an existing element after initial load will now enable editing overlays.
  • Styling for minimum size on editing elements added to prevent zero size editing overlays.