How to open page in universal editor | Community
Skip to main content
November 23, 2024
Solved

How to open page in universal editor

  • November 23, 2024
  • 3 replies
  • 1130 views

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.

Best answer by daniel-strmecki

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

3 replies

Shashi_Mulugu
Community Advisor
Community Advisor
November 23, 2024
narendragandhi
Community Advisor
Community Advisor
November 24, 2024

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

November 24, 2024

Thank you

daniel-strmecki
Community Advisor and Adobe Champion
daniel-strmeckiCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
November 24, 2024

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

arunpatidar
Community Advisor
Community Advisor
November 25, 2024

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

Arun Patidar
daniel-strmecki
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
November 25, 2024

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