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

[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?