How To Create Your Own Episerver Global Menu Section

Today’s tutorial is a follow up from How To Use A “Normal” Page Controller In Episerver?.

Most businesses that I work with have very specific business processes in order to make money.  They may have a call centre where customer can phone and talk to phone operators, the operators can then store notes about them, they might need a bespoke customer management solution that talks to back-end clients, they may want advanced analytics’s, they may want links in Episerver to their social media platforms, this list could go on and on.

When I’m designing a new system, I don’t want to have to create a separate website for these backend admin requirements and they don’t belong in the editor, so where?

This is where the customisation that Episerver provides comes in handy.  In today’s tutorial we are going to create a new global menu tab in the top of the CMS that will link to a custom MVC view.  The view will use a custom layout that we will style so it looks like the test of Episerver.

The Controller and View

Cutom_Global_Menu_1

In the last tutorial, I created a website that displayed a view using normal MVC controller and some routing configuration in the web.config (as seen above).  We’re going to use that view as the start page for our own custom admin section.

The Menu Provider

The first step is to render an ‘Admin’ link in the global menu in the Episerver CMS.

Cutom_Global_Menu_4

There are several ways to add menu items into the global config but my preference has always been defining a custom menu provider.

[MenuProvider]
public class MenuProvider : IMenuProvider
{
public IEnumerable<MenuItem> GetMenuItems()
{
var mainAdminMenu = new SectionMenuItem("Admin", "/global/admin");
mainAdminMenu.IsAvailable = ((RequestContext request) => PrincipalInfo.Current.HasPathAccess(UriSupport.Combine("/AdminPage", "")));
var firstMenuItem = new UrlMenuItem("Main", "/global/admin/main", "/AdminPage/");
firstMenuItem.IsAvailable = ((RequestContext request) => true);
firstMenuItem.SortIndex = 100;
return new MenuItem[]
{
mainAdminMenu,
firstMenuItem
};
}

Creating An Admin Layout

Now we have our menu, we have a second issue.  When we go to our new admin page, we lose all the navigation, global menu etc… What we ideally want is a custom page that still has the familiar EPiServer look and feel.  To achieve this we will need to create a custom layout view and add in some references to some standard Episerver editor components and styles:

Cutom_Global_Menu_2

In your shared folder, create an admin.cshtml file.  In here you will need to define the following:

@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" />
@Html.Raw(ClientResources.RenderResources("ShellCore"))
@Html.Raw(ClientResources.RenderResources("ShellWidgets"))
@Html.Raw(ClientResources.RenderResources("ShellCoreLightTheme"))
@Html.Raw(ClientResources.RenderResources("Navigation"))
@Html.Raw(ClientResources.RenderResources("DojoDashboardCompatibility", new[] { ClientResourceType.Style }))
</head>
<body>
@Html.Raw(Html.ShellInitializationScript())
@Html.Raw(Html.GlobalMenu())
<div>
@RenderBody()
</div>
</body>
<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>
</html>

We now need to update our admin page to use our new layout:

@{
Layout = “/Views/Shared/Admin.cshtml”;
}

Test

[/html[

Now when we view the page it will now look like an Episerver page, as seen below:

Cutom_Global_Menu_3

Conclusion

In today’s tutorial, we’ve created our own custom global navigation tab and menu to display a custom view. We’ve created an Episerver admin layout so our view looks like an Episerver back-end page.

Code Sample

All the above code can be downloaded in a fully working website from my github account here.

JonDJones.com.EpiserverGlobalMenuAdminSection

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *