How to open page in universal editor

6 replies
1137 views
Translate

I have React app instrumented with Universal Editor attributes.
I want to be able to open page in Universal Editor from AEM.

I followed this article https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/sites/authoring/universal-editor/templates
And this https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/sites/authoring/universal-editor/navigation

But don't see any option to open a page using Universal Editor in my local AEM. I used latest SDK to setup my local instance.

How can i open the page from local AEM in Universal Editor?
Also it is not clear how to configure the React App URL so AEM know how to open it.

daniel-strmeckiAccepted solution

New Participant

Hi @bohdanyurevych,

I did solve that in my Next.js demo, you can watch it here: https://www.youtube.com/watch?v=wJx4kLeGVuc

So the solution was to add a custom button in /apps/wcm/core/content/sites:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="cq:Page">
    <jcr:content
        jcr:mixinTypes="[sling:VanityPath]"
        jcr:primaryType="nt:unstructured"
        jcr:title="AEM Sites"
        sling:resourceType="granite/ui/components/shell/collectionpage"
        sling:vanityOrder="{Long}301"
        sling:vanityPath="/sites"
        consoleId="cq-sites-pages-pages"
        modeGroup="cq-siteadmin-admin-childpages"
        omnisearchLocationPath="/libs/granite/omnisearch/content/metadata/site"
        pageURITemplate="/sites.html{+id}${empty param.rootpath ? &quot;&quot;: granite:concat(&quot;?rootpath=&quot;, param.rootpath)}"
        targetCollection=".cq-siteadmin-admin-childpages">
        <actions jcr:primaryType="nt:unstructured">
            <selection jcr:primaryType="nt:unstructured">
                <univeral_editor
                    granite:rel="cq-siteadmin-admin-actions-edit-activator"
                    granite:title="Edit page in Universal Editor"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/collection/action"
                    action="cq.wcm.open"
                    activeSelectionCount="multiple"
                    icon="edit"
                    target=".cq-siteadmin-admin-childpages"
                    text="Universal Editor"
                    variant="actionBar">
                    <data
                        jcr:primaryType="nt:unstructured"
                        href.uritemplate.abs="/bin/v1/universal-editor?page={+item}"/>
                </univeral_editor>
            </selection>
        </actions>
    </jcr:content>
</jcr:root>

Since the path of the custom button cannot be an external link, I had to write my own Servlet:

@Component(service = Servlet.class)
@SlingServletPaths({ "/bin/v1/universal-editor" })
public class UniversalEditorRedirectServlet extends SlingSafeMethodsServlet {

    private static final String UNIVERSAL_EDITOR_PATH = "https://experience.adobe.com/#/@assaabloy/aem/editor/canvas/nexts-aem-universal-editor-six.vercel.app/api/draft?slug=";

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException {
        String page = request.getParameter("page");
        String slug = page.substring(19);
        response.sendRedirect(UNIVERSAL_EDITOR_PATH + slug);
    }
}

Hope this helps,

Daniel

daniel-strmeckiAccepted solution

New Participant

Hi @bohdanyurevych,

I did solve that in my Next.js demo, you can watch it here: https://www.youtube.com/watch?v=wJx4kLeGVuc

So the solution was to add a custom button in /apps/wcm/core/content/sites:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="cq:Page">
    <jcr:content
        jcr:mixinTypes="[sling:VanityPath]"
        jcr:primaryType="nt:unstructured"
        jcr:title="AEM Sites"
        sling:resourceType="granite/ui/components/shell/collectionpage"
        sling:vanityOrder="{Long}301"
        sling:vanityPath="/sites"
        consoleId="cq-sites-pages-pages"
        modeGroup="cq-siteadmin-admin-childpages"
        omnisearchLocationPath="/libs/granite/omnisearch/content/metadata/site"
        pageURITemplate="/sites.html{+id}${empty param.rootpath ? &quot;&quot;: granite:concat(&quot;?rootpath=&quot;, param.rootpath)}"
        targetCollection=".cq-siteadmin-admin-childpages">
        <actions jcr:primaryType="nt:unstructured">
            <selection jcr:primaryType="nt:unstructured">
                <univeral_editor
                    granite:rel="cq-siteadmin-admin-actions-edit-activator"
                    granite:title="Edit page in Universal Editor"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/collection/action"
                    action="cq.wcm.open"
                    activeSelectionCount="multiple"
                    icon="edit"
                    target=".cq-siteadmin-admin-childpages"
                    text="Universal Editor"
                    variant="actionBar">
                    <data
                        jcr:primaryType="nt:unstructured"
                        href.uritemplate.abs="/bin/v1/universal-editor?page={+item}"/>
                </univeral_editor>
            </selection>
        </actions>
    </jcr:content>
</jcr:root>

Since the path of the custom button cannot be an external link, I had to write my own Servlet:

@Component(service = Servlet.class)
@SlingServletPaths({ "/bin/v1/universal-editor" })
public class UniversalEditorRedirectServlet extends SlingSafeMethodsServlet {

    private static final String UNIVERSAL_EDITOR_PATH = "https://experience.adobe.com/#/@assaabloy/aem/editor/canvas/nexts-aem-universal-editor-six.vercel.app/api/draft?slug=";

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException {
        String page = request.getParameter("page");
        String slug = page.substring(19);
        response.sendRedirect(UNIVERSAL_EDITOR_PATH + slug);
    }
}

Hope this helps,

Daniel

Translate

arunpatidar

New Participant

This is fantastic! Thanks, @daniel-strmecki , for sharing this. I'll be adding it to https://aemlinks.com/

Translate

Arun Patidar

daniel-strmecki

New Participant

Thanks @arunpatidar, will share it today on LinkedIn and would appreciate your feedback 🙂

Translate

narendragandhi

Level 1

Hi @bohdanyurevych

Please refer this post where the similar question was answered - https://experienceleaguecommunities.adobe.com/t5/edge-delivery-services-questions/issue-in-setting-up-universal-editor-local-service/m-p/655601

Basically the Universal Editor UI is only available in the AEM as a Cloud Service environments and you cannot open that in local AEM SDK. Hope this helps!

Narendra

Translate