Exhibit Manifest Configuration

1 Exhibit Status Types
- 1.1 String
- 1.2 Group
2 Exhibit Control Types
- 2.1 Single
- 2.2 Group
3 Exhibit Setting Types
- 3.1 Toggle
- 3.2 TextInput
- 3.3 TextAreaInput
- 3.4 HexColor
- 3.5 Dropdown
- 3.6 SingleButtonGroup
- 3.7 FileSelection
- 3.8 Date
- 3.9 SettingsGroup
- 3.10 SettingsList

Exhibit Status Types

String

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: []
  }
}

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: [
          {
              id: "group_status",
              type: "Group",
              display: "Example Group Status",
              order: 0,
              items: [
                  {
                      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: []
  }
}

Set a group status value from the SDK like this:

// File: your-code.js
const { Gumband } = require('@deeplocal/gumband-nodejs-sdk')
// or import { 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");
}

A Status Group and two single statuses in the Gumband Status page

Exhibit Control Types

Single

This control type creates a single button in the UI.

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.

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.

TextAreaInput

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

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 a user to either manually enter a hex color code into the Gumband UI, or use the attached color wheel popup to choose a color visually.

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.

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.

FileSelection

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

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

Date

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

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.

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.

Additionally, SettingsGroups will appear on the "Overview" tab, but the values of each of their contained settings will not be displayed there. Instead, the number of settings in the group will be displayed.

Finally, when a setting nested in a SettingsGroup is updated, the websocket event’s id will have the following format: <SettingsGroupID>/<NestedSettingID>. Here is an example:

SettingsList

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.

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.

Here, there are 2 entries of the Example Settings List schema.

On the “Overview” tab, the SettingsList type show the number of entries in the list.

When a SettingList entry is created or deleted, a Websocket event is sent to the exhibit SDK. Additionally, when a setting nested in a SettingsList is updated, the websocket event’s id will have the following format: <SettingsListID>/"<SettingList Entry Name>"/<NestedSettingID>. Here is an example of the series of Websocket events sent to SDK by creating the two entries shown above and updating one of the created settings:

For a closer look at SettingsLists, see: Settings Lists