Repeaters in LRE 6 ⚠️ DEPRECATED ⚠️

See see doc for LRE7

Repeaters in Let's Role make many builders suffering on events, entries, managing data, etc. LRE tends to facilitate to handle them.

LRE Repeater and Entry

There are two component overlay from LRE about Repeater and Entry. You can get en Entry like this :

let repeater = sheet.get('myRepeater');
let entryId = 'fdlzldi4';
repeater.find(entryId);

Every component inside an repeater entry has a reference to its repeater and its entry objects.

let component = sheet.find('myRepeater.fdlzldi4.labelDescription');
log(component.entry().realId());    // > myRepeater.fdlzldi4

Looping in repeater

It is possible to use a new method called each() on LRE repeaters.

init = lre(function (sheet) {
  let total = 0;
  sheet.get('myRepeater').each(function (entry, entryData, entryId) {
    total += entryData.cost;
  });
  log(total);
});

It is possible to loop in repeater and directly get a component in each entry

init = lre(function (sheet) {
  // The following code will put in total the sum of every 'cost' component in the repeater
  let total = 0;
  sheet.get('myRepeater').each('cost', function (component, entryData, entryId) {
    total += component.value();
  });
  log(total);
});

Sort repeaters

You can define a component that can be clicked to sort a repeater on a particular column.

init = lre(function (sheet) {
  // The following code will make the component with id 'columnTitle' clickable and make the repeater sorted (asc / desc) on column 'columnId'
  sheet.get('myRepeater').setSorter('columnTitle', 'columnId');
};

Events

There are seven new events for repeaters, here is a code sample

init = lre(function (sheet) {
    let rep = sheet.get('rep');
    rep.on('initread', function (repeater, entry, entryId, data) {
        // This event is triggered immediately on every repeater lines
        // and on every newly added lines
    });
    rep.on('initedit', function (repeater, entry, entryId, data) {
        // This event is triggered when clicking on "Add" or "Edit"
    });
    rep.on('init', function (repeater, entry, entryId, data) {
        // This event is triggered when clicking on "Add"
    });
    rep.on('delete', function (repeater, entryId, data) {
        // This event is triggered when deleting an entry
    });
    rep.on('edit', function (repeater, entry, entryId, data) {
        // This event is triggered when clicking on "Edit" icon
    });
    rep.on('change', function (repeater, entry, entryId, newData, oldData) {
        // This event is triggered when something changed in the entry data
        // It's like the 'save' event but is triggered only for entries with changed data
    });
    rep.on('save', function (repeater, entry, entryId, newData, oldData) {
        // This event is triggered when clicking on "Done…" button for an entry
        // It's like the 'change' event but is triggered even if there is no change in the entry data
    });

Repeater initialisation

Two events have been added in order to ease the use of repeaters. You don't have to use complicated functions and code.

The initread event allows you to initialize your repeater lines on sheet init. This allows you to have only one code to put some interactions on the repeater. Following code shows how to have an icon in every weapons repeater lines that can be clicked in order to use the weapon. This works for all current and future lines in the repeater.

  const repeater = sheet.get('weapons');
  repeater.on('initread', function (repeater, entry, entryId, entryData) {
    entry.find('useWeapon').on('click', useWeaponCallback);
  });

The initedit event allow you to initialize the edit view of the repeater. The following code shows how to fill a choice automatically when you show the edit view (of course, this can be in the view, but it is only here for example purpose)

  const repeater = sheet.get('weapons');
  repeater.on('initedit', function (repeater, entry, entryId, entryData) {
    entry.find('typeChoice').populate('weaponTypeTable', 'typeName');
  });

Updating read view from changes

The change and save events are often used to display in the Read view the new data from the entry data. You can return an object from the event handlers in order to set data to the read view. Returned values for all these handlers are merges into one big objects (first change events, then save events)

Example :

rep.on('change', function (repeater, entry, entryId, newData, oldData) {
    return {
       lblTotalDamage: newData.value1 + newData.value2
    };
});

This code is similar to :

rep.on('change', function (repeater, entry, entryId, newData, oldData) {
    entry.find('lblTotalDamage').value(newData.value1 + newData.value2);
});

The second code seems shorter indeed but the first one simplify the whole code.

Example :

rep.on('save', function (repeater, entry, entryId, newData, oldData) {
    return {
       lblTotalDamage: newData.value1 + newData.value2 + newData.value4
    };
});
rep.on('change', function (repeater, entry, entryId, newData, oldData) {
    return {
       lblTotalDamage: newData.value1 + newData.value2,
       lblFinalThing: newData.value3
    };
});
rep.on('change', function (repeater, entry, entryId, newData, oldData) {
    return {
       lblFinalThing: newData.value5
    };
});

This code is similar to :

rep.on('change', function (repeater, entry, entryId, newData, oldData) {
    entry.find('lblTotalDamage').value(newData.value1 + newData.value2 + newData.value4);
    entry.find('lblFinalThing').value(newData.value5);
});