Try our conversational search powered by Generative AI!

ContentSelector in custom page in Admin



I'm in the process of upgrading a site from version 11 to 12.

In the version 11 site there are a couple of custom pages in Admin that that uses EPi.CreatePageBrowserDialog to select a page from the page tree. I can't get that to work in the Opti 12.

Maybe epi-cms/widget/ContentSelector is the thing to use?

Found this link, but I'm failing to add the pieces together to get it working.

I tried different approches but I'm not sure how to actually get the ContentSelector to load in the custom page. What should you put in the cshtml file?

Jun 30, 2023 9:01

I have had limited success with this layout file, it can display dojo/dijit widgets declared in html with data-dojo attributes, but it will display some errors with the new navigation i havent figured out how to use properly yet, I think I have found the base for this in some blog post ages ago (for epi 11 iirc):

Note: The div christmas tree in the body is just to have your html display roughly in the correct area without being tucked away in a corner due to all the fixed and absolute positioned stuff in the navigation, I copied it from some built-in admin item, feel free to improve it. The report center shenanigans was added because I got some script error if that module was loaded at some point, it might not be needed now:

@using EPiServer.Framework.Serialization;
@using EPiServer.Framework.Web.Resources;
@using EPiServer.Shell.Modules;
@using EPiServer.Shell.Navigation;
@using EPiServer.Shell.Web.Mvc.Html;
@using EPiServer.Shell;
@inject ModuleTable modules
@inject IClientResourceService resourceService
    var moduleList = modules.GetModules()
    .Select(m => m.CreateViewModel(modules, resourceService))
    .OrderBy(mv => mv.ModuleDependencies != null ? mv.ModuleDependencies.Count : 0)
    moduleList.ForEach(m => {
        var sr = m.ScriptResources.Where(r => r.EndsWith("/ReportCenter.js", StringComparison.OrdinalIgnoreCase)).ToList();
        foreach (var s in sr) {
<!DOCTYPE html>
    <link rel="stylesheet" type="text/css" href="@Paths.ToShellClientResource("ClientResources/epi/themes/legacy/ShellCore.css")" />
    @RenderSection("header", false)

<body class="Sleek">
    <div @Html.ApplyPlatformNavigation()>
        <div class="content-area-container">
            <div class="epi-uif-layout-container">
                <div class="epi-uif-workspace-container">
                    <div class="epi-uif-workspace access-rights-container">
                        <div class="epi-uif-grid mdc-layout-grid mdc-layout-grid--align-left">
                            <div class="mdc-layout-grid__inner">
                                <div class="epi-uif-grid-cell mdc-layout-grid__cell">

    @EPiServer.Shell.Web.Mvc.Html.DojoConfigurationHelper.ConfigureDojo(false, true, true)
    <script type="text/javascript" src="@Paths.ToShellClientResource("ClientResources/dojo/dojo.js")"></script>
    <script type="text/javascript" src="@Paths.ToShellClientResource("ClientResources/epi/epi.js")"></script>

        // At this point it's not safe to require() arbitrary things yet or everything will blow up spectacularly. The
        // "Bootstrapper" has to be run first, so only require that.
        require(["epi/shell/Bootstrapper"], function (Bootstrapper) {

            var bs = new Bootstrapper(@Html.Raw(Html.SerializeObject(moduleList, KnownContentTypes.Json)));

            // Loads the specified module ("CMS") and all the script bundles ClientResources that come with it. If this isn't done
            // correctly all require() calls will load modules with separate requests which can reduce the amount of total code
            // loaded but generates a *lot* of requests in the process
            bs.initializeApplication(null, "CMS").then(function () {
                ], function (
                ) {
                    connect.publish("/epi/shell/context/updateRequest", [{ uri: "epi.cms.contentdata:///" + ApplicationSettings.startPage }]);

            // It's now safe to require() anything including your own modules.


And then anywhere in your html body something like so:

        <div id="sourceSelector"
                 data-dojo-props="repositoryKey: 'pages', allowedTypes: ['episerver.core.pagedata', 'episerver.core.blockdata', 'episerver.core.mediadata'], allowedDndTypes: [], value: '@Model.Source', name: 'source', showSearchBox: false"></div>
Edited, Jul 12, 2023 16:42

Your example works for me, I even removed the ReportCenter part.

Thanks a lot!

Aug 18, 2023 12:29
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.