A Dynamic Sitemap Item Referring A Page Is Not Editable In Experience Manager

Experience Manager (PaaS/OnPrem)
1

Hi ,

I am using react sdk and spa-sdk. I created a page in the console. I have an index route in the SPA so it renders the page when referred by its URL. Also it is editable in the experience manager.

However, if I create a different sitemap item with a dynamic child (any) that refers this page, it shows up in the experience manager, but we can’t modify the content. Am I missing something obvious here or is this by design?

To give some more context with specifics:

  • I created a page product-detail in the console with some containers in it that is inherited by a prototype page.
  • Since this is a PDP I want to render this page when I call a dynamic endpoint of the PDP (e.g. /p/{productId}
  • So I created a sitemap item p with a child _any_ and set-up _any_ to refer the product-detail page.
  • Now in experience manager, in the sitemap, I see product-detail which when accessed I see the containers and are editable.
  • Now from within the experience manager if I follow a link e.g. /p/{some-product-id} it renders the content of product-detail but the containers are not editable.

Any help is highly appreciated.
Thanks in advance.

2

Hey Gopkumar,
your use-case is similar to the news / news detail example present here: brxm/spa-sdk/examples at brxm-14.4.0 · bloomreach/brxm · GitHub

Things to note is that only pages with some containers configured in the workspace will be editable.
Also, dynamic pages with any matchers can only have shared containers

3

Hey @nmendes, thanks for your reply.

So you mean according to the configuration in my first point above, I only have to make the containers in product-detail to be shared containers?

Thanks

4

Hello Gopkumar, from the setup and configuration you describe it sounds correct.
However, because you mention navigation in the SPA in order to access the /p/{some-product-id} could you verify that you are not running into the “Overlays disappear after the navigation” from our SPA troubleshooting page here.

HTH and best regards,
Lef

5

@Lef_Karamoulas do you mean the overlay buttons disappearing by “Overlays disappear after the navigation”. If so the buttons are there however the content overlay that indicates the editability is not there even if I toggle the edit button. This is when I navigate to a dynamic route by clicking on a link.

And I went through the configurations mentioned in the troubleshooting document they are all as per recommendations.

6

Hello @gopkumar.gopi that case is referring to the overlay that indicates editability and the orange edit content/menu buttons. The screenshot focuses on the toggle buttons in the top right corner to show that they are active but there is no overlay or edit buttons.

If none of the points applies to your case, another reason for that I can think of is async components. Do you have any components that load slowly or async? You can try using the sync(): void function documented in the spa-sdk here

Of course in any case please make sure that the call to the Page Model API is a preview call and meta comment elements are part of the response because without these editing integration is not possible.

HTH

7

Hi @Lef_Karamoulas, thank you for all the support. I was rendering the CMS page inside a layout wrapper which is again a react function component. This is imported dynamically using import() which kind of loads it asynchronously I suppose. However I tried to use the wrapper container directly but still it didn’t show me the editable containers. Especially the shared containers.

I did above because I couldn’t understand or figure out exactly how the sync() needs to be used as you suggested above.

Upon closer inspection in the the html source within the experience manager preview iframe, I found that it actually renders the shared container but with absolute position and height and width set to 0. When I override it in browser console the container appears and I was able to add components to it.

Another thing I noticed is that the shared container is visible in the default react-ssr provided in the example. I hope its not a style thing because I don’t see any class definitions overriding the default experience manager ones. The dimensions and position are clearly set by JS.

BTW if the shared component is not empty it shows up okay and is editable

We have set-up the application similar to how it is shown in the react-ssr example but refactored to use getServerSideProps instead of getInitialProps because the later is deprecated by NextJS.

Update: The primary concern described in this thread however is not working in the react-ssr example as well. i.e. dynamic site-map item doesn’t show editable containers even if they are shared in the experience manager.