Register a custom editor

2 min

To create the actual dojo editor, see Create an editor widgetCreate an editor widget.

The following example demonstrates how to register a custom editor.

[EditorDescriptorRegistration(TargetType = typeof (String[]), UIHint = Global.SiteUIHints.Strings)]
public class StringListEditorDescriptor: EditorDescriptor {
  public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes) {
    ClientEditingClass = "alloy/editors/StringList";
    base.ModifyMetadata(metadata, attributes);
  }
}

Using the following technique, you can pass data from the server to the client-side editor.

The following example shows how to pass an array of strings created on the server into a custom StringList editor from the previous example:

[EditorDescriptorRegistration(TargetType = typeof (String[]), UIHint = Global.SiteUIHints.Strings)]
public class StringListEditorDescriptor: EditorDescriptor {
  public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes) {
    base.ModifyMetadata(metadata, attributes);
    var reservedWords = new [] {
      "foo",
      "bar",
      "foobar"
    };
    //This array will be converted to a JSON object and passed to the constructor of the editor widget.        
    metadata.EditorConfiguration.Add("reservedWords", reservedWords);
  }
}

The previous examples affect forms and on-page editing view. However, you can specify different settings for both views:

[EditorDescriptorRegistration(TargetType = typeof (float))]
public class FloatNumberEditorDescriptor: EditorDescriptor {
  public FloatNumberEditorDescriptor() {
    //The default editing class that will be used in forms editing mode.
    ClientEditingClass = "dijit/form/NumberTextBox";
  }

  public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes) {
    base.ModifyMetadata(metadata, attributes);

    if (!attributes.OfType<RangeAttribute>().Any()) {
      var constraints = new Dictionary<string,object>() {
          {
            "min",
            Double.MinValue
          }, {
            "max",
            Double.MaxValue
          }
        };
      //These settings will be passed to the constructor of the editor widget.
      metadata.EditorConfiguration.Add("constraints", constraints);
    }

    //Define what kind of editor we want to have, in this case we want to create an inline editor. This is used
    //when the user is in OPE ("on page editing") mode.
    metadata.CustomEditorSettings["uiWrapperType"] = UiWrapperType.Inline;
    //Specify the class for a custom editor responsible for the actual editing in OPE.
    //If not defined the default (forms) editor will be used.
    metadata.CustomEditorSettings["uiType"] = "dijit/form/NumberTextBox";
  }
}

You can find a complete example of creating a custom dojo editor in the Alloy sample site, available on GitHub.