Page Comparison

...

export const MANIFEST = {
  manifest: {
    statuses: [
      {
        id: "string_status_1",
        type: "String",
        display: "Example String Status",
        default: "a default value",
        order: 0
      },
      {
        id: "string_status_2",
        type: "String",
        display: "Example String Status with a URL value",
        default: "https://gumband.com/",
        order: 1
      }
    ],
    controls: [],
    settings: []
  }
}

...

...

Single

...

Group

This type does not define a status. Instead, this type defines the parent of a group of statuses that will appear in the Gumband UI together. This type has an additional JSON Property: items which is an array to define statuses contained in this group. This is useful for organizing the Gumband Statuses UI for your exhibit.

export const MANIFEST = {
  manifest: {
      statuses: [],
     controls: [    {
  {            id: "singlegroup_controlstatus",
              type: "SingleGroup",
              display: "Example SingleGroup ControlStatus",
              order: 0,
              items: [
 }         ],     settings: []  {
}
}

...

Group

This type does not define a control. Instead, this type defines the parent of a group of controls that will appear in the Gumband UI together. This type has an additional JSON Property: items which is an array to define the Single controls contained in this group. This is useful for organizing the Gumband Controls UI for your exhibit.

export const MANIFEST = {
  manifest: {                      id: "nested_string_status_1",
                      type: "String",
                      display: "Example String Status 1",
                      default: "a default value",
                      order: 0
                  },
                  {
                      id: "nested_string_status_2",
                      type: "String",
                      display: "Example String Status 2",
                      default: "a default value",
                      order: 1
                  }
              ]
          }
      ],
      controls: [],
      settings: []
  }
}

Image Added

Exhibit Control Types

Single

This control type creates a single button in the UI.

export const MANIFEST = {
  manifest: {
    statuses: [],
    controls: [
      {
        id: "single_control",
        type: "Single",
        display: "Example Single Control",
        order: 0
      }
    ],
    settings: []
  }
}

...

Group

This type does not define a control. Instead, this type defines the parent of a group of controls that will appear in the Gumband UI together. This type has an additional JSON Property: items which is an array to define the Single controls contained in this group. This is useful for organizing the Gumband Controls UI for your exhibit.

export const MANIFEST = {
  manifest: {
      statuses: [],
      controls: [
          {
              id: "group_control",
              type: "Group",
              display: "Example Group Control",
              order: 0,
              statusesitems: [],
      controls: [           {
                      id: "groupnested_single_control_1",
                      type: "GroupSingle",
                      display: "Example Single Control 1",
     display: "Example Group Control",               order: 0,
                 items: [},
                  {
                      id: "nested_single_control_12",
                      type: "Single",
                      display: "Example Single Control 12",
                      order: 01
                  },
              ]
          },
  {        {
              id: "nested_single_control_2exhibit_controls",
              type: "Group",
              typedisplay: "Single",Example Empty Group Control",
              order: 1,
         display: "Example Single Control 2", items: []
          }
      ],
  order: 1   settings: []
  }
}

...

Exhibit Setting Types

Toggle

This setting represents a boolean option for users.

export const MANIFEST = {
  manifest: {
  }    statuses: [],
      controls:   [],
      settings:  [
 },           {
              id: "exhibittoggle_controlssetting",
              type: "GroupToggle",
              display: "Example Empty Group ControlToggle",
              orderdefault: 1,
              items: []false
           }
      ],
 }
     settings: []
  }
}

...

...

Gumband does NOT support defining a Group control type in the items of another Group control type.

Exhibit Setting Types

Toggle

...

TextInput

This Setting allows users to enter text.

export const MANIFEST = {
  manifest: {
      statuses: [],
      controls: [],
      settings: [
          {
              idtype: "toggle_settingTextInput",
              typeid: "Toggletext_input_setting",
              display: "Example ToggleText Input",
              default: false"Example Setting Value"
          }
      ]
  }
}

...

...

TextAreaInput

This Setting setting type allows users to enter formatted text rather than simply a string like the typical TextInput setting.

export const MANIFEST = {
  manifest: {
      statuses: [],
      controls: [],
      settings: [
          {
              type: "TextInputTextAreaInput",
              id: "text_area_input_setting",
              display: "Example Text Area Input",
              default: "Example Text Setting Value"
            }
      ]
  }
}

...

}
      ]
  }
}

...

Clicking on the input box opens a larger edit modal.

The value of the setting is sent to the sdk as an html-formatted string.

...

HexColor

This setting type allows users a user to either manually enter formatted text rather than simply a string like the typical TextInput settinga hex color code into the Gumband UI, or use the attached color wheel popup to choose a color visually.

export const MANIFEST = {
  manifest: {
      statuses: [],
      controls: [],
      settings: [
          {
              type: "TextAreaInputHexColor",
              id: "texthex_area_inputcolor_setting",
              display: "Example TextHex Area InputColor",
              default: "Example Text Setting Value#EEEEEE"
          }
      ]
  }
}

...

Clicking on the input box opens a larger edit modal.

The value of the setting is sent to the sdk as an html-formatted string.

...

Image Added

Dropdown

This setting type allows user to select one from a set of available dropdown options. Developers define these options with the items JSON property.

...