Feather: Add custom commands

Feather enables you to provide a custom set of commands that are displayed in the More menu of a Feather widget while in edit mode. You can customize the commands in this menu depending on the current widget and the its current state. For example, a shared content block can render different commands than an unshared one.

You can customize all aspects of adding custom command, for example, what type of window you open when you click an item, or a command, from the menu.

To provide a custom set of commands for a widget, the controller of the widget must implement the IHasEditCommands interface. Thus, you can add to or replace the collection of commands with a custom set of commands depending on your requirements. By default, the command collection is empty. If the widget does not inherit the IHasEditCommands interface, the default commands are displayed:

• Delete
• Duplicate
• Permissions

PREREQUISITES: You created a new Feather custom widget.
For details how to do this, see Feather: Create widgets.

In this example, you add custom command to a Feather Message widget. To do this:

1. Create the controller.
   To do this, perform the following:
   1. Create a class and name it MessageWidgetController.cs.
   2. Open the MessageWidgetController and implement the IHasEditCommands interface.
   3. Add the Commands property.
   4. Implement the method that creates a new CustomComand for the Message widget.

      NOTE: You need to also add the default commands for Delete, Duplicate, and Permissions. Otherwise, you will just see the custom commands.

   5. In the Index action, call the method of the MessageWidgetController.

      Use the following code sample:

2. Create the new designer view that opens when you select a command.
   Navigate to Mvc » Views » MessageWidget  and add a new file. Next, name the file DesignerView.Custom.cshtml and under Properties, mark the file as an Embedded resource.
3. To make sure the designer view is not displayed as a tab in the normal widget designer, create a JSON file.
   Navigate to Mvc » Views » MessageWidget  and add a new file named DesignerView.Custom.json, Under Properties, mark he file as an Embedded resource.
4. Place the following content inside the JSON file:
5. Build the solution.

As a result, you can see the new command in the Message widget’s More menu. 

For a more comprehensive example, see the ContentBlockController class in the Feather GitHub repository.