Create Global Navigation in EPiServer CMS 6 RC1
Intro
The global navigation helps users navigate different integrated products such as EPiServer CMS, EPiServer Community, and EPiServer Mail but also third party products as ImageVault or similar integrated modules which would like to expose their interfaces to the logged on user.
The global navigation can be customized (it’s a new plugin-area) and it’s possible to insert the menu into both (custom) web forms and MVC views.
The menu is designed to be oriented on products and modules, so that each top menu item represents a product while the sub level menu contains the actual views/functions/parts of the product.
There are 3 solutions to make a new Global Navigation:
- Using MenuItemAttribute
- Using MenuProvider
- Using configuration section in web.config
Both MenuProvider and MenuItemAttribute need more configuration in web.config. Add assemblies section like this
<episerver.shell>
<protectedModules rootPath="~/cms/UI/" >
<add name="Shell">
<assemblies>
<add assembly="EPiServer.Sample.GlobalNavigation.UI" />
</assemblies>
</add>
<add name="CMS" />
</protectedModules>
<publicModules rootPath="~/public/" autoDiscovery="Minimal" />
</episerver.shell>
Print the Global Navigation menu on page
ASP.NET MVC
<%@ Import Namespace="EPiServer.Shell.Extensions" %>
<%= Html.GlobalMenu()%>
WebForms
<%@ Register TagPrefix="sc" Assembly="EPiServer.Shell"
Namespace="EPiServer.Shell.Web.UI.WebControls" %>
<sc:ShellMenu runat="server" SelectionPath="/global/sample" Area="Sample" />
Current selection
The menu tracks the current menu item automatically if the menu item is an route menu item. But it also supports that the user sets the selection path if they need to.
It is possible to set the selection directly from the Controller Action if the default MasterPage is used or it can be done from the view directly.
Controller Action
this.ViewData[“SiteCenterMenuPath”] = “/global/sample”
View
<%@ Import Namespace="EPiServer.Shell.Extensions" %>
<%= Html.GlobalMenu("/global/sample")%>
Way 1: Change web.config <navigation>
- Easiest way to do
- Suitable to config section, dropdown menu
- With Link menu item, we can provide fixed URL only
<episerver.shell>
<navigation>
<add menuItemType="Link" menuPath="/global/sample"
alignment="Left" sortIndex="1"
target="_self" text="Sample"
url="http://localhost:81/" />
</navigation>
</episerver.shell>
-
Properties of navigation item
-
Link is Url, like you click on EPiServer logo, or click on ViewMode (eye icon)
-
Section is like you click on CMS
-
DropDown is like you click on help (question mark)
-
Text and MenuPath are mandatory attributes
-
Link and DropDown can be nested under Section
-
Way 2: Using MenuItemAttribute
-
Create webform or MVC Controller
-
It is possible to decorate MVC Controllers and WebForm code-behind classes with an attribute to make them appear in the menu
-
Easy way, but not flexible (security role, css
WebForm Attributes
[MenuItem(MenuPaths.Global + "/sample",
Text = "Sample",
TextResourceKey = "/sample",
Url = "Edit/Default.aspx"
)]
public partial class DefaultPage : SystemPageBase
{
}
MVC Attributes
public class DashboardController : Controller
{
[MenuItem(MenuPaths.Global + "/sample",
Text = "Sample"
)]
public ActionResult Index()
{
}
}
Way 3: Using MenuProvider
-
A menu provider returns an enumeration of menu items
-
EPiServer will attach the return menu items to the Global Navigation
-
Items of MenuProvider live in peace with configured from navigation (in web.config) and reflection attribute.
[Export(typeof(IMenuProvider))]
public class SampleMenuProvider : IMenuProvider
{
public IEnumerable<MenuItem> GetMenuItems()
{
UrlMenuItem item = new UrlMenuItem("Sample", MenuPaths.Global + "/sample", "/Default.aspx");
item.SortIndex = 1;
item.Alignment = MenuItemAlignment.Left;
item.IsStyled = true;
item.IsAvailable = request => PrincipalInfo.HasAdminAccess;
return new MenuItem[] { item };
}
}
Comments