An Edit Grid collects a list of entries, like a Data Grid, but shows each saved entry as a one-line summary. Users open one entry at a time to add or change it, then save the row. Use it when each entry has many fields, such as a list of previous employers with address, dates and duties.
Add an edit grid
-
Drag an Edit Grid onto the form and give it a label.
-
Drag the components for one entry into it.
-
Optionally customize the summary and buttons on the Templates tab.
-
Save and test. Users select Add Another, fill in the entry, and select Save on the row.
Templates tab
|
Setting |
What it does |
|---|---|
|
Header Template |
HTML shown above the rows, such as column headings |
|
Row Template |
HTML for each saved row's summary. Include elements with the classes |
|
Footer Template |
HTML shown below the rows |
|
Add Another Text, Save Row Text, Remove Row Text |
Button text |
|
Row CSS Class |
A class added to each row for styling |
In templates, {{ }} inserts a value and {% %} runs logic such as an if. In the row template, row holds the entry's values; in the header and footer, value holds all rows.
Example
Header:
<div class="row">
<div class="col-sm-5"><b>Employer</b></div>
<div class="col-sm-5"><b>Start</b></div>
</div>
Row:
<div class="row">
<div class="col-sm-5">{{ row.employer }}</div>
<div class="col-sm-5">{{ row.startYear }}</div>
<div class="col-sm-2">
<button class="btn btn-default btn-sm editRow">Edit</button>
<button class="btn btn-danger btn-sm removeRow">Delete</button>
</div>
</div>
Footer, showing the number of entries:
<p>{{ value.length }} employer(s) listed{% if (value.length > 1) { %} (multiple){% } %}</p>
How data is saved
The value is a list with one entry per row, like a Data Grid, for example data.employers[0].employer. Row-numbering scripts that work in a Data Grid don't work reliably in an Edit Grid; see Working With Data Grids.
Validation
Fields inside a row, such as required fields, are checked when the user saves the row.
Row View Validation on the Validation tab adds a script that checks each saved row. Set valid to true or to a message, using row for the row's values:
valid = (row.employer && row.employer.length > 2) ? true : 'Employer name is too short.';
A row that fails stops the form from being submitted, and the user sees only Please correct all errors before submitting. Your message isn't shown, with either the default or a custom row template. Prefer validation on the fields inside the row, which shows its message when the row is saved, and use Row View Validation only as a final check.