Adding Custom strip, buttons to Experience editor

Question

I tryed to add new strip, and new chunk to exist strip with large button to

/sitecore/content/Applications/WebEdit/Ribbons/WebEdit

. Appoined command. But it doesnt work. How to add custom strips and buttons in experience editor?

Answer 1

As you have added button in the core database, but it is not triggering, could be the issue of missing some step. Here are a few steps that you could check and follow.

1. Create a new class to process speak request. And put the following code into it.

    using Sitecore.ExperienceEditor.Speak.Server.Contexts;
    using Sitecore.ExperienceEditor.Speak.Server.Requests;
    using Sitecore.ExperienceEditor.Speak.Server.Responses;
     
    namespace YOURNAMESPACE.Pipelines
    {
        public class CustomUrl : PipelineProcessorRequest<ItemContext>
        {
            public override PipelineProcessorResponseValue ProcessRequest()
            {
                return new PipelineProcessorResponseValue();
            }
        }
    }

2. Create another class that will be a command. Here is a sample code.

using System;
using Sitecore;
using Sitecore.Shell.Framework.Commands;
using Sitecore.Text;
using Sitecore.Web.UI.Sheer;
 
namespace YOURNAMESPACE.Command
{
    public class CustomUrl: Sitecore.Shell.Framework.Commands.Command
    {
        public override void Execute(CommandContext context)
        {
            Sitecore.Context.ClientPage.Start(this, "Run", context.Parameters);
        }
 
        protected static void Run(ClientPipelineArgs args)
        {
            if (!args.IsPostBack)
            {
                UrlString urlString = new UrlString(UIUtil.GetUri("control:CustomUrl"));
                SheerResponse.ShowModalDialog(urlString.ToString(), "800", "300", "", true);
                args.WaitForPostBack();
            }
            else
            {
                if (args.HasResult)
                {
                    if (Sitecore.Context.Item.Name == "Content Editor")
                    {
                        Sitecore.Context.ClientPage.ClientResponse.SetLocation(Sitecore.Links.LinkManager.GetItemUrl(Sitecore.Context.Item));
                    }
                }
            }
        }
    }
}

3. Make an entry in the configuration.

<?xml version="1.0"?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"
               xmlns:role="http://www.sitecore.net/xmlconfig/role/">
    <sitecore>
        <commands>
            <command name="item:customurl" type="YourNamespace.Command.CustomUrl, YourAssembly" />
        </commands>
 
        <sitecore.experienceeditor.speak.requests>
            <request name="item.customurl" type="YourNamespace.Pipelines.CustomUrl, YourAssembly"/>
        </sitecore.experienceeditor.speak.requests>
 
    </sitecore>
</configuration>

4. On Sitecore published folder, go to the path sitecore\shell\client\Sitecore\ExperienceEditor\Commands. Create a new JS file. Put the following code.

define(["sitecore", "/-/speak/v1/ExperienceEditor/ExperienceEditor.js"], function (Sitecore, ExperienceEditor) {
  Sitecore.Commands.CustomUrl =
  {
    canExecute: function (context) {
      return ExperienceEditor.isInMode("edit");
    },
 
    execute: function (context) {
      ExperienceEditor.
                PipelinesUtil.
                generateRequestProcessor("item.customurl",
                    function (response) {
                        scForm.invoke("item:customurl");
                    }).execute(context);
    }
  };
});

For more details you can refer to my blog, I tried to create a popup window on the button click on experience editor.

https://sbhatiablogs.wordpress.com/2019/09/02/add-a-custom-button-on-experience-editor-ribbon/

Hope this will give you the whole context.

Answer 2

I believe you are looking to trigger the command from the experience editor ribbon button and that is not working for you.

In order to achieve this, you will first need to create the javascript file as below.

define(["sitecore", "/-/speak/v1/ExperienceEditor/ExperienceEditor.js"], function (Sitecore, ExperienceEditor) {
  Sitecore.Commands.AddItem =
  {
    canExecute: function (context) {
     return ExperienceEditor.isInMode("edit");
    },
    execute: function (context) {
      context.app.disableButtonClickEvents();
      ExperienceEditor.PipelinesUtil.generateRequestProcessor("ExperienceEditor.AddItem",function(response) {
        scForm.invoke("item:additem");
      }).execute(context);
      context.app.enableButtonClickEvents();
    }
  };
});

Inside the above code, command to be executed is added inside execute function. This javascript file then need to attached to the rendering of the button in the PageCodeScriptFileName property as below. You can find more details for the same here.

Processor defined above in the javascript file need to be registed as below inside the configuration file.

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <sitecore.experienceeditor.speak.requests>
      <request name="ExperienceEditor.AddItem" type="SitecoreCustomExtensions.Speak.AddItem,SitecoreCustomExtensions" resolve="true"/>
    </sitecore.experienceeditor.speak.requests>
  </sitecore>
</configuration>

Codebeside for the custom type defined above, processes speak request and returns the value, that can then be fetched inside javascript.

using Sitecore.ExperienceEditor.Speak.Server.Contexts;
using Sitecore.ExperienceEditor.Speak.Server.Requests;
using Sitecore.ExperienceEditor.Speak.Server.Responses;

public class AddItem : PipelineProcessorRequest<StringContext>
{
  public override PipelineProcessorResponseValue ProcessRequest()
  {
     return new PipelineProcessorResponseValue();
  }
}

Using above changes, you will be able to successfully invoke the command from the experience editor. You can check out this Sitecore series to get step by step details.

Hope this helps!!! Let me know in case you have any queries.

Answer 3

Try this:

Navigate to /sitecore/content/Applications/WebEdit/Ribbons/WebEdit/Experience Editor

Note for some reason in my solution, the item path shows Page Editor as item name. To avoid any confusion, search for item id {0642041B-6E6C-4B82-9648-BB6603E8DCE5} in bottom corner.

The simplest way to get the new button is to duplicate another child at that level (i.e. Content Tagging).

See images below:

---

It looks like what you had should have work fine to be honest... I tried mimicing what you have shown in your screenshot and I can see a new button shown to the right hand side of "Component" in the "New" Chunk.