Using an array in a sheet template
In the system I am creating, the progression of a skill category is handled with a fixed size array of values. I can create this array in template.json and render it on the sheet as input elements. However when I update the array based on user input I need to write an event handler to do it, I can't just change the value in the input box and have my Document update. Is there an easier way than this? This is the current implementation:
Template
<div style="display:flex; flex-direction: row;">
{{#each system.bonus_progression}}
<input class="skillcat_bonus_progression_input" type="text" value="{{this}}" data-dtype="Number"/>
{{/each}}
</div>
Javascript
activateListeners(html) {
super.activateListeners(html);
html.find('.skillcat_bonus_progression_input').change(ev => {
let bonusProgression = [];
let bonusProgressionInput = html.find('.skillcat_bonus_progression_input');
for (let i = 0; i < bonusProgressionInput.length; i++) {
bonusProgression.push(bonusProgressionInput[i].value);
}
this.object.update({system: {bonus_progression: bonusProgression}});
});
}
5 Replies
Give all the inputs this
name property:
Multiple inputs with the same name property will be combined into an array by the default form data handling of sheets
I will say though, that since it is fixed size, I might recommend just using an object of keys (like "first", "second", "third", "fourth", ... or just numbers) instead of an arraySorry, can you explain the term object of keys? Are you talking about changing the array in the template to an object with named keys?
I am, yes 🙂
Thanks, I caught myself about to say Dictionary. But I wasn't sure if that was relevant outside Python. 😂
Python dictionaries and JS objects are fairly equivalent. 😉