Susan Williams
December 11, 2014

Customizing the Orchard Admin Menu

Susan Williams

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!

5 Comments

  1. 5 Zoltán Lehóczky 06 Jan
    Just FYI the code snippets are hardly readable, the lines overlap each other. We at Lombiq use Google Code Prettify (https://code.google.com/p/google-code-prettify/) on our Orchard sites for displaying code snippets and it works great. Very little setup needed from an Orchard theme and I guess it shouldn't be hard in Sitefinity either.
  2. 4 Melissa Miller 07 Jan
    Thanks Zoltan for your feedback and suggestion.  We actually just launched a new version of our website and modified the code snippet formatting for our blog, hope you find it more usable now.  Let us know after you have had a chance to review.
  3. 3 Zoltán Lehóczky 07 Jan
    Much better! Though the <code> tags seem to be included in the code snippets, being visible (and maybe that's related to the indentation being lost?).
  4. 2 Melissa Miller 13 Jan
    Thanks Zoltan for your feedback we have also addressed that issue.
  5. 1 Ryan 11 Sep
    Just what I was looking for. Thank you so much for posting this.

Comment

  1. RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
    RadEditor's components - toolbar, content area, modes and modules
       
    Toolbar's wrapper 
     
    Content area wrapper
    RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.
    It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
    Editor Mode buttonsStatistics moduleEditor resizer
      
    RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.
       

Subscribe to Our Blog

Get the latest blog posts sent right to your inbox so you never miss an informative post from Mercury.

 

Get Your Share On!

 

Tags