How to change the options of my Selectboxes component?

You can change the selectable options and their corresponding values of a Selectboxes component after initializing the form by following these steps:

  • In the initialization code:
    • Add a Hidden component. The Selectboxes component will obtain its options from it.
    • Optionally set the defaultValue property of the Hidden component as default options for the Selectboxes component.
    • Add a Selectboxes component and add a Logic object to make it reference the Hidden component for its options.
  • In the event handling code:
    • Update the value of the Hidden component to update the options of the Selectboxes.

These steps are illustrated in an example below. First, we give the initialization code:

% This hidden component holds information on the options of the Selectboxes.
hiddenKey           = "HiddenKey";
hid                 = component.Hidden(hiddenKey, form);
hid.defaultValue    = struct( ...
    "label", {"Option 1", "Option 2"}, ...
    "value", {"opt1", "opt2"} ...
    );

% Create the Selectboxes component and make it reference the Hidden component.
sel             = component.Selectboxes("sel", form);
sel.label       = "Make selection";
sel.redrawOn    = hiddenKey;

% Add logic that always holds. The Selectboxes values shall come from the Hidden value.
logic           = componentProperties.Logic(sel);
logic.trigger   = struct( ...
    "type", "javascript", ...
    "javascript", "result = true;" ...
    );
logic.actions   = {struct( ...
    "name",         "a", ...
    "type",         "customAction", ...
    "customAction", "component.values = data." + hiddenKey ...
    )};

# This hidden component holds information on the options of the Selectboxes.
hidden_key = "HiddenKey"
hid = component.Hidden(hidden_key, form)
hid.defaultValue = [
    {"label": "Option 1", value_field_name: "opt1"}, 
    {"label": "Option 2", "value": "opt2"}
]

# Create the Selectboxes component and make it reference the Hidden component.
sel = component.Selectboxes("s", form)
sel.label = "Make selection"
sel.redrawOn = hidden_key

# Add logic that always holds. The Selectboxes values shall come from the Hidden value.
logic = component_properties.Logic(sel)
logic.trigger = {
    "type": "javascript",
    "javascript": "result = true;"
}
logic.actions = {
    "name": "a",
    "type": "customAction",
    "customAction": "component.values = data." + hiddenKey
}

The event code becomes:

val     = struct( ...
    "label", {"New option 1", "New option 2"}, ...
    "value", {"value1", "value2"} ...
    );
payload = utils.setSubmissionData(payload, "HiddenKey", val);

val = [
    {"label": "New option 1", "value": "value1"}, 
    {"label": "New option 2", "value": "value2"}
]
utils.setSubmissionData(payload, "HiddenKey", val)

In a similar fashion, the options of a Select component can be changed after initialization as described here.