Customizing the Orchard Admin Menu

Share on facebook
Share on twitter
Share on linkedin
Share on email

Here at Mercury New Media we have been using the Orchard Content Management System (http://orchardproject.net) for many of the sites we are building. It allows for many areas of customization on the front-end and admin section of the site.

In this post we are going to specifically look at adding items to the Orchard Admin navigation. We have utilized custom navigation items for grouping links to new content types, links to pages with different reports (Kendo grids, SSRS) and links to different areas within the front-end site.

Note: For this demo I assume basic knowledge of setup and creation of a custom module.

To start out I have basic Orchard installation with the Default recipe. Here is the out-of-the-box Admin menu.
Orchard Menu

It has everything we need to manage our new Orchard site and users but lets say, for purposes of this demo, I want a new section in this navigation that links to different search engines (Bing, Google, Yahoo). I would like a main navigation item that links to a page that lists each of these sites as well as menu links to each of the search engines (see the simple mock-up below).
Search Engine List

Lets Get Started.

First things first – I created a custom module with Code Generation and enabled the module. In Visual Studio I set up a separate solution folder for the project.
Visual Studio View

In the screenshot above I have also already added the first file we will need, SearchEngineMenu.cs, in a folder named AdminMenu. This will be the code that displays the navigation items.

Note: You can keep all of your custom navigation in one file or put each group into separate files. This is more of personal or team preference and will also depend on how many custom menu items you will have.

The first bit of code we need to write is to have our class inherit Orchard’s INavigationProvider and implement the members.

 public class SearchEngineMenu : INavigationProvider
{
public Localizer T { get; set; }
public string MenuName
{
get { return "admin"; }
}

The Localizer property is used in globalizing strings on your site. The other property implemented is MenuName. This is the name of the menu we would like to add our custom navigation to, so we return the string “admin” for the Admin Menu.

Next we add the method GetNavigation which doesn’t return anything but takes a parameter with a type of NavigationBuilder. We call the class’s Add method here to add the top level navigation item. We pass in a Localized String for the display text, a string representing the position of where it should be located in the menu and an Action <NavigationItemBuilder> delegate.

 public void GetNavigation(NavigationBuilder builder)
{
builder.Add(T("Search Engines"), "5", item => item.Action("", ""));
}

New Orchard Menu Item

In the code, notice the empty strings being passed to Action – these are placeholders for an Action and Controller so you can have this link go to a custom controller in your module, an existing controller or, if you leave these as empty strings and chain .Url(“”) to the expression, you can link to an external site.

Here is my updated code for this navigation item as well as a screenshot of the new Controller, View and the page in the browser.

 public void GetNavigation(NavigationBuilder builder)
{
builder.Add(T("Search Engines"), "5", item => item.Action("SearchEngines", "Admin", new { Area = "CustomModule" }));
}

Code snippet

My new Admin page which has inherited the admin styles because of the attributes seen in the controller).
Orchard Menu for Search Engines

Now onto the second level navigation.

Remember that the Add method we called had an Action as a parameter? We can pass in a method here that returns void and has a parameter of the type NavigationItemBuilder and build out our menu there instead of trying to chain and build it in the Add method.

Take a look at the final code:

 public void GetNavigation(NavigationBuilder builder)
{
builder.Add(T("Search Engines"), "5", BuildMenu);
}
public void BuildMenu(NavigationItemBuilder menu)
{
menu.Add(T(""), "0", item => item.Action("SearchEngines", "Admin", new { area = "CustomModule" }));
menu.Add(T("Google"), "1", item => item.Action("", "").Url("http://www.google.com"));
menu.Add(T("Bing"), "2", item => item.Action("", "").Url("http://www.bing.com"));
menu.Add(T("Yahoo"), "3", item => item.Action("", "").Url("http://www.yahoo.com"));
}

In the new BuildMenu method the first menu item sets up the link for the main level item – here it is our custom page. The position strings here are based on the other items in this section of the menu.
New Expanded Orchard Menu

And there you have it, our own custom navigation group in the Admin. This is just the beginning of how you can extend and customize the admin menu in Orchard. Take some time to play around with it and dig into the Orchard code to see what else you can do!

No Comments

Leave a Comment

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