A common use case for data entry apps is the ability to add multiple records to an array. Editable table is a common way to achieve this. We have documented the steps to create such an interface in our VB cookbook batch editable table sample. The table provides various advantages in terms of the way it shows data in a row, allow easy keyboard navigation between the fields, and manage pagination. However sometimes you want to add multiple rows in an alternative layout – for that, using the oj-bind-for-each component can be useful. One more feature this type of layout gives you is the ability to have multiple input fields available at all times (in a table you edit one row at a time).
In the sample video below we are showing how to manage your data in an array variable and bind that array to an oj-bind-for-each to create repeatable layout for each row. You can then add buttons that will add empty row to the array. We also show how to add a save button to process the array values. At the end of the video we also show you how you can add events to the fields in the array to capture value changes in them, and how to pass other values from the same row to these events.
The HTML code for the bind-for-each is:
<oj-bind-for-each data="[[ $variables.Hobbies ]]">
<template>
<div class="oj-flex">
<oj-input-text label-hint="Name" class="oj-flex-item oj-sm-12 oj-md-4"
value="{{ $variables.Hobbies[$current.index].name }}" on-value-changed="[[$listeners.inputTextValue]]"></oj-input-text>
<div class="oj-flex-item oj-sm-12 oj-md-1"></div>
<oj-input-text label-hint="Years" class="oj-flex-item oj-sm-12 oj-md-5"
value="{{ $variables.Hobbies[$current.index].years }}"></oj-input-text>
</div>
</template>
</oj-bind-for-each>