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/...
And this https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/sites/authoring/...
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.
Solved! Go to Solution.
Views
Replies
Total Likes
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 ? "": granite:concat("?rootpath=", 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
@BohdanYurevych please follow this page on how you can use universal-editor in your local
Or
This page where it shows how to open page in Adobe universal-editor
Please refer this post where the similar question was answered - https://experienceleaguecommunities.adobe.com/t5/edge-delivery-services-questions/issue-in-setting-u...
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
Thank you
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 ? "": granite:concat("?rootpath=", 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
This is fantastic! Thanks, @daniel-strmecki , for sharing this. I'll be adding it to https://aemlinks.com/
Thanks @arunpatidar, will share it today on LinkedIn and would appreciate your feedback
Views
Likes
Replies