Redirect the website from an Extension in the Universal Editor | Community
Skip to main content
CarlosPeJ
CarlosPeJ
Level 2
December 27, 2024
Solved

Redirect the website from an Extension in the Universal Editor

  • December 27, 2024
  • 3 replies
  • 1195 views

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

    Best answer by FelixDe

    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-ui), 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);

     

    3 replies

    daniel-strmecki
    Community Advisor and Adobe Champion
    daniel-strmeckiCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    December 27, 2024

    Hi @carlospej,

    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

      CarlosPeJ
      CarlosPeJAuthor
      Level 2
      January 14, 2025

      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
      Community Advisor
      sarav_prakashCommunity Advisor
      Community Advisor
      December 28, 2024

      Hi @carlospej , 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?

        CarlosPeJ
        CarlosPeJAuthor
        Level 2
        January 14, 2025

        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

         

         

         

         

          F
          Adobe Employee
          FelixDeAdobe EmployeeAccepted solution
          Adobe Employee
          January 22, 2025

          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-ui), 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);

           

            CarlosPeJ
            CarlosPeJAuthor
            Level 2
            January 23, 2025

            Hi Felix,

             

            It works! thank you so much for your help.

             

            Bests,

             

            Carlos

            Terms & ConditionsAccessibility statement

            Loading footer...