...
| Code Block | ||
|---|---|---|
| ||
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.
| Code Block | ||
|---|---|---|
| ||
export const MANIFEST = {
manifest: {
statuses: [],
controls: [ {
{ id: "single_control", id: "group_status",
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.
| Code Block | ||
|---|---|---|
| ||
export const MANIFEST = { manifest: {{ statuses: [], controls: [id: "nested_string_status_1", { type: "String", id: "group_control", typedisplay: "GroupExample String Status 1", display default: "Examplea Groupdefault Controlvalue", order: 0, items: [}, { id: "nested_singlestring_controlstatus_12", type: "SingleString", display: "Example SingleString ControlStatus 12", orderdefault: 0"a default value", }, order: 1 { } ] id: "nested_single_control_2", } ], typecontrols: "Single"[], settings: [] display: "Example Single Control 2", order: 1 } ] } } |
Set a group status value from the SDK like this:
| Code Block | ||
|---|---|---|
| ||
// 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");
} |
...
Exhibit Control Types
Single
This control type creates a single button in the UI.
| Code Block | ||
|---|---|---|
| ||
export const MANIFEST = { manifest: { statuses: [], controls: [ }, { id: "exhibitsingle_controlscontrol", type: "GroupSingle", display: "Example EmptySingle Group Control", order: 0 order: 1, } ], itemssettings: [] }} } |
...
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.
| Code Block | ||
|---|---|---|
| ||
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: []
}
} |
...
| Note |
|---|
Gumband does NOT support defining a |
Exhibit Setting Types
Toggle
This setting represents a boolean option for users.
| Code Block | ||
|---|---|---|
| ||
export const MANIFEST = { manifest: { statuses: [], controls: [], settings: [ { id: "toggle_setting", type: "Toggle", display: "Example Toggle", default: 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.
| Code Block | ||
|---|---|---|
| ||
export const MANIFEST = {
manifest: {
statuses: [],
controls: [],
settings: [
{
idtype: "toggle_settingTextInput",
typeid: "Toggletext_input_setting",
display: "Example Text ToggleInput",
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.
| Code Block | ||
|---|---|---|
| ||
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.
| View file | ||
|---|---|---|
|
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 setting.
...
a hex color code into the Gumband UI, or use the attached color wheel popup to choose a color visually.
| Code Block |
|---|
export const MANIFEST = {
manifest: {
statuses: [],
controls: [],
settings: [
{
type: "TextAreaInputHexColor",
id: "texthex_areacolor_input_setting",
display: "Example TextHex Area InputColor",
default: "Example Text Setting Value#EEEEEE"
}
]
}
} |
...
Clicking on the input box opens a larger edit modal.
| View file | ||
|---|---|---|
|
The value of the setting is sent to the sdk as an html-formatted string.
...
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.
...