Is it possible to hide/show repeating rows based on the value of an attribute used in the row?
example; hide/show spells on a sheet based on their @{level}
I'm guessing that rowID's might be problematic... Maybe this is possible using sheetworkers? Even sorting repeating rows would be beneficial, right? Re-sort skills alphabetically, spells by level, etc. Thoughts?
I'm not clear what you're asking. It would be handy to know what sort of value you want the visibility to set by. Without it we are just guessing.
You can hide bits of a repeating row based on a value within the row. You'd just use that technique and expand it, no sheet worker needed. Put all the contents of the fieldset inside a div, and then a hidden attribute before the div, something like this
<fieldset class="repeating_something">
<input type="hidden" name="attr_hideme" value="0" class="toggle-row" />
<div class="section-to-hide">
<!-- all the contents of the fieldset go here including this probably:--> <input type="number" name="attr_hideme" value="0" />
</div>
</fieldset>
Then use the value of the hiddent attribute to toggle the visibility.
You can have a copy of that hidden attribute inside the div, so you can manually set it or show its value.
Sorting is a very different issue than Hiding/Showing. Its possible to do that with a sheet worker, but its really complex. You essentially have to copy the contents of the rows into new attributes in the order you want them, and delete the old ones.
Hi GiGs,
so, I have a sheet that has a repeating_spells section. All spells(levels 0-9) are located within repeating_spells. I would like to only show the level of spells, 0-9, selected from a checkbox/button found outside the repeating_spells. ie select level 3, and only see level 3 spells.
I assume that the value of @{repeating_spells_$X_level} could be used to determine if a repeating row is shown. I played around with adding a hidden @{level} located just before the outermost element within the fieldset (not unlike your example), but that didn't seem to work upon my first efforts. If I can get this to work, it will save me having to add an additional 9 repeating sections. ;-)
CSS isnt my best skill, but I remember seeing a post about this specific topic: having tabs within a repeating section for showing levels of spells. I havent tried it, but you might get what you need here: https://app.roll20.net/forum/permalink/3094981/
And a follow up post here https://app.roll20.net/forum/permalink/4314678/
Thanks GiGs. I'm sure it just requires a little CSS acrobatics. :-)
edit: and of course I commented in those very threads. lol
I was talking to rabulias recently about whether it was better to have a different repeating section for each spell level or one repeating section for all spells. I couldnt understand why anyone would do a repeating section for each level, but this thread has made me understand why - so you can show/hide groups of spells easily.
I do wonder if the method I suggested (using a hidden attribute for the fieldset row) can be made to work. Possibly having the tabs be outside the fieldset and be action buttons that trigger a sheet worker. If so it would be simpler than Chris's method. I may experiment with that tomorrow- but its bedtime for me now.
Vince said:
edit: and of course I commented in those very threads. lol
Hehe, i noticed that - but it was 4 years ago!
I think I can do something like
.repcontainer > div.repitem input.sheet-spells_0_tab:not(:checked) + .sheet-sect,
.repcontainer > div.repitem input.sheet-spells_1_tab:not(:checked) + .sheet-sect {
display:none;
}
time for bed...
I fiddled with this while having supper, and this solution works.
HTML:
<div class="spell_tabs"><input type="radio" name="attr_spell_tabs" value="-1"><input type="radio" name="attr_spell_tabs" value="0"><input type="radio" name="attr_spell_tabs" value="1"><input type="radio" name="attr_spell_tabs" value="2"><input type="radio" name="attr_spell_tabs" value="3"><input type="radio" name="attr_spell_tabs" value="4"><input type="radio" name="attr_spell_tabs" value="5"></div><fieldset class="repeating_spells"><input type="hidden" class="toggle-show" name="attr_spell_show" value="1"><div class="spell-display"><label>Level <span name="attr_spell_level"></span></label><select name="attr_spell_level"><option selected>-1</option><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div></fieldset>
CSS
div.sheet-spell-display {display:none;}input.sheet-toggle-show[value="1"] ~ div.sheet-spell-display {display: inline-block;}
Sheet worker
on('change:spell_tabs', () => {getSectionIDs('repeating_spells', idarray => {const fieldnames = [];idarray.forEach(id => {fieldnames.push(`repeating_spells_${id}_spell_level`);});getAttrs(['spell_tabs', ...fieldnames], v => {const output = {};const level = +v.spell_tabs||0;idarray.forEach(id => {const thislevel = +v[`repeating_spells_${id}_spell_level`] || 0;output[`repeating_spells_${id}_spell_show`] = (level === -1 || level === thislevel) ? 1 : 0;});setAttrs(output);});});});
So, I have a set of radio buttons at the top for choosing spell level: they set the value of a spell_tabs attribute. They dont have to be radio buttons. You could use action buttons or any other approach, so long as a single attribute (named spell_tabs in this example) is set to the level you want to display.
Then in the fieldset, you have a hidden attribute named spell_show, and the bulk of the fieldset row inside a div. Inside that div is an attribute for the spell_level.
Remember that every attribute on a repeating section is unique: this attribute's full name is repeating_spells_ID_spell_show.
So the sheet worker checks whenever spell_tabs changes, and and loops through the repeating section to check the spell level of that row. The matching follows these rules:
set the spell_show attribute to 1 IF
And the CSS rule hides the section if the spell_show is 0, and shows it if 1.
Note the spell_show attribute needs a default value of 1, or any new spells you try to create will be hidden!
See if this works for you.
Note: new spells wont be hidden, until you change the spell tabs again. That could easily be changed - either the spell level or some other value in the section could trigger the sheet worker to calculate spell_show, so that it updates automatically. just add that the the sheet worker line like so
on('change:spell_tabs change:repeating_spells:spell_level', () => {
Just for clarity - the method I posted above isn't quite the same as the one from your old thread or the FASA sheet, it doesnt to use the hidden radio tabs or the repcontainer references in CSS, for example.
Just wanted to say this works great GiGs! I just need to decide how I'm going to incorporate my spell tab system, but upon my first implementation, outstanding.
Here is a minimal-as-I-can-get-it set of HTML and CSS for the method I use. It sounds like GiGs' solution works for you, but this is here for future users too (maybe even me one day ;-).
HTML:
<input type="radio" class="spellclass01-spells-tab0" name="attr_tab_spellclass01_spells" title="Level 0" value="0">
<span>Level 0</span>
<input type="radio" class="spellclass01-spells-tab1" name="attr_tab_spellclass01_spells" title="Level 1" value="1">
<span>Level 1</span>
<input type="radio" class="spellclass01-spells-tab2" name="attr_tab_spellclass01_spells" title="Level 2" value="2">
<span>Level 2</span>
<input type="radio" class="spellclass01-spells-tab3" name="attr_tab_spellclass01_spells" title="Level 3" value="3">
<span>Level 3</span>
<input type="radio" class="spellclass01-spells-tab4" name="attr_tab_spellclass01_spells" title="Level 4" value="4">
<span>Level 4</span>
<input type="radio" class="spellclass01-spells-tab5" name="attr_tab_spellclass01_spells" title="Level 5" value="5">
<span>Level 5</span>
<input type="radio" class="spellclass01-spells-tab6" name="attr_tab_spellclass01_spells" title="Level 6" value="6">
<span>Level 6</span>
<input type="radio" class="spellclass01-spells-tab7" name="attr_tab_spellclass01_spells" title="Level 7" value="7">
<span>Level 7</span>
<input type="radio" class="spellclass01-spells-tab8" name="attr_tab_spellclass01_spells" title="Level 8" value="8">
<span>Level 8</span>
<input type="radio" class="spellclass01-spells-tab9" name="attr_tab_spellclass01_spells" title="Level 9" value="9">
<span>Level 9</span>
<input type="radio" class="spellclass01-spells-tab99" name="attr_tab_spellclass01_spells" title="All" value="99" checked>
<span>All Spells</span>
<div class="spell-list">
<div style="margin-top:5px;">
<span><b>ENTER SPELL NAME AND SELECT LEVEL</b></span>
</div>
<fieldset class="repeating_spellclass01spell">
<input type="radio" class="hidden spellclass01-spells-tab0" name="attr_spellclass01_spell_level" value="0">
<input type="radio" class="hidden spellclass01-spells-tab1" name="attr_spellclass01_spell_level" value="1">
<input type="radio" class="hidden spellclass01-spells-tab2" name="attr_spellclass01_spell_level" value="2">
<input type="radio" class="hidden spellclass01-spells-tab3" name="attr_spellclass01_spell_level" value="3">
<input type="radio" class="hidden spellclass01-spells-tab4" name="attr_spellclass01_spell_level" value="4">
<input type="radio" class="hidden spellclass01-spells-tab5" name="attr_spellclass01_spell_level" value="5">
<input type="radio" class="hidden spellclass01-spells-tab6" name="attr_spellclass01_spell_level" value="6">
<input type="radio" class="hidden spellclass01-spells-tab7" name="attr_spellclass01_spell_level" value="7">
<input type="radio" class="hidden spellclass01-spells-tab8" name="attr_spellclass01_spell_level" value="8">
<input type="radio" class="hidden spellclass01-spells-tab9" name="attr_spellclass01_spell_level" value="9">
<input type="radio" class="hidden spellclass01-spells-tab99" name="attr_spellclass01_spell_level" value="99" checked>
<div class="filtered-box">
<span>
<input type="text" class="inputbox" style="width: 300px;" name="attr_spellclass01_spell_name" title="repeating_spellclass01spell_$x_spellclass01_spell_name" placeholder="Spell name">
</span>
<span>
<select name="attr_spellclass01_spell_level" style="width:44px;" title="repeating_spellclass01spell_$x_spellclass01_spell_level">
<option value="99">-</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</span>
</div>
</fieldset>
</div>
CSS:
.sheet-hidden
{
display: none;
}
.sheet-filtered-box
{
display: none;
}
/* ===== HIDES EXTRA REPEATING SECTION BUTTONS WHEN USING FILTER BOX ====== */
.repcontainer .repitem
{
overflow: hidden;
}
input.sheet-spellclass01-spells-tab99:checked~.sheet-filtered-box,
.sheet-spellclass01-spells-tab99:checked~.sheet-spell-list>fieldset.repeating_spellclass01spell+.repcontainer>.repitem .sheet-filtered-box,
.sheet-spellclass01-spells-tab0:checked~.sheet-spell-list>fieldset.repeating_spellclass01spell+.repcontainer>.repitem input.sheet-spellclass01-spells-tab0:checked~.sheet-filtered-box,
.sheet-spellclass01-spells-tab1:checked~.sheet-spell-list>fieldset.repeating_spellclass01spell+.repcontainer>.repitem input.sheet-spellclass01-spells-tab1:checked~.sheet-filtered-box,
.sheet-spellclass01-spells-tab2:checked~.sheet-spell-list>fieldset.repeating_spellclass01spell+.repcontainer>.repitem input.sheet-spellclass01-spells-tab2:checked~.sheet-filtered-box,
.sheet-spellclass01-spells-tab3:checked~.sheet-spell-list>fieldset.repeating_spellclass01spell+.repcontainer>.repitem input.sheet-spellclass01-spells-tab3:checked~.sheet-filtered-box,
.sheet-spellclass01-spells-tab4:checked~.sheet-spell-list>fieldset.repeating_spellclass01spell+.repcontainer>.repitem input.sheet-spellclass01-spells-tab4:checked~.sheet-filtered-box,
.sheet-spellclass01-spells-tab5:checked~.sheet-spell-list>fieldset.repeating_spellclass01spell+.repcontainer>.repitem input.sheet-spellclass01-spells-tab5:checked~.sheet-filtered-box,
.sheet-spellclass01-spells-tab6:checked~.sheet-spell-list>fieldset.repeating_spellclass01spell+.repcontainer>.repitem input.sheet-spellclass01-spells-tab6:checked~.sheet-filtered-box,
.sheet-spellclass01-spells-tab7:checked~.sheet-spell-list>fieldset.repeating_spellclass01spell+.repcontainer>.repitem input.sheet-spellclass01-spells-tab7:checked~.sheet-filtered-box,
.sheet-spellclass01-spells-tab8:checked~.sheet-spell-list>fieldset.repeating_spellclass01spell+.repcontainer>.repitem input.sheet-spellclass01-spells-tab8:checked~.sheet-filtered-box,
.sheet-spellclass01-spells-tab9:checked~.sheet-spell-list>fieldset.repeating_spellclass01spell+.repcontainer>.repitem input.sheet-spellclass01-spells-tab9:checked~.sheet-filtered-box
{
display: block;
}
thanks for posting that - its nice to see a version of the older method stripped down just to what we need to know how to use it.
I really appreciate another option Rabulias. I really like that you don't need to use a sheetworker for your method.
I hope other authors will grab these and run with them. I can't believe I've been creating extra repeating sections for spells by level when I can get away with a single fieldset and hide/show as needed. Hinge moment for me.
Rabulias, I notice your fieldshet is called:
<fieldset class="repeating_spellclass01spell">
Are you using a different repeating section per class?
This made me think of using one section for all classes and levels, as well as spell-like powers. So you could have one section to track everything that has mostly the same attributes that a spell does. You could build more complex tabs that let you pick more than one criteria to show at once, too. This would just take modifying the sheet worker, and the initial tabs that set the filter.
I think it would be trickier to do with Chris's method, but much could be done with a bit of extra set up: you'd need a much bigger set of hidden radio buttons and some way of constructing a single attribute that combined class and spell level to use as the filter.
Here's what the sheet worker might look like
on('change:spell_tabs change:class_tabs', () => {getSectionIDs('repeating_spells', idarray => {const fieldnames = [];idarray.forEach(id => {fieldnames.push(`repeating_spells_${id}_spell_level`);fieldnames.push(`repeating_spells_${id}_spell_class`);});getAttrs(['spell_tabs', 'spell_class', ...fieldnames], v => {const output = {};const level = +v.spell_tabs||0;const spellclass = +class_tabs ||0;idarray.forEach(id => {const thislevel = +v[`repeating_spells_${id}_spell_level`] || 0;const thisclass = +v[`repeating_spells_${id}_spell_class`] || 0;output[`repeating_spells_${id}_spell_show`] = (level === -1 || level === thislevel) && (spellclass === -1 || spellclass === thisclass) ? 1 : 0;});setAttrs(output);});});});
In this case, the tabs for selected class have numerical values (the text they display would be the class name, but each has a numerical value behind the scenes). But that's not necessary, text could be used just as easily.
Your initial tabs now have 4 options:
And it will show all spells that match whichever class and level are selected.
You could even expand to different filters: show all fire spells, show all spells that require material components, all spells with "heal" in the name, etc. It's a mini-compendium on a sheet!
One issue is sorting: spells would be shown in order of creation. Which could be very disorganised when you show all classes and levels.
This can be sorted manually, but it would probably be worth having a a sheet worker to sort the section. But as stated earlier, that technically requires to to copy, delete, and paste the copied rows in the desired order. It's certainly do-able, but it's irritating there's no easier way to do it, and you dont want to be deleting user data unless you are certain the code is rock-solid.
GiGs said:
One issue is sorting: spells would be shown in order of creation. Which could be very disorganised when you show all classes and levels.
This can be sorted manually, but it would probably be worth having a a sheet worker to sort the section. But as stated earlier, that technically requires to to copy, delete, and paste the copied rows in the desired order. It's certainly do-able, but it's irritating there's no easier way to do it.
This is exactly what I was coming to ask about. lol
I know people will inquire once they start using the new spell tabs. ;-)
Too bad roll20 doesn't have a built-in method to sort when you use the reptiem to modify(rearrange) repeating rows.
What critieria would you use to sort by? Spell name, Spell class, spell level? some combination of them?
Honestly I think sorting is do-able (though as noted - there's always a risk when you are deleting user date - especially as laggy as roll20 is right now), and I'll work up code for it, but I dont think it's really needed. Spells are going to to be created one by one, and it would be most sensible for players to manually sort them into the position they want them as they are created. That lets them sort them in the order they want them.
GiGs said:
What critieria would you use to sort by? Spell name, Spell class, spell level? some combination of them?
Yes. lol
Level 0-9 would be nice. People love choices. They have gotten used to using dedicated apps that let them easily sort data and they expect it on roll20 sheets as well. Even if it isn't realistic. Most people don't understand the limitations that sheet authors must work within.
But honestly, I don't think it's that big of a deal for the AD&D1e sheet.
Now if this was Pathfinder...
Here's an example of what a sort function might look like that just sorted by name, to illustrate the complexity. (untested)
This assumes you have a button to click to start the sort routine. You could set different filters to sort by, but I went with the simplest in this example. Using reduce instead of forEach could make this shorter but would be harder to understand the steps involved.
The fields array at the start should include the name of every attribute within the row of the section.
const fields = ['name', 'class', 'level']; on('change:spell_sort', (event) => { if(!fields.includes(event.newValue)) { return; } getSectionIDs('repeating_spells', idarray => { const fieldnames = []; // get the name of EVERY attribute on every row. idarray.forEach(id => fields.forEach(field => fieldnames.push(`repeating_spells_${id}_${field}`))); getAttrs([...fieldnames, 'spell_sort'], v => { const spell_sort = v.spell_sort; let allrows = []; // need to go throw every row and get the values, and store them with out the id idarray.forEach(id => { // get all the value of every attribute in a row, and story it in object with the field name const thisrow = {}; fields.forEach(field => thisrow[field] = v[`repeating_spells_${id}_${field}`]); allrows = [...allrows, thisrow] }); /* at this point we have all the attributes from the repeating section in an array of objects that looks something like [ {name: 'a spell', class: 'cleric', level: 3}, {name: 'another spell', class: 'cleric', level: 3}, {name: 'yet another spell', class: 'wizard', level: 1}, ] now we need to sort the array. The Underscore function _.sortBy is easiest here */ allrows = _.sortBy(allrows,spell_sort); // now we create a new output function const output = {}; allrows.forEach(row => { //need to create a new id for each row, and create new complete repeating section attribute names for each field const rowid = generateRowID(); fields.forEach(field => output[`repeating_spells_${rowid}_${field}`] = row[field]); }); // now we have a sorted copy of the rows we can add to the repeating section. But we also need to delete the old set.idarray.forEach(id => removeRepeatingRow(`repeating_spells_${id}`)); // finally update the sheet. If a connection error happens between the previous row and next row, the entire repeating section is lost forever. setAttrs(output, {silent:true}}); }); }); });
The data loss possibility does suggest that it would be a good idea to implement an undo function. That adds even more complexity. That said, data loss due to connection error on roll20 almost never happens (I've never experienced it), so I may be overstating the dangers. Its probably robust enough.
And I'm assuming that roll20 will create new rows in the order they are in the output object. That should be tested, lol. If it doesn't, then there;s no way to sort via sheet worker at all.
You just whipped that up huh? ;-)
Data loss would definitely be a concern. We had an issue on migrating spells on the pathfinder sheet. Some users lost some of their customized macro-text. It was always a concern moving forward. Chris B. added backups and buttons with warnings "HERE BE DRAGONS" that the user had to push after migrating data from an old schema to a newer one.
I appreciate the time/effort you have put in on this already. No need to continue. I think most people that use the sheet will be thrilled to just be able to filter their spells by level.
Vince said:
You just whipped that up huh? ;-)
Data loss would definitely be a concern. We had an issue on migrating spells on the pathfinder sheet. Some users lost some of their customized macro-text. It was always a concern moving forward. Chris B. added backups and buttons with warnings "HERE BE DRAGONS" that the user had to push after migrating data from an old schema to a newer one.
I appreciate the time/effort you have put in on this already. No need to continue. I think most people that use the sheet will be thrilled to just be able to filter their spells by level.
I wanted to see what the code would look like, so I didnt mind working on it as a proof of concept.
One way to mitigate the data loss danger would be recommend players make backups of their character sheets, but you cant do that from a sheet worker. You could print a warning after pressing the sort button, then show the real sort button, lol. But for something people expect to be easy, having a "be careful this may destroy your data" warning probably isn't the best feature.
I found an old post wherein Jakob mentioned it was almost possible to sort non-destructively, by manipulating the reporder attributes- but only almost possible. So still not possible. That's a shame.
So its probably best to stick with manual sorting.
There's probably a suggestion for it somewhere...
Character Sheet - move repeating fields up/down (5 years ago)
