Sitecore

Custom Frontend ribbon buttons – Sitecore 8.x

When adding custom ribbon buttons to Sitecore 8.0 and 8.1, a lot have changed since 7.x. Before 8.x you created ribbon buttons by adding the button items in the core database, while creating new “command” for them to execute.

In 8.x they changed the Experience Editor interface to use speak only, while keeping the Content editor interface using sheer UI. This require you to configure seperate buttons for the Content Editor and Experience Editor. The Content Editor buttons can be created like in 7.x. However the Experience Editor buttons require a whole new set of things for them to run.

While creating a translate module for Sitecore, we needed to enable translate buttons in the Experience Editor.

ex-buttons

 

Like in pre Sitecore 8, the buttons is created in the Core database, within the WebEdit node. This alone will not display them in the Experience Editor in Sitecore 8.
buttons

To display the buttons we need to add a rendering to the items and setup the presentation details accordingly. Each button need to have a unique ID, a click event and a PageCodeScriptFileName set. It is alot easier to set these properties using Sitecore Rocks:

rendering-settings

The PageCodeScriptFileName is where we point to our JS file, which contains the “command”. The command contains some dependencies and a function which can execute our custom behavior.

define([
    "sitecore",
    "/-/speak/v1/ExperienceEditor/ExperienceEditor.js",
    "/-/speak/v1/ExperienceEditor/TranslationUtil.js"
], function (Sitecore, ExperienceEditor, TranslationUtil) {
    Sitecore.Commands.TranslateItem = {
        canExecute: function (context) {
            return true;
        },
        execute: function (context) {
            ExperienceEditor.PipelinesUtil.generateRequestProcessor("ExperienceEditor.TranslateItem", function () {
                alert("Item sent to translation.");
            }).execute(context);
 
        }
    };
});

In our case we would like our button to execute some serversided code, which is why we use the PipelinesUtil to generate a RequestProcessor. This will execute a  Experience Editor speak request. These requests are defined in a config within the sitecore node:

  <!-- Experience editor button pipelines-->
<sitecore>
    <sitecore.experienceeditor.speak.requests>
      <request name="ExperienceEditor.TranslateItem" type="Module.Pipelines.ExperienceEditor.TranslateItem, Module" />
      <request name="ExperienceEditor.TranslateHierarchy" type="Module.Pipelines.ExperienceEditor.TranslateHierarchy, Module" />
      <request name="ExperienceEditor.TranslateBundle" type="Module.Pipelines.ExperienceEditor.TranslateBundle, Module" />
    </sitecore.experienceeditor.speak.requests>
</sitecore>

Using request pipelines provides us with enough context to extract and manipulate the context item. In our case we can extract the context item, process it to translation, and return a empty response value :

public class TranslateItem : PipelineProcessorRequest<ItemContext>
{
    public override PipelineProcessorResponseValue ProcessRequest()
    {
       this.RequestContext.ValidateContextItem();
       Item item = this.RequestContext.Item;
       if (item == null)
       {
            Log.Info("No item to translate in context.");
            Sitecore.Context.ClientPage.ClientResponse.Alert(Dictionary.GenericError);
            return new PipelineProcessorResponseValue();
       }
 
       // Add item to Queue
       QueueHelper.AddToQueue(item, QueueTypes.Translation);
 
       return new PipelineProcessorResponseValue();
     }
}

This should give you a basic implementation to work with. There is a lot of possibilities in the new speak setup, while this is just a simple “command” button click, like before 8.0

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s