How init custom check box value on Ribbon at Experience editor

Question

I have created a custom checkbox that I show at ribbon in Experience Editor (with SPEAK style) and basically, it works. but I can't init default state of this checkbox correctly.

Could anyone help to find a way to init default value?

I have checked how Sitecore do it and it is tricky.

For example:

Sitecore has navigation bar checkbox at ribbon, and for init default value Sitecore has SetCheckboxFromRegistry.js file, that is located in InitializePageEdit folder. This file contains a call to special class this is actually part of settings in the config

<request name="ExperienceEditor.ToggleRegistryKeys.Get"
type ="Sitecore.ExperienceEditor.Speak.Ribbon.Requests.ToggleRegistryKey.GetRegistryKeysRequest,
Sitecore.ExperienceEditor.Speak.Ribbon"/>

seems like I need do the same, but where I need add settings for my JavaScipt file that will be called my code for get default value?

Answer 1

There's a few things required to create the button and hook it all up in order to fire an action. The simplest way is to make a copy of an existing checkbox and make modifications (i.e. one from /sitecore/content/Applications/WebEdit/Ribbons/WebEdit/View/Show in core database).

Then make sure the following is set:

1. Update the Header and Tooltip field, these will be shown in the Ribbon
2. Update the ID to a unique value, e.g. ShowMyCustomRibbonButton
3. The Click field is not required for SPEAK based ribbons. You can set it if you wish and add a commands/command with matching name in config but it will not be used.

If you copied an existing button then you should have a SmallCheckButton Rendering defined on this item. You need to Design Layout layout of the Ribbon Item using Sitecore Rocks. Right click the item and select Tasks > Design Layout.

Then in the Properties window:

1. Set the RegistryKey value to something unique, which will store whether the user has enabled or disabled the state of this button. You can also retrieve the value from registry using this same key from C# code.
2. Set the Command field to the name of your JS Command object (more on this below, it needs to match the code)
3. Set the PageCodeScriptFileName field to the location of the JS file that handles the checkbox.

Handle the checkbox action

The Javascript file specified in PageCodeScriptFileName will handle the checkbox being checked/unchecked. The minimum outline of the functions need to look like below, but take a look at the existing files in /sitecore/shell/client/Sitecore/ExperienceEditor/Commands folder for more examples:

define(["sitecore", "/-/speak/v1/ExperienceEditor/ExperienceEditor.js"], function (Sitecore, ExperienceEditor) {
  Sitecore.Commands.MyCustomControl =
  {
    commandContext: null,
    isEnabled: true,

    canExecute: function (context) {
      if (!ExperienceEditor.isInMode("edit") || context.currentContext.isFallback) {
        return false;
      }

      if (!Sitecore.Commands.MyCustomButtonCommand.commandContext) {
        this.commandContext = ExperienceEditor.getContext().instance.clone(context);
      }
      return true;
    },

    execute: function (context) {
      ExperienceEditor.PipelinesUtil.generateRequestProcessor("ExperienceEditor.ToggleRegistryKey.Toggle", function (response) {
        response.context.button.set("isChecked", response.responseValue.value ? "1" : "0");
        // run any custom logic here, e.g.
        //var btnIsChecked = response.context.button.get("isChecked") == "1";
        //RunMyCustomLogic(btnIsChecked);
      }, { value: context.button.get("registryKey") }).execute(context);
    }
  };
});

• Command name should match (2) that you entered in the Properties window.
• canExecute : Determines if the current user has execute access. The above code is a simple "is in edit mode" check, but you can make a callback to a C# method which can check other things like security or simply return true.
• execute : called when the user checks or unchecks the option. The generateRequestProcessor functions makes a callback to the server which stores it against the user profile, so it remembers the selected value for future requests.

You can read more in the Customize the Experience Editor ribbon documentation or the Invoke a command from editor ribbon series - experience editor article.