Get Started!

JSON Designer Control Options

When developing a control you might want to expose some configurable options; each control has an optional JSONOptions field in the designer for, here's how to use it.

Settings Icon p-r

Required interface

To simplfy the inclusion of the options an interface JSONOptions.IJSONOptionsDesignerControl has been created that, when implemented, automatically extracts the JSON for deserialization.

In order to satisfy the the interface you need to define the get for a property DefaultJSONOptions of type string.

This value will be the Default JSON that is included in the editor of the designer.

This Interface requires the following namespace reference :

using Net4orce.Controls.Collectives.CanvasCore.Sections.DesignerToolOptions;

Serialization of the Options calls

In order to carry the values for the options we need a class, it's the result of the serialization of this class that you want to return in the DefaultJSONOOptions.

To help the users who make use of your controls, it's a good idea to include formatting within your JSON.

Given a class Options, your DefaultJSONOptions property would be something like :

public string DefaultJSONOptions{
  get {
    var opts = new Options();

    return CanvasApp.SerializeToJSON(
      opts,
      Formatting.Indented
    );

  }
}

Note the Formatting.Indented this requires a reference to the Newtonsoft.JSON namespace.

A Simple Starting Example

Here's a starting point that you can use to create your first control with JSON options support.

using System;
using System.Web.UI.WebControls;
using System.Collections.Generic;

using Net4orce.Core.Canvas;
using Net4orce.Core.Canvas.Meta;

using Net4orce.Controls.Collectives.CanvasCore.Sections.DesignerToolOptions;

using Newtonsoft.Json;

namespace Example {

  public class MyControl : ControlBase, 
                           IDesignerControl, 
                           JSONOptions.IJSONOptionsDesignerControl {

    // Satisfy IJSONOptionsDesignerControl 
    public string DefaultJSONOptions{
      get {
        var opts = new Options();

        return CanvasApp.SerializeToJSON(
          opts,
          Formatting.Indented
        );        
      }
    }

    // Opts, designer options
    public Options Opts = new Options();

    protected override void initialize() {
      base.initialize();

      // Deserialize the JSON
      Opts = CanvasApp.DeSerializeFromJSON<Options>(
        cJSONDesignerOptions
      );

      // Make use of Opts...
      if( Opts.limitType != "None" ) {
        // Use Opts.maxItems
      }          

    }

    public bool Designer { get; private set; }

    // The Options Class
    public class Options {
      public string limitType = "None";
      public int maxItems = 0;
    }
  }
}

This will expose options for a string limitType and an integer maxItems.