ContentSelector in custom page in Admin

Filip

Vote:

Hello

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 https://getadigital.com/blog/using-episervers-content-selector-widget-in-custom-component/, 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?

#304355

Jun 30, 2023 9:01

Erik Täck

Vote:

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)
    .ToList();
    moduleList.ForEach(m => {
        var sr = m.ScriptResources.Where(r => r.EndsWith("/ReportCenter.js", StringComparison.OrdinalIgnoreCase)).ToList();
        foreach (var s in sr) {
            m.ScriptResources.Remove(s);
        }
    });
}
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    @ClientResources.RenderResources("admin")
    <link rel="stylesheet" type="text/css" href="@Paths.ToShellClientResource("ClientResources/epi/themes/legacy/ShellCore.css")" />
    @RenderSection("header", false)

</head>
<body class="Sleek">
    @Html.CreatePlatformNavigationMenu()
    <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">
                                    <h1>@ViewBag.Title</h1>
                                    @RenderBody()
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @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>

    <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 () {
                require([
                    "dojo/_base/connect",
                    "dojo/parser",
                    "epi-cms/ApplicationSettings"
                ], function (
                    connect,
                    parser,
                    ApplicationSettings
                ) {
                    connect.publish("/epi/shell/context/updateRequest", [{ uri: "epi.cms.contentdata:///" + ApplicationSettings.startPage }]);
                    parser.parse();
                });
            });

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

        });
    </script>
</body>
</html>

And then anywhere in your html body something like so:

        <div id="sourceSelector"
             data-dojo-type="epi-cms/widget/ContentSelector"
                 data-dojo-props="repositoryKey: 'pages', allowedTypes: ['episerver.core.pagedata', 'episerver.core.blockdata', 'episerver.core.mediadata'], allowedDndTypes: [], value: '@Model.Source', name: 'source', showSearchBox: false"></div>

#305064

Edited, Jul 12, 2023 16:42

Filip

Vote:

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

Thanks a lot!

#307036

Aug 18, 2023 12:29

Try our conversational search powered by Generative AI!

ContentSelector in custom page in Admin