Click or drag to resize
AlchemyContext Menu Extensions

Context Menu Extensions are GUI Extensions that allow you to extend an existing context menu (the Tridion ones, like when you right click an item from a list). A Context Menu Extension can insert one or more new nodes into the existing menu, either at the end or at any point within the menu by referencing an existing node. Context menu items that can be added are Menu Items (items that execute a command when clicked on), Sub Menu Items (items that expand to display more menu items), and Separators (lines that separate groups of menu items).

This topic contains the following sections:

Creating Context Menu Extensions

To add a context menu extension to your plugin project, create a new class that extends from Alchemy4Tridion.Plugins.GUI.ConfigurationContextMenuExtension. Within your class' constructor, you can use the various AddItem, AddSubMenu, and AddSeparator to add the different kinds of context menu items. Any calls to these methods from your constructor inserts the items as first level items of the context menu.

This section contains the following subsections:

Minimum Properties

At minimum, your constructor should set the AssignId and Name properties. Typically these are used for element id's and display labels, but for context menu extensions they are just used for the required attributes in the Editor Config and reflect meaning for the actual context menu extension. The labels and element identifiers are established with the methods for adding items (mentioned below).

C#
AssignId = "MyContextMenuId";
Name = "My Context Menu";
Note Note

I need to verify if we can actually create the context menu extensions without these properties as these aren't really used for the context menu extensions. At the very least if Anguilla requires them, we should autopopulate with Alchemy so developers don't have to set anything.

You can control where your menu items are positioned within the target context menu by setting the InsertBefore property. This should be the string value of an identifier of a node that you want to insert your items before (for example, "cm_refresh" would insert your items before the Refresh button).

C#
InsertBefore = "cm_refresh";

Adding Menu Items

To add menu items, use the AddItem method with three arguments: 1.) the id of menu item's html element that will be created (you can use this id to target with JavaScript and CSS) 2.) the label that is displayed and 3.) the command name to execute when this item is clicked.

C#
public MyContextMenu()
{
    ...

    AddItem("my_html_element_id", "Label To Display", "MyCommandName");

    ...
}

Adding Sub Menu Items

To add sub menus, the AddSubMenu method can be called with two arguments, the first being the id of the html element that will be created for the node (you can use this to target with js/css) and the second being the label to display for the menu node.

C#
AddSubMenu("my_html_element_id", "Label To Display")
    .AddItem("sub_menu_id", "Sub Menu Item Label", "SubCommandName");
Note Note

The AddSubMenu method returns an instance of Alchemy4Tridion.Plugins.GUI.Configuration.ElementsContextMenuItem, which just like from your ContextMenuExtension, you can call AddItem, AddSubMenu, and AddSeparator.

Adding Separators

To add a separator, you can call the AddSeparator method, which takes one argument that is used as the identifier of the html element created for the separator (used to target with your css and js).

C#
AddSeparator("my-separator-id");

Adding Dependencies

This context menu extension class is not a stand alone system, and will require that you reference your Resource Group(s) that contains the scripts, styles, and CommandSet references. You can use the Dependencies property of the ContextMenuExtension to do so.

C#
Dependencies.Add<MyResourceGroup>();

Applying Extension to a View

The last step of creating the ContextMenuExtension class is to apply it to a view. This is can be done with the property and calling the ToView method. You can use the Alchemy4Tridion.Plugins.GUI.ConfigurationConstantsViews static class to pick from which views to apply to, or you can just type in the name of the view as a string. One of the most common areas for context menu extension is the "DashboardView".

C#
Apply.ToView(Constants.Views.DashboardView);
Context Menu Extension Styling

You can use a stylesheet (attached to the Resource Group used by your extension) to add icons to your context menu items.

Documentation to come...

Context Menu Extension - Step by Step
  1. Create the JavaScript commands to be used by the context menu items (commands for when you click on the items).

  2. (OPTIONAL) Create an optional stylesheet if you want to add any icons to your items.

  3. Create a Command Set to register your JavaScript commands.

  4. Create a Resource Group that at adds the JavaScript file(s), StyleSheet(s), and Command Set. If your commands are using an Alchemy Webservice, make sure to use AddWebApiProxy() in your Resource Group so that the proxy JavaScript will be added. Also don't forget to add any dependencies, like Dependencies.AddAlchemyCore() or any other library files.

  5. Create the Context Menu Extension class. Make sure to add the Resource Group created in the previous step as a dependency to that extension.

  6. Build and deploy!

See Also