Repeating Section Row Id

There are situations where you need to know the id of a given repeating section row (repitem). Macros can use a different syntax, like @{repeating_section_#0_attribute}, where #0, #1, and so on are used in place of the full row ID (which is good, since a row ID might look like -NYwOfunlMzuNizpJE5).

But there are times you might want to display or use the full row ID. You can use getSectionIDs to get the rowID, but this will return the row ID in lower case. So instead of -NYwOfunlMzuNizpJE53, you will get -nywofunlmzunizpje53.

In the vast majority of cases, it really doesn’t matter – the lower case version will work fine. But there’s at least one where it does. Figuring out the solution to that reveals something interesting.

When Case Doesn’t Matter

If the case doesn’t matter, you can use getSectionIDs to return the row id. Let’s say, for example, you have a repeating secvtion, example, where one of the inputs is named row, and shows the row id. You can do this:

   on('change:repeating_example', () => {
        getSectionIDs('repeating_example', ids => {
            const output = {};
            ids.forEach(id => {
                output[section_name('example', id, 'row')] = id;
            });
            setAttrs(output, {silent:true});
        });
    });Code language: JavaScript (javascript)

Here whenever any attribute in the section is changed, the row ids are recalculated. They might have already been calculated, so this can add a miniscule delay. But it’s really not worth worrying about. This works well enough.

When Case Does Matter

If you need the row id to be properly cased, it’s much more complicated. The only time this matters that I can think of is when using jQuery, but you really shouldn’t be using that yet. The Guide isn’t there yet! Scott describes the problem and a solution on the forums, and here we will explore that solution and discover something very intriguing.

First, you need to hide the existing Add button, with the intention of replacing it with your own. That button will create its own row id, and enter that in a cell. The javascript might look like this:

   on('clicked:example_add', (eventInfo) => {
        const output = {};
        const id = generateRowID();
        output[section_name('example', id, 'row')] = id;
        setAttrs(output, {silent:true});
    });Code language: JavaScript (javascript)

One important thing to note here: the action button is not inside the repeating section, so can include an underscore in its name. Here I include the section name, and the word add, to show it is replacing that button.

The next problem: how do we get that button to replace the existing Add button. The add button is inside a repcontrol div that is not created by the user. It is created by Roll20, from a the template you create in your fieldset.

Well, it turns out you can add the repcontrol div to your html, and roll20 will create the items listed there. You can do this:

<div class="a-repeating-section">
    <fieldset class="repeating_example">
        <span>Row ID</span>
        <input type="text" name="attr_row" value="" >
    </fieldset>
    <div class="repcontrol">
        <button type="action" class="btn mine" name="act_example_add">Row</button>
    </div>
</div>Code language: HTML, XML (xml)

You can duplicate the repcontrol div, and it will appear in the sheet. You can create your own add button and use display:none on the existing one. And using the generateRowId function, you get properly cased row IDs.

But the really interesting thig here: you can add other elements to the repcontrol div. I know inputs work, go wild and try other things. Just remember anything here is not actually inside the repeating section.