Try our conversational search powered by Generative AI!

Adding attributes for editing "Name" property to element after load breaks OPE

Fixed in

EPiServer.CMS.UI 11.11.0

(Or a related package)

Created

Oct 12, 2018

Updated

Oct 29, 2018

Area

CMS UI

State

Closed, Fixed and tested


Description

Steps to reproduce:
1. Add the following code at the end of the body tag i _Root.cshtml in the Alloy templates:

        <h2 id="editable">
            Not working example.
        </h2>
        <script>
            window.addEventListener("load", function () {
                // Wait one second, so the DOM changes will trigger a domUpdated event
 
                // This fails.
                setTimeout(function() {
                    // Update only the attributes on the pre-existing element. This will trigger a domUpdated and create an overlay, but clicking that overlay will NOT work.
                    var editableElement = document.getElementById("editable");
                    editableElement.setAttribute("data-epi-property-edittype", "floating");
                    editableElement.setAttribute("data-epi-property-render", "none");
                    editableElement.setAttribute("data-epi-property-name", "name");
                }, 1000);
 
                // This works.
                setTimeout(function() {
                    // Create an element with the attributes, then add it to the DOM. This will trigger a domUpdated and create an overlay, and clicking the overlay works.
                    var element = document.createElement("h2");
                    element.innerText = "Working example.";
                    element.setAttribute("data-epi-property-name", "name");
                    element.setAttribute("data-epi-property-render", "none");
                    element.setAttribute("data-epi-property-edittype", "floating");
                    document.body.appendChild(element);
                }, 1000);
            });
        </script>
    </body>

2. Go to edit mode on the start page of the Alloy templates.
3. Edit the first OPE box ("This element has the edit attributes added after load and should be editable after 1 second.").

Expected:
A floating editor opens ands allow editing of the page's name.

Actual:
No floating editor opens. There is an error in the console: "TypeError: property is undefined".

In order for the change to be visible, Beta features need to be enabled. Add

<add name="EPiBetaUsers" type="EPiServer.Security.AuthenticatedRole, EPiServer.Framework" />

to providers in web.config.
https://world.episerver.com/documentation/Items/Installation-Instructions/beta-features/