In this tutorial, you will learn how to create a global menu tab within the top menu inside of the CMS. The menu 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.
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.
The Controller and View
In the last tutorial, I created a website that displayed a view using normal MVC controller. This was done using some routing configuration in the web.config. This tutorial will build on that view to create a global menu section.
The Menu Provider
The first step is to render an 'Admin' link in the global menu in the Episerver CMS.
There are several ways to add menu items into the global config but my preference has always been defining a custom menu provider.
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:
In your shared folder, create an admin.cshtml file. In here you will need to define the following:
We now need to update our admin page to use our new layout:
Now when we view the page it will now look like an Episerver page, as seen below:
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.
All the above code can be downloaded in a fully working website from my GitHub account here. #ILoveEpiserver