November Happy Hour will be moved to Thursday December 5th.
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?