Try our conversational search powered by Generative AI!

Trigger server re-render of on-page-edit with contentSaved event

Vote:
 

Hi,

Is it possible to trigger a server re-render of the on-page-edit using the contentSaved event?
EDIT: Forgot to mention - without using [ReloadOnChange] attribute and/or @Html.FullRefreshPropertiesMetaData helper.

BTW. docs mention properties of epi object - inEditMode, isEditable and ready but they don't seem to exist anymore (both for CMS 11 and 12).
https://docs.developers.optimizely.com/content-management-system/docs/editing

#318486
Edited, Mar 05, 2024 11:49
Vote:
 

Following should work, put it just before closing body tag:

<script src="/episerver/cms/latest/clientresources/communicationinjector.js"></script>
<script>
    function setContext() {
        if (window.epi.isEditable) {
            window.epi.subscribe('contentSaved', (message) => {
                document.location.href = message.editUrl;
            });
        }
    }

    window.addEventListener('load', () => {
        if (!window.epi) {
            return;
        }

        if (window.epi.ready === true) {
            setContext();
        } else if (window.epi.subscribe) {
            window.epi.subscribe('epiReady', () => setContext());
        }
    });
</script>
#318487
Edited, Mar 05, 2024 13:09
Vote:
 

Hi Johan Petersson,

Thanks for the reply - I've tried this code and it doesn't seem to work, the epiReady event is never tiggered.
I'm using latest Alloy MVC template.
I've added some logs to check what works and what doesn't:

<script src="/episerver/cms/latest/clientresources/communicationinjector.js"></script>
<script>
    function setContext() {
        console.log('setContext 🔥')
        console.log('window.epi.isEditable: ', window.epi.isEditable)
        if (window.epi.isEditable) {
            window.epi.subscribe('contentSaved', (message) => {
                console.log('contentSaved 🔥')
                window.location.href = message.editUrl;
            });
        }
    }

    window.addEventListener('load', () => {
        console.log('load 🔥')
        console.log('window.epi: ', window.epi)
        if (!window.epi) {
            return;
        }

        console.log('window.epi.ready: ', window.epi.ready)
        console.log('window.epi.subscribe: ', window.epi.subscribe)
        if (window.epi.ready === true) {
            setContext();
        } else if (window.epi.subscribe) {
            console.log('epiReady subscribed')
            window.epi.subscribe('epiReady', () => setContext());
        }
    });
</script>

And that's result in dev tools:

No event is triggered on page/block edit.

#318490
Mar 05, 2024 13:48
Vote:
 

Sorry, but this is not really my domain so not sure what the issue is. The code I posted works perfectly fine on a standard Alloy site.

#318491
Mar 05, 2024 13:58
Vote:
 

Hi Johan Petersson,

I've recreated the Alloy again form template and tried the script again - this time the trigger worked.
However, the result is not exactly what should happen - the edit interface replaces the iframe content resulting with following:

#318493
Mar 05, 2024 14:19
Vote:
 

It should probably be document.location.href = message.editUrl. I've updated my example code above.

#318494
Mar 05, 2024 14:22
Vote:
 

I've experimented a bit, and it seems that it should be document.location.href = message.previewUrl instead of document.location.href = message.editUrl.
Then the content is actually rendered correctly.

#318495
Mar 05, 2024 15:34
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.