How can I add a custom button inside the Content Editor application?

Question

I'm building a custom page with extended functionality for Content Management. How can I allow users to access it directly inside the Content Editor? Ideally I'd like to add my own button inside the menu bar which would open a given route inside Sitecore.

Answer 1

In the Core database - go to /sitecore/content/Applications/WebEdit/Custom Experience Buttons

Create a new item in here. The Click field maps to a command that can be patched into the sitecore configuration:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>    
    <commands>
      <command name="webedit:InsertImage" type="Project.Namespace.InsertGalleryImage,Project.Data"/>
    </commands>
  </sitecore>
</configuration>

The Type defined here should be a class that inherits from Sitecore.Shell.Applications.WebEdit.Commands.WebEditCommand and overrides the Execute method:

public override void Execute(CommandContext context)
{
    Assert.ArgumentNotNull(context, "context");
    var parameters = new NameValueCollection
    {
        ["datasourceId"] = context.Parameters["id"],
        ["master"] = context.Parameters["master"]
    };

    // Get Language
    var itemUri = ItemUri.ParseQueryString();
    var language = context.Parameters["language"];
    var pageId = string.Empty;

    if (itemUri != null)
    {
        if (string.IsNullOrEmpty(language))
        {
            language = itemUri.Language.ToString();
        }

        pageId = itemUri.Path;
    }

    parameters["language"] = language;
    parameters["pageId"] = pageId;

    // Store the custom parameters 
    parameters["templateId"] = context.Parameters["templateId"] ?? string.Empty;

    // invoke the run method
    Context.ClientPage.Start(this, "Run", parameters);
}

Where "Run" is a static method that takes the ClientPipelineArgs:

protected static void Run(ClientPipelineArgs args)
{
    Assert.ArgumentNotNull(args, "args");
    var language = Language.Parse(args.Parameters["language"]);
    var datasource = Context.ContentDatabase.Items[args.Parameters["datasourceId"], language];

    Assert.IsNotNull(datasource, typeof(Item));

    // Retrival of custom parameters
    var templateId = GetSitecoreId(args.Parameters, "templateId");

    Assert.IsNotNull(templateId, typeof(ID));

    // custom code, business rules, etc.

    // refresh
    SheerResponse.Eval("scForm.browser.getParentWindow(scForm.browser.getFrameElement(window).ownerDocument).location.reload(true)");
}

Parameters are sent to the command as a set of key value pairs.

Then go into the Master database and associate your custom button with a rendering using the Experience Editor Buttons field, located in the Editor Options section.

See these articles for more details: https://community.sitecore.net/technical_blogs/b/maximizing_usability/posts/enhancing-the-page-editor-experience-with-custom-experience-buttons

http://www.nonlinearcreations.com/Digital/how-we-think/articles/2016/03/Sitecore-8-and-8-1-How-to-add-a-Field-Editor-Button-to-a-component-in-Experience-Editor-Mode.aspx