We added a tools menu alternative to EPiServer‘s global menu in my current project, and thought it’d be great if we could make it feel like the editor was still in EPiServer’s edit mode when using our custom tools. I had to do a bit of looking through EPiServer’s source code getting this to work, but here is how to add the menu with all functionality intact.
/Views/Shared/Layouts/_Admin.cshtml
@using EPiServer.Framework.Web.Resources
@using EPiServer.Shell.Navigation
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- Shell -->
@Html.Raw(ClientResources.RenderResources("ShellCore"))
@Html.Raw(ClientResources.RenderResources("ShellWidgets"))
<!-- LightTheme -->
@Html.Raw(ClientResources.RenderResources( "ShellCoreLightTheme"))
<!-- Navigation -->
@Html.Raw(ClientResources.RenderResources("Navigation"))
<!-- Dojo Dashboard -->
@Html.Raw(ClientResources.RenderResources( "DojoDashboardCompatibility", new[] { ClientResourceType.Style }))
</head>
<body>
@Html.Raw(Html.ShellInitializationScript())
@Html.Raw(Html.GlobalMenu())
<div>
@RenderBody()
</div>
</body>
</html>
The GlobalMenu-line above will render the HTML markup needed for the menu, and the scripts and styles will come from the RenderResources in the head.
JavaScript Error: Failed to resolve a route from parameters or default settings (EPiServer’s ShellCore.js)
This error showed up when clicking the search button in the right corner of the global menu. It is resolved by adding EPiServer’s ShellInitializationScript (line 27 above); this will register the necessary routes as below.
<script type="text/javascript">
epi.routes.init("");
epi.routes.registerRoute("/EPiServer/{moduleArea}/{controller}/{action}/{id}", {"action":"index","id":"","moduleArea": "ImageVault.AddOn.EPiCMS7"});
epi.routes.registerRoute("/modules/{moduleArea}/{controller}/{action}/{id}", {"action":"index","id":"","moduleArea":"App"});
epi.routes.registerRoute("/EPiServer/{moduleArea}/{controller}/{action}/{id}", {"controller":"Home","action":"Index","id":"","moduleArea": "CMS"});
epi.routes.registerRoute( "/EPiServer/AddOns/{controller}/{action}", {"moduleArea":"EPiServer.Packaging.UI","controller":"AddOns", "action":"Index"});
epi.routes.registerRoute("/EPiServer/{moduleArea}/{controller}/{action}/{id}", {"moduleArea":"Shell","controller":"Dashboard","action":"Index", "id":""});
</script>
EPiServer’s global menu search gives a 404 and not search result
When clicking the EPiServer search button in the global menu you may be moved to a 404 Not Found page. This is due to a piece in the ShellWidgets scripts not going well with parts of the DojoDashboardCompatibility ones. The latter styles however are needed to make the user menu look good; so to resolve this issue you may want to exclude all but the styles (line 23).
