...
Often when an exhibit requires some form of presets, the developer will need a way to represent many instances of identically structured groups of settings. For example, imagine a simple exhibit that controls a lighting system where the goal is to change the state of the lights with different presets. Sounds simple enough; just use a Dropdown setting type where the user can select one of the many preconfigured presets:
| Code Block | ||
|---|---|---|
| ||
export const MANIFEST = { "manifest": { "statuses": [ ... ], "controls": [ ... ], "settings": [ { "id": "lighting-presets", "type": "Dropdown", "display": "Lighting Preset", "items": [ { "id": "morning", "display": "Morning", "order": 0 }, { "id": "afternoon", "display": "afternoon" }, { "id": "evening", "display": "Evening" } ] } ] } } |
But what if an additional preset is added to the lighting system after the exhibit is installed? Then the exhibit developer must manually add this preset to the manifest:
| Code Block | ||
|---|---|---|
| ||
export const MANIFEST = { "manifest": { "statuses": [ ... ], "controls": [ ... ], "settings": [ { { "id": "lighting-presets", "type": "Dropdown", "display": "Lighting Preset", "items": [ [...] { "id": "after-hours", "display": "After Hours" } ] } ] } } |
So if more presets need to be added post-installation, this setup requires a considerable effort to update the exhibit over its lifecycle.
...
Settings Lists are defined in the Manifest file in a similar manner to top-level settings. The only difference is that they require an additional property to define the schema; an array of settings.
| Code Block | ||
|---|---|---|
| ||
{export const MANIFEST = { "manifest": { "statuses": [ ... ], "controls": [ ... ], "settings": [ { "id" { id: "screens", "type" type: "SettingsList", "display": "Screens", "order" display: "Screens", order: 0, // optional "schema" schema: [ // any Gumband setting types can be included { { "id": "bkg_img", type: "FileSelection", "type": "FileSelection", display: "Background Image", "display"order: "Background0 Image", }, "order": 0 }, { "id": "header", "type": "TextInput", display: "Header", "display": "Header", order: 1 }, "order": 1 }, { { "id": "body", "type": "TextInput", display: "Body", "display": "Body",order: 2 } ] "order": 2 } ] }, ], } } |
Exhibit Manipulation
...
Once added to the manifest and with the exhibit running, the Settings List will appear as its own setting on the Settings Page. The (0) indicates that there are currently no instances of list items in the Screens SettingsList. Click it to view, create, and modify list items.
...
With these callbacks and access functions provided by the NodeJS SDK, it becomes a breeze to respond to setting changes in real time or retrieve and update the List elements as a single-point-of-truth. To provide a robust means of storing intricate data, it’s possible to nest a SettingsList inside the schema of another in the Manifest. Currently up to Two levels of SettingsList nesting are supported. For example, the following modification to our original Manifest would allow any number of Images to be added to any particular Screen SettingsList instance.
| Code Block | |||
|---|---|---|---|
| |||
export const MANIFEST = { "manifest": { "statuses": [ ... ], "controls": [ ... ], "settings": [ { "id": "screens", "type": "SettingsList", "display": "Screens", "order": 0, // optional "schema": [ // any Gumband setting types can be included { { id: "screens", "id"type: "screen_imagesSettingsList", "type" display: "SettingsListScreens", "display": "Screen Images", "order" order: 0, // optional "schema": [ {// optional schema: [ // any Gumband setting types can be included { id: "screen_images", type: "SettingsList", display: "Screen Images", order: 0, // optional schema: [ { id: "imgs", type: "FileSelection", display: "Images", order: 0 } ] }, "id": "imgs", { "type"id: "FileSelectionheader", type: "TextInput", "display": "Images", display: "Header", "order": 0 } ] }, { order: 1 "id": "header", }, "type": "TextInput", { "display"id: "Headerbody", type: "order": 1 }, {TextInput", "id"display: "bodyBody", "type"order: "TextInput",2 } "display": "Body", ] "order": 2 } ] }, ], } } |