Arrays

Arrays in contrast to collections are single value where a specific element (i.e. 0) has to be displayed/edited. Collection handling works with arbitrary sizes while with arrays the number of elements is known.

Array filling

If you want to fill an array of values (i.e. a date range { closeDate: [ "from", "to"] } ) you can use a pattern like this:

<input name="data.closeDate" data-array="0" class="array date dateFilter"/>-<input name="data.closeDate" data-array="1" class="array date dateFilter"/>

• data-array: defines the array index (starting with 0)
• class="array": marks the field as part of an array

date and dateFilter are optional formatting classes.

Array element display

Displaying array values is similar to the form:

<span class="field array" data-array="0">actions.param</span>

• data-array: defines the array index (starting with 0)
• class="array": marks the field as part of an array

Note: if the array index does not exist, the span will stay empty

Array selection with checkboxes

This is a special functionality with simple arrays (i.e. strings) and checkboxes.

You have have a selection of predefined values that are toggle-able via checkboxes:

<input type="checkbox" class="array" name="data.colors" value="red"/> Red
<input type="checkbox" class="array" name="data.colors" value="green"/> Green
<input type="checkbox" class="array" name="data.colors" value="blue"/> Blue

This will add/remove the values from the array, but not touch OTHER values (so if you have i.e. "yellow" in data.colors, it will not be touched).

This also works with objects attached to the inputs (directly or using '$(this).data().pojo'):

<input type="checkbox" class="array object" name="data.colors" data-pojo='{"id":1,"value":"RED"}'/> Red
<input type="checkbox" class="array object" name="data.colors" data-pojo='{"id":2,"value":"GREEN"}'/> Green
<input type="checkbox" class="array object" name="data.colors" data-pojo='{"id":3,"value":"BLUE"}'/> Blue