This content is archived. See latest version here.

Last updated: May 28 2015

Customizing the left menu

Introduction

Any application may extend the navigation in the left menu, and you can also add/delete/change an existing tab. In order to make such changes you have to create the file LeftMenu.xml.

Linking to an existing tab

In this example we will show how to add a link (Countries) to an existing tab in left menu.

<?xml version="1.0" encoding="utf-8" ?>
<View xmlns="http://schemas.mediachase.com/ecf/view">
<Navigation>
<Tabs id="mainTag">
<Tab id="navTabAdmin" create="true">
<Link id="Core_System">
<Link id="Core_Dictionaries">
<add>
<Link id="Core_CountriesDictionary" text="\{SharedStrings:Countries\}" order="20" iconUrl="" iconCss="" command="cmdOrderCountriesDictionary"
permissions="order:admin:meta:fld:mng:view"/>
</add>
</Link>
</Link>
</Tab>
</Tabs>
</Navigation>
</View>

Adding a tab to the left menu

In this example we add an empty tab within Order Management.

<?xml version="1.0" encoding="utf-8" ?>
<View xmlns="http://schemas.mediachase.com/ecf/view">
<Navigation>
<Tabs id="mainTag">
<add>
<Tab id="navTabOrderManagement" text="{OrderStrings:Order_Management}" order="80" contentType="default" imageUrl="~/Apps/Order/images/module.png" configUrl="" enableHandler="Mediachase.Commerce.Manager.Apps.Order.CommandHandlers.OrderTabEnableHandler, Mediachase.ConsoleManager" permissions="order:mng:view">
</Tab>
</add>
</Tabs>
</Navigation>
</View>

Removing tabs

In this example we remove a tab within Order Management.

<?xml version="1.0" encoding="utf-8" ?>
<View xmlns="http://schemas.mediachase.com/ecf/view">
<Navigation>
<Tabs id="mainTag">
<remove nodeId="navTabOrderManagement">
</Tabs>
</Navigation>
</View>

Modifying a link in a tab

Here we remove the link "Core_CountriesDictionary" from the Order Management tab.

<?xml version="1.0" encoding="utf-8" ?>
<View xmlns="http://schemas.mediachase.com/ecf/view">
<Navigation>
<Tabs id="mainTag">
<Tab id="navTabAdmin" create="true">
<Link id="Core_System">
<remove nodeId="Core_CountriesDictionary" />
<add>
<Link id="Core_CountriesDictionary" text="Modified Link" order="20" iconUrl="" iconCss="" command="cmdOrderCountriesDictionary"
permissions="order:admin:meta:fld:mng:view"/>
</add>
</Link>
</Link>
</Tab>
</Tabs>
</Navigation>
</View>

XML description

The Tab element can contain the following attributes:

  • id (text) - unique identifier within xml file.
  • text (text) - text displayed by the tab, can contain resource string with the following format: {ResourceName:ResourceKey}.
  • order (int) - weight, which determines the location of the tab.
  • imageUrl (text) - relative image path for the tab.
  • enableHandler (text) - fully qualified class name for the tab EnableHandler (if EnableHandler returns false, then the tab will not be displayed in the left menu), the class has to implement ICommandEnableHandler interface.
  • permissions (text) - parameter that is passed as a CommandParameter value to the EnableHandler.

This example shows how to retrieve permissions in the EnableHandler class:

public bool IsEnable(object sender, object element)
{
var commandParams = element as CommandParameters;
if (commandParams != null)
{
string permissions = commandParams.CommandArguments["permissions"];
}
}
The Link element can contain the following attributes:
  • id (text) - unique identifier within xml file.
  • text (text) - text displayed by the element, can contain resource string with the following format: {ResourceName:ResourceKey}.
  • order (int) - weight, which determines the location of the element.
  • imageUrl (text) - relative image path for the element.
  • enableHandler (text) - fully qualified class name for the element EnableHandler (if EnableHandler returns false, then the element will not be displayed in the left menu), the class has to implement ICommandEnableHandler interface.
  • iconCss (text) - css class for the menu image.

Comments