Page Comparison

...

This status type displays text. If you set the value of a String status to a URL, the Gumband Web UI will automatically parse that url and display the status value as a hyperlink.

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

This control type creates a single button in the UI.

...

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": "Single",     type: "Group",
             " 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.

{     "manifest": {         "statuses": [],     id:    "controls": ["nested_string_status_1",
              {        type: "String",
       "id": "group_control",              display: "Example String "type":Status 1"Group",
                "display"      default: "Examplea Groupdefault Controlvalue",
                 "     order": 0,
                "items": [ },
                   {
                        "id": "nested_singlestring_controlstatus_12",
 
                      "type": "SingleString",
 
                      "display": "Example SingleString ControlStatus 12",
                      default:  "order":a 0default value",
                   },   order: 1
                {  }
              ]
       "id": "nested_single_control_2",   }
      ],
              "type": "Single"controls: [],
      settings: []
  }
}

Set a group status value from the SDK like this:

// File: your-code.js
const { Gumband } = require('@deeplocal/gumband-nodejs-sdk')
// or import { "display": "Example Single Control 2",
                        "order": 1
          Gumband } from '@deeplocal/gumband-nodejs-sdk'
const gb = new Gumband(EXHIBIT_TOKEN, EXHIBIT_ID, PATH_TO_MANIFEST);

function updateStatus() {
  gb.setStatus("nested_string_status_1", "new status value");
}

...

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
  {    }
    ],
       "id"settings: "exhibit_controls",[]
                "type": "Group",}
}

...

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,
              items: [
                  {
                      id: "nested_single_control_1",
                      type: "Single",
                      display: "Example Single Control 1",
                      order: 0
                  },
                  {
                      id: "nested_single_control_2",
                      type: "Single",
                      display: "Example Single Control 2",
                      order: 1
                  }
              ]
          },
          {
              id: "exhibit_controls",
              type: "Group",
              display: "Example Empty Group Control",
              order: 1,
              items: []
          }
      ],
      settings: []
  }
}

...

Exhibit Setting Types

Toggle

This setting represents a boolean option for users.

export const MANIFEST = {
  manifest: {
      statuses: [],
      controls: [],
      settings: [
          {
         "display": "Example Empty Group Control     id: "toggle_setting",
              type:  "orderToggle": 1,
              display: "Example Toggle"items":,
[]             } default: false
      ],    }
    "settings": []    ]
  }
}

...

...

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

Exhibit Setting Types

Toggle

This setting represents a boolean option for users.

...

TextInput

This Setting allows users to enter text.

export const MANIFEST = {
  manifest: {
        "statuses": [],

       "controls": [],
        "settings": [
            {
                "id"type: "toggle_settingTextInput",
                "type"id: "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 enter formatted text rather than simply a string like the typical TextInput settingeither manually enter a 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_areacolor_input_setting",
 
              "display": "Example TextHex Area InputColor",
  
             "default": "Example Text Setting Value"     default: "#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.

export const MANIFEST = {
  "manifest": {
 
      "statuses": [],
 
      "controls": [],
        "settings": [
            {
 
              "type": "Dropdown",
                "id": "dropdown_example",
                "display": "Example Dropdown Setting",

               "default": "option_1",
 
              "items": [
                    {
                        "id": "option_1",
 
                      "order": 1,
 
                      "display": "Option 1"
                    },
 
                  {
                        "id": "option_2",
                        "order": 2,
 
                      "display": "Option 2"
                    },
                    {
                        "id": "option_3",
 
                      "order": 3,
                        "display": "Option 3"

                   }
                ]
 
          }
        ]
 
  }
}

...

SingleButtonGroup

This setting type similarly allows users to select one from a set of options. However, in this case, options are rendered as a button group rather than a dropdown selector.

export const MANIFEST = {
  "manifest": {
 
      "statuses": [],
 
      "controls": [],
        "settings": [
            {
 
              "type": "SingleButtonGroup",
                "id": "single_button_group_example",
                "display": "Example Single Button Group Setting",

               "default": "option_1",
                "items": [
 
                  {

                       "id": "option_1",
                        "order": 1,
                        "display": "Option 1"
 
                  },

                   {
                        "id": "option_2",
                        "order": 2,

                       "display": "Option 2"
 
                  },
                    {
 
                      "id": "option_3",
                        "order": 3,
                        "display": "Option 3"

                   }
                ]
 
          }
        ]
    }
}

...

FileSelection

This setting type creates a dropdown, however the options are populated using the list of files available the exhibit.

export const MANIFEST = {
  "manifest": {
 
      "statuses": [],
        "controls": [],
        "settings": [
            {
                "type": "FileSelection",
                "id": "file_selection_example",
 
              "display": "Example File Selection Setting"
            }
 
      ]

   }
}

...

Exhibit files can be uploaded, downloaded, and deleted via the exhibit “Files” tab.

...

This setting type creates a data picker in the gumband UI, and allows users to set date and time values to the exhibit.

export const MANIFEST = {
  "manifest": {
        "statuses": [],

       "controls": [],
 
      "settings": [
 
          {

               "type": "Date",
                "id": "date_example",
 
              "display": "Example Date Setting"
            }
 
      ]
    }
}

...

Values are sent to the exhibit in this format.

...

Something to be aware of is that the timezone is determined by the Gumband User’s local time when the setting is saved. When accessing Gumband from another timezone, the setting value on the over view page will show the timezone determined by the last time the setting was saved, but the Setting Value on the “Settings” tab will show the value translated to the users local time. However, there’s a planned feature to allow developers to set the timezone for the exhibit.

SettingsGroup

This setting type allows developers to organize any of the above setting types into groups of settings. This type by itself is not a setting, just defining the parent of the nested settings within it. It’s Similar to the Group control type. However, instead of "items", this type expects a schema JSON property to define the contained settings.

export const MANIFEST = {
  "manifest": {
        "statuses": [],
        "controls": [],
        "settings": [

           {
                "type": "SettingsGroup",
                "id": "settings_group_example",

               "display": "Example Settings Group",
 
              "schema": [
 
                  {

                       "type": "TextInput",
 
                      "id": "text_input_within_group",
 
                      "display": "TextInput Setting Within a Group",
                        "order": 0
                    },
                    {
                        "type": "Toggle",
 
                      "id": "toggle_within_group",
 
                      "display": "Toggle Setting Within a Group",
                        "order": 1
                    }
                ]
            }
        ]
 
  }
}

SettingsGroups will appear in the Settings UI as these large buttons which hide the settings contained in them. When a user clicks on the Group button, the nested settings will appear in a UI such as the one below.

...

Finally the SettingsList type also defines a schema JSON property like the the SettingsGroups. However, this schema is interpreted by Gumband as a set of settings that users can dynamically add and remove. Such that there can be any number of instances of these schema of settings.

export const MANIFEST = {
  "manifest": {
        "statuses": [],

       "controls": [],
 
      "settings": [
 
          {

               "type": "SettingsList",
 
              "id": "settings_list_example",
 
              "display": "Example Settings List",
                "schema": [
                    {
 
                      "type": "TextInput",
                        "id": "text_input_within_list",
                        "display": "TextInput Setting Within a List",

                       "order": 0
 
                  },
                    {
 
                      "type": "Toggle",
                        "id": "toggle_within_list",
                        "display": "Toggle Setting Within a List",

                       "order": 1
                    }
                ]
            }
        ]
 
  }
}

...

Clicking on the SettingsList button takes the user to the SettingList view. By default, there are 0 entries in the list of the settings schema defined in the manifest.

...

Click the “Create New” button to add a new entry of the settings schema. Each entry can have a unique name.

After the “New Setting List Item” entry was created its settings appear grouped like this in the “Example Settings List” SettingList view.

...