Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more
AI OnAI Off
ContentSelector in custom page in Admin
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>
Edited,
Jul 12, 2023 16:42
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.
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?