Redirect the website from an Extension in the Universal Editor

[CarlosPe9]

Hi everyone,

We are working in a project with a React App and editing the content via Universal Editor. All content is being handled with content fragments. Including a content fragment model for pages.

Having that in mind, in order for the editor to create new pages, we developed an AIO extension that:

1. Opens a modal (with all the corresponding ExtensionRegistration, Spectrum components, etc...)

2. Has a form where the editor fill the required fields  to create the content fragment.

3. Fetch the CF models in order to have the corresponding ids

4. Post via API all the data in order to create the content fragment.

At this point everything is working fine, the remaining point that is left is that we want to redirect the user to a new URL. That URL is the Universal Editor with the new content fragment edition. Pictrure this as:

> The user creates a new page (content fragment) and then opens this new page in the Universal Editor to start adding content.

Since "everything inside de universal editor is an iframe" we can't redirect the whole web (we tried it using  `window.top.location.href`but since the extensions doesn't share the domain with de universal editor it has security issues).

Is there anyway that we can manage this problem?

Thanks!

Carlos

[daniel-strmecki]

Hi @CarlosPe9,

sorry that I don't have a direct answer to your problem, but I was wondering why are you building a custom solution for something that can be done OOTB with AEM Sites?

In case you want to learn more, have a look at my demo: https://meticulous.digital/blog/f/a-true-enterprise-jamstack-cms-combining-aemaacs-and-nextjs

Best regards,

Daniel

[CarlosPe9]

Hi Daniel!

Sorry for the late response, the thing is that we want to provide the editors the best experience and keep them in the Universal Editor both to create new content fragments and inline editings

Hope it clarifies! 

Thanks, 

Carlos

[sarav_prakash]

Hi @CarlosPe9 , your usecase is very interesting. You are implementing a complete custom product with authoring experience using universal editor and AIO. 

Your specific question, I tried on my app with your same solution and it works for me. 

1. I added a change button on my app with onClick={changeUrl} and changeUrl function implemented as

const changeUrl = () =>
  (window.top.location.href =
    "https://experience.adobe.com/#/@**/aem/editor/canvas/**-contenthub.adobeio-static.net/#/faq");

• I switched to Preview mode and clicked on my change button 
• The page refreshes with the universal editor reloading to the hardcoded url 

So solution is same as you dictated. Initially I tried `window.location.href`, it failed, next switched to `window.top.location.href` and it worked. 

So you are saying, within your AIO form, after API success, when you do window.top.location.href with absolute url, it is still failing? Any more clue of what exact error you are running into?

[CarlosPe9]

Hi Sarav!

The thing is that your are doint it inside your app right? Not from the extension tools that is where we are developing our custom tools (such as create a new CF of any type or several of the in a batch).

As a workaround we added a "copy url and open in a new tab button" with the new editable page url (concatenated with the experience.adobe...etc) but unable to redirect the webapp iframe from the Extensions.

Thanks for your response! 

Carlos

[FelixDe · Accepted solution]

Hi Carlos,

We have a new feature in the Universal Editor API, that is still undocumented that might just let you do what you want.

Using the connection object that you retrieve in the Extension. (https://developer.adobe.com/uix/docs/services/aem-universal-editor/api/commons/#building-extension-u...), you can get access to a Universal Editor API that will let you change the URL loaded in the Universal Editor (the address of the CF/Page) just like if you were to type the adress in the navigation bar of the Universal Editor.

Try this snippet: 

await connection.host.editorActions.navigateTo(newPath);

[CarlosPe9]

Hi Felix,

It works! thank you so much for your help.

Bests,

Carlos