Hey Folks!
We've add a new sheetworker function to help you to dynamically create options in selects or data-lists elements, see the end of the post for a quick example.
populateListOptions(object)
The function will by default remove all current option elements already contained in the found select/data-list elements before appending any new ones created by this function. If an option is marked as selected, it will be set as the initially selected value and any related input element will be updated to that option's value.
The function takes in a single object that contains the following properties:
{
elemSelector -- Class, id or element selector string for a select or data-list element on the character sheet, can find multiple select/data-list elements that match the selector.
optionsArray -- The options that will be created as a result of this function, see optionsArray below for more details.
callback -- (Optional) This is a callback function which will be executed after the option elements have been populated.
overwrite -- (Optional) Set to false if you want to add to and not replace an existing list of options. Defaults to true if not defined.
}
optionsArray properties - An array of objects that represent the option elements to be created, each object describes a single option element and can contain the following:
{
label -- (Optional)- Text that Indicates the meaning of the option, used as the text content. If not defined, the value property will be used in its place.
value -- Text value to be submitted if this element is selected.
i18n -- (Optional) - The translation key to be found in the sheet's translations, will be used as the text content in place of the label or value property.
selected -- true/false (Optional) - If true sets this element as the option to be initially selected. Defaults to false if not defined.
disabled -- true/false (Optional) - If true sets this element as not checkable, and it from mouse clicks. Defaults to false if not defined.
}
Example:
Here is an example html of finding two matching select elements and populating their options field after pressing a button that will fire off the function:
<div class="test-select">
<input type="text" name="attr_dinamicselect" />
<select class="dynamicSelect" name="attr_dinamicselect"></select>
<button type="action" name="act_populateselect">populate</button>
</div>
<script type="text/worker">
const populateSelectionFunct = () => {
const options = [
{ label: 'Corina Inkpot', value: 'Corina'},
{ value: 'Bevel Left', disabled: "true"},
{ label: 'Ung Dag', value: 'Dag', selected: "true"}
]
populateListOptions({
elemSelector: '.dynamicSelect, .dynamicSelectBlank',
optionsArray: options,
callback: () => {
console.log('Options should be populated')
}
});
};
on("clicked:populateselect", eventInfo => {
populateSelectionFunct();
});
</script>
The resulting html after the button press:
<div class="test-select"> <input type="text" name="attr_dinamicselect"> <select class="dynamicSelect" name="attr_dinamicselect"> <option value="Corina">Corina Inkpot</option> <option value="Bevel Left" disabled="true">Bevel Left</option> <option value="Dag" selected="true">Ung Dag</option> </select> <button type="action" name="act_populateselect">populate</button> </div>
