help.axcms.net Axinom Logo

Customizing the Top Menu

Users should be able to easily call our overview and detail pages. Let’s extend the top menu and add our links there.

The article overview page that we have created can be accessed via URL: .../AxCMSweb_Sample/Extras/ArticleOverview.aspx.

The article detail page that we have created can be accessed via URL: .../AxCMSweb_Sample/Extras/ArticleDetail.aspx.

Management system users should of course have convenient access to these pages, so it would be good to integrate them both in the top menu. There is a simple solution for this – we can extend the TopMenuModel class with the necessary URLs.

There are two TopMenuModel methods that we need to override:

  • GetEditMenuItems – Creates a list of links for the Edit menu.
  • GetNewMenuItems Creates a list of links for the New menu.

We simply retrieve the default menu lists and add our URLs there. GetNewMenuItems will look like this:

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
public override List<UxDropDownItemGroup> GetNewMenuItems()
{
    List<UxDropDownItemGroup> groups = base.GetNewMenuItems();
            
    var itemList = new List<UxDropDownItem>();
    itemList.Add(new UxDropDownItem { Name = "Article", URL = CMSConfigurationSettings.RootUrl + "/extras/ArticleDetail.aspx" });
    groups.Add(new UxDropDownItemGroup { Items = itemList });

    return groups;        
}

And GetEditMenuItems will look like this:

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
public override List<UxDropDownItemGroup>  GetEditMenuItems()
{
    List<UxDropDownItemGroup> groups = base.GetEditMenuItems();

    var itemList = new List<UxDropDownItem>();
    itemList.Add(new UxDropDownItem { Name = "Articles", URL = CMSConfigurationSettings.RootUrl +"/extras/ArticleOverview.aspx" });
    groups.Add(new UxDropDownItemGroup { Items = itemList });


    return groups;        
}

When this is done, we also need to add our new top menu class to the management system’s web.config file, so AxCMS will know about it:





<appSettings>

   <add key="TopMenuModelClass" value="PremiumSample.BL.PremiumSampleTopMenu, PremiumSample.BL"/>

</appSettings>

The customized top menu will look like this in the browser:

 


Next article: Adding Publish, Delete and Recover Activities