ContentSelector in custom tools in Admin

Christian Lindeberg

Vote:

I am converting a CMS 11 to CMS 12 and there is a custom admin tool that had a content picker enabling the user to select a page or starting node. In CMS 11 that was pretty easy, but in CMS 12 I have not seen so many working examples :) Is the a MVC example out there? :)

I had a look at https://world.optimizely.com/forum/developer-forum/cms-12/thread-container/2023/6/contentselector-in-custom-page-in-admin/ but I could not get that to work.

I have also looked at https://docs.developers.optimizely.com/content-management-system/docs/creating-a-react-component but I would rather not go the react way, the guide also mentions

"Something else that maybe worth looking at is the @episerver/amd-proxy-loader I mentioned previously (https://www.npmjs.com/package/@episerver/amd-loader-proxy). With this it is possible to dynamically require AMD modules from Episerver CMS from your JavaScript application. This is framework agnostic so it can be used with whichever JavaScript framework you prefer."

But https://github.com/episerver/amd-loader-proxy now does not seems to be maintained any longer.

#316536

Feb 02, 2024 8:06

Nikola Sekiw

Vote:

Have you found any working solution for this yet? :)

#323741

Jun 18, 2024 8:56

Christian Lindeberg

Vote:

Nikola, actually yes :) Optimizely released some web components that you can use

<optimizely-content-tree id="content-tree"></optimizely-content-tree>
<optimizely-button id="generate" buttonStyle="highlight" text="Generate"></optimizely-button>

let selectedNode = null;

document.getElementById("content-tree").addEventListener("onNodeSelected",
  (event) = {
    selectedNode = event.detail.contentLink;
  });

document.getElementById("generate").addEventListener("onClick", () = {
  alert('sending contentLink with id = ' + selectedNode;
});

https://support.optimizely.com/hc/en-us/articles/23946044789901-2024-CMS-release-notes

#323745

Jun 18, 2024 10:18

Nikola Sekiw

Vote:

Exactly what i was looking for, thanks! 😀

#323803

Jun 19, 2024 7:20

Aleksander Rajca

Vote:

Could you please provide some short example how to get those new web components work in MVC? I have exactly the same problem that Christian described in the first post.

#325428

Jul 15, 2024 9:59

Karol Berezicki

Vote:

Hi Aleksander Rajca,

You probably need to include the @Html.RegisterOptimizelyWebComponents() helper in order for those web components to be loaded.

#325429

Jul 15, 2024 10:09

Christian Lindeberg - Aug 05, 2024 12:04

Hi Karol Berezicki

Do you know if there is a way to set the root of the content-tree like:

It would also be practical with a filter parameter like filter="PageData, BlockData"

Karol Berezicki - Aug 05, 2024 12:12

To my best knowledge, there's no such option at this moment, currently the 'optimizely-content-tree' component accepts only 'id' parameter.
Hopefully Optimizely will expand it's capabilities in future releases :)

Aleksander Rajca

Vote:

Thanks Karol! It was a piece that I was missing. Everything works perfectly now.

#325430

Jul 15, 2024 10:34