...
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.
| 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": [] } } |
...
Exhibit Control Types
...
This control type creates a single button in the UI.
| Code Block | ||
|---|---|---|
| ||
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.
| 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 |
...
This setting represents a boolean option for users.
| Code Block | ||
|---|---|---|
| ||
export const MANIFEST = { "manifest": { "statuses": [], "controls": [], "settings": [ { "id": "toggle_setting", type: "type": "Toggle", "display": "Example Toggle", "default": false } ] } } |
...
TextInput
This Setting allows users to enter text.
| Code Block | ||
|---|---|---|
| ||
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.
| Code Block | ||
|---|---|---|
| ||
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.
...
This setting type allows user to select one from a set of available dropdown options. Developers define these options with the items JSON property.
| Code Block | ||
|---|---|---|
| ||
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.
| Code Block | ||
|---|---|---|
| ||
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.
| Code Block | ||
|---|---|---|
| ||
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.
...
| Code Block | ||
|---|---|---|
| ||
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.
...
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.
| Code Block | ||
|---|---|---|
| ||
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.
| Code Block | ||
|---|---|---|
| ||
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.
...