Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Populate List Options Sheetworker

1681221832

Edited 1681232439
Alice B.
Roll20 Team
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>
1681237782
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Whoa! A timely update! Thanks Roll20! 
1681238112
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Ooh, we've been wanting this capability for a long time! Can I ask one question though? Why is this async, and if it has to be async, why is it going back to requiring a callback instead of allowing async/await like startRoll? I'd rather see the sheetworker environment moving away from callbacks rather than increasing the reliance on them.
1681238462

Edited 1681241369
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
And second question, I'm guessing this runs similarly to the jQuery implementation where we'd need to re-setup the population each time the sheet is opened? I'm hoping that's not the case as it could actually be a big problem because if two people were on the same sheet, the select options that they see would become desync'd.
1681241311
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Ok, found some bugs with the implementation of this that need to be fixed before I'd consider this really ready: Changing the selected option does not update the associated attribute. This needs to be hooked up, and I had assumed that doing this was why the function had to be async with a callback I've confirmed that other users looking at the sheet don't see the updated options. This also really needs to be hooked up. While it's ok, and actually useful sometimes, for the jQuery implementation to not affect other user's views; this function absolutely needs to affect the views of all users that currently have the sheet open. Without this, it will be very easy for two users to desync their views and become very confused as to what a select attribute is set to. And then, just to clarify for others that come to learn about this feature; it does indeed work like the jQuery implementation, so anything using this will also need to setup the options on sheet load in addition to in reaction to any change that would trigger this.
1681267021
GiGs
Pro
Sheet Author
API Scripter
I havent done anything with this yet, so my comments don't have anything to do with how well it is implement. But I'm very excited about this - there have been a lot of questions about creating dynamic options in the past, and a standard answer will have be changed going forward (from, "No you can't do that. At All!")
1681267128
GiGs
Pro
Sheet Author
API Scripter
Scott, those problems you've found are indeed big ones. Regarding your jquery point, does this mean that it's not trult dynamic? It just allows switching between already existing lists?
1681274492
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
No, it's fully dynamic, but it's not persistent between character sheet sessions. So you'll need to run a setup routine to update all your dynamic lists each time. Probably with some logic to handle what they are already set too. I've got some ideas on integrating this with the k-scaffold to streamline the usage.
1681275441

Edited 1681275454
GiGs
Pro
Sheet Author
API Scripter
That is a pain. So you'd need to create the lists on each sheet load? (Or store them somehow, which doesn't happen automatiocally?)
1681507769

Edited 1681507830
vÍnce
Pro
Sheet Author
Glad to see this added and I'll be following this thread... but it seems like the implementation is "half-baked", similar to the jQuery addition added last year.
1682671723

Edited 1682671778
Peter B.
Pro
Sheet Author
WOW! Finally an update containing a sheetworker feature and actually one I requested!!!!&nbsp; <a href="https://app.roll20.net/forum/post/10709362/extend-roll20-jquery-to-allow-toggling-of-the-disabled-tag" rel="nofollow">https://app.roll20.net/forum/post/10709362/extend-roll20-jquery-to-allow-toggling-of-the-disabled-tag</a> I am so happy to finally see a feature like this coming! I had honestly given up on checking the change logs since new years as I feel like nothing new have come to sheet authors for so long. That being said, I completely agree with the findings of Scott C. (the unofficial master of sheet writing) on the points that he has made: Use async/await instead of callbacks: &nbsp;Async/await is just way nicer to work with and makes the code easier to read and use. Please add this before this feature gets put into the dreaded maintenance mode &nbsp;where no more development will ever come to it Changing the option should update associated attribute . This is of very little concern to me, as of what I am going to use it for, but it is important. Persist list between players: The lists has to be persisted between players. Personally I do not need this is my games, as generally the sheets in my game are unique between players, but we have 1 shared sheet between us, that could cause trouble. As a sheet author I cannot tell how every single other player is using my sheet (if only we had some analytics) so in order to not create a lot of confusion for all the people using it, having it persistent is a must. This must be added before this feature hits maintenance mode! Persist the list between sessions : It will be a hassle to setup the lists on every sheet open. I would love if Roll20 would handle this on their end, so only changes needs to be recorded. If this is not possible, then I can live without it, but it would be nice feature to have Finally I just want to say thank you again for giving something to us sheet workers. I have been waiting so long for this, and seeing my suggestion with a measly 23 upvotes getting developed is so nice. Thank you! I look forward to start implementing this on my sheet!
1687194669
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Found a new bug with the sheetworker (or maybe the documentation?): The documentation states that you can use the label &nbsp;key or the i18n &nbsp;key in the objects of the optionsArray . However, it seems that the sheetworker actually requires label , and that i18n &nbsp;does not do anything. Given the following optionsArray : [ { "value": "", "i18n": "select one" }, { "value": "-nxwhb2t1deijpfz1pgs", "i18n": "academics" }, { "value": "-nxwhb2t1deijpfz1pgt", "i18n": "athletics" }, { "value": "-nxwhb2t1deijpfz1pgu", "i18n": "close combat" }, { "value": "-nxwhb2t1deijpfz1pgv", "i18n": "culture" }, { "value": "-nxwhb2t1deijpfz1pgw", "i18n": "empathy" }, { "value": "-nxwhb2t1deijpfz1pgx", "i18n": "firearms" }, { "value": "-nxwhb2t1deijpfz1pgy", "i18n": "integrity" }, { "value": "-nxwhb2t1deijpfz1pgz", "i18n": "leadership" }, { "value": "-nxwhb2t1deijpfz1ph-", "i18n": "medicine" }, { "value": "-nxwhb2t1deijpfz1ph0", "i18n": "occult" }, { "value": "-nxwhb2t1deijpfz1ph1", "i18n": "persuasion" }, { "value": "-nxwhb2t1deijpfz1ph2", "i18n": "pilot" }, { "value": "-nxwhb2t1deijpfz1ph3", "i18n": "science" }, { "value": "-nxwhb2uqvez-sjk-0iw", "i18n": "subterfuge" }, { "value": "-nxwhb2uqvez-sjk-0ix", "i18n": "survival" }, { "value": "-nxwhb2uqvez-sjk-0iy", "i18n": "technology" } ] the populateListOptions sheetworker gives the following error: sheetsandboxworker.js:735 Character Sheet populateListOptions Error: object is missing label or value key