HomeGuides
Submit Documentation FeedbackJoin Developer CommunityLog In

Customizing the toolbar

This topic describes how to modify the buttons, menus and text in the Commerce Manager toolbar.

ūüďė

Note

This content does apply to Commerce versions 14+.

The Toolbar is a set of buttons, menus and text with structure and action commands defined in XML. The following top menu examples show how to modify toolbar items.  

Adding a toolbar item

Add a new item to the Welcome menu on top of the page by creating the TopMenu.xml file in the ~/Apps/(ModuleName)/Config/View folder.

TopMenu.xml file

<?xml version="1.0" encoding="utf-8" ?>
    <View xmlns="http://schemas.mediachase.com/ecf/view">
      <ListViewUI>
        <Toolbar>
          <Menu id="CreateMenu" text="\{SharedStrings:Welcome\}">
             <add>
               <Button id="MyTestButton" 
                       text="TestButton" 
                       imageUrl="~/Apps/Shell/styles/Images/Shell/exit.gif" 
                       commandName="TestCommand">
               </Button>
             </add>
          </Menu>
        </Toolbar>
        <Commands>
          <add>
            <Command id=" TestCommand">
              <CommandType>ClientAction</CommandType>
              <ClientScript>alert('test command');</ClientScript>
            </Command>
          </add>
        </Commands>
      </ListViewUI>
    </View>

Modifying a toolbar item

The following example shows how to change the Sign Out text in the same menu.

Change Sign Out text

<?xml version="1.0" encoding="utf-8" ?>
    
    <View xmlns="http://schemas.mediachase.com/ecf/view">
      <ListViewUI>
        <Toolbar>
          <Menu id="CreateMenu" text="{SharedStrings:Welcome}">
            <Button id="SignOutBtn" 
                    text="{ShellStrings:Sign_Out}" 
                    imageUrl="~/Apps/Shell/styles/Images/Shell/exit.gif" 
                    commandName="ECF_Top_SignOut">
              <setAttributes text="New SignOut Text"></setAttributes>
            </Button>
          </Menu>
        </Toolbar>
      </ListViewUI>
    </View>

Removing a toolbar item

The following example shows how to remove the Sign Out button from the menu.

Remove Sign Out button

<?xml version="1.0" encoding="utf-8" ?>
    <View xmlns="http://schemas.mediachase.com/ecf/view">
      <ListViewUI>
        <Toolbar>
          <Menu id="CreateMenu" text="{SharedStrings:Welcome}">
            <remove nodeId="SignOutBtn" />
          </Menu>
        </Toolbar>
      </ListViewUI>
    </View>

XML description

You can add the following elements to the toolbar:

  • Text
  • Splitter. See ItemSplitter below.
  • Button
  • Menu
  • SplitButton

Note: If the XML contains an unsupported element, the NotSupportedException exception is thrown.

Toolbar attributes

  • id. Unique identifier within XML.
  • text. Element label (button, menu and so on).
  • imageUrl. Element icon (only used for Menu, SplitButton, Button).
  • cssClass. Element stylesheet css class.
  • align. Element location (can be Left, Right). The default value is Left.
  • handler. Client handler which is called when element is clicked; the client method name must be specified; the element object is passed as a parameter to the client method.
  • commandName. Server command; enableHandler of that command determines whether an element is visible.
  • itemSplitter. Added to a Splitter element, can have the following values:
    • None (default). Separator is not added.
    • Left. Separator is added to the left of the element.
    • Right. Separator is added to the right of the element.
    • Both. Separator is added on both sides of the element.
    • tooltip. Define element tooltip.
    • permissions. Text parameter passed to the enableHandler for the command.

Did this page help you?