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: []
}
}
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,
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: []
}
}
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.
export const MANIFEST = {
manifest: {
statuses: [],
controls: [],
settings: [
{
id: "toggle_setting",
type: "Toggle",
display: "Example Toggle",
default: false
}
]
}
}
TextInput
This Setting allows users to enter text.
export const MANIFEST = {
manifest: {
statuses: [],
controls: [],
settings: [
{
type: "TextInput",
id: "text_input_setting",
display: "Example Text Input",
default: "Example Setting Value"
}
]
}
}
TextAreaInput
This 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: "TextAreaInput",
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 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.
export const MANIFEST = {
manifest: {
statuses: [],
controls: [],
settings: [
{
type: "HexColor",
id: "hex_color_setting",
display: "Example Hex Color",
default: "#EEEEEE"
}
]
}
}
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.
Date
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.
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.
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.
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