How do I construct a reasonable JS implementation of canExecute() for an Experience Editor Button?

Question

I am trying to run a field editor for editing some meta data (tagging, description, title, image selection) in Experience editor.

My starting point was https://blog.istern.dk/2015/03/02/running-sitecore-field-editor-from-a-speak-command-in-sitecore-experience-editor/, and it seems mostly functional.

The last thing I need resolved is a proper implementation of the JS method canExecute().

I figured that I would need to look up the templates of the context item, but so far my searches have yielded little of use.

The current JS for my button looks like this

define([
    "sitecore",
    "/-/speak/v1/ExperienceEditor/ExperienceEditor.js"
], function (Sitecore, ExperienceEditor) {

  Sitecore.Commands.LaunchFieldEditor =
  {
    canExecute: function (context) {
      //YOU COULD ADD FUNCTIONALITY HERE TO SEE IF ITEMS HAVE THE CORRECT FIELDS
      return true;
    },
    execute: function (context) {

      //THIS IS THE ACCESSKEY ON LINK TAG "A"
      context.currentContext.argument = context.button.viewModel.$el[0].accessKey;

      ExperienceEditor.PipelinesUtil.generateRequestProcessor("ExperienceEditor.GenerateFieldEditorUrl", function (response) {
        var DialogUrl = response.responseValue.value;
        var dialogFeatures = "dialogHeight: 680px;dialogWidth: 520px;";
        ExperienceEditor.Dialogs.showModalDialog(DialogUrl, '', dialogFeatures, null);
      }).execute(context);

    }
  };
});

I have considered rendering the template IDs of the context item into the page content and comparing that to a value stored together with the fields (in accessKey). Such a solution seems a little messy to me, since it would include rendering data into a completely different part of the page.

I have considered doing some sort of service that could resolve the problem based on the field names + the id of the context item, but such a thing would need calling async, and that does not seem acceptable for canExecute().

---

My original script passed field names to the generateRequestProcessor call, by picking them out of the accessKey propery of the rendered button.

I ended up passing the required templates around using the same field and a querystring-like syntax.

This made checking for the required templates fairly simple serverside. Updated script below.

define([
    "sitecore", 
    "/-/speak/v1/ExperienceEditor/ExperienceEditor.js"
], function (sitecore, experienceEditor) {

    sitecore.Commands.LaunchFieldEditor =
    {
        canExecute: function (context) {
            context.currentContext.argument = context.button.viewModel.$el[0].accessKey;
            return context.app.canExecute("ExperienceEditor.CanExecuteFieldEditor", context.currentContext);
    },
        execute: function (context) {

            //THIS IS THE ACCESSKEY ON LINK TAG "A"
            context.currentContext.argument = context.button.viewModel.$el[0].accessKey;

            experienceEditor.PipelinesUtil.generateRequestProcessor("ExperienceEditor.GenerateFieldEditorUrl", function (response) {
                var DialogUrl = response.responseValue.value;
                var dialogFeatures = "dialogHeight: 680px;dialogWidth: 520px;";
                experienceEditor.Dialogs.showModalDialog(DialogUrl, '', dialogFeatures, null);
            }).execute(context);
        }
    };
});

Answer 1

You would have to perform request to the server to check whether your current template meet certain criteria.

Request class:

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

namespace Sitecore.Modules.ExperienceEditor
{
    public class CanExecuteMyCommands : PipelineProcessorRequest<ItemContext>
    {
        public override PipelineProcessorResponseValue ProcessRequest()
        {
            var currentItem = RequestContext.Item;
            return new PipelineProcessorResponseValue
            {
                Value = currentItem.TemplateName.Equals("Desired")
            };
        }
    }
}

In this case I just check whether Template name equals Desired. You can apply your own conditions inside that class.

Configuration:

<?xml version="1.0"?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
    <sitecore>
        <sitecore.experienceeditor.speak.requests>
            <request name="ExperienceEditor.YourNamespace.CanExecuteMyCommands" type="Sitecore.Modules.ExperienceEditor.CanExecuteMyCommands, Sitecore.Modules.ExperienceEditor"/>
        </sitecore.experienceeditor.speak.requests>
    </sitecore>
</configuration>

JS call:

canExecute: function (context) {
    return context.app.canExecute("ExperienceEditor.YourNamespace.CanExecuteMyCommands", context.currentContext);
}