1. Overview
This article shows how to add rows to a Joget Enterprise Form Grid and update a specific cell value with JavaScript. The example also recalculates a row number after grid changes.
2. How It Works
- Read selected form values when the button is clicked.
- Validate required values before adding a row.
- Call the grid's generated add function.
- Store row data as JSON.
- On grid change, loop through rows and update a target cell.
- Use enterpriseformgrid("fillValue", ...) to write the updated JSON back into the grid row.
3. Where to Use in Joget
- Form Builder: custom HTML element beside an Enterprise Form Grid.
- Userview: request forms that need controlled grid row insertion.
- Workflow Builder: approval forms where grid data must stay ordered.
4. Full Code
<input type='button' value='Add Row' class="add-row-button">
<script>
$(document).ready(function () {
$('#optional_section').css("display", "none");
$('.add-row-button').click(function () {
let source_field_chosen = $('[name=source_field]').val();
let first_user_field_chosen = $('#first_user_field').val();
let second_user_field_chosen = $('#second_user_field').val();
if (
!source_field_chosen ||
!first_user_field_chosen ||
!second_user_field_chosen
) {
alert("Value cannot be Null");
return;
}
if (first_user_field_chosen == second_user_field_chosen) {
alert("Users cannot Be Same");
return;
}
let RowsCount = $('[name=target_grid] table tbody tr:not(:first)').length;
if (RowsCount < 10) {
var field = FormUtil.getField("target_grid");
var functionName = window[field.attr("id") + "_add"];
if (typeof functionName === 'function') {
var args = new Object();
args['result'] = JSON.stringify({
"selected_value": source_field_chosen,
"first_user_label": $('#first_user_field_chosen a span').text(),
"second_user_label": $('#second_user_field_chosen a span').text(),
"unique_row_key": source_field_chosen + first_user_field_chosen,
"row_number": RowsCount + 1
});
functionName(args);
let isPushed = $('[name=target_grid] table tbody tr:not(:first)').length;
if (RowsCount == isPushed) {
alert("Duplicate Value Not Allowed");
}
}
} else {
alert("Only 10 Rows Are Allowed");
}
})
$('[name=target_grid]').change(function () {
$('[name=target_grid] table tbody tr').not(':first').each(function (index, row) {
updateCell("target_grid", "row_number", index + 1, row);
})
})
function updateCell(fieldId, cellId, value, row) {
var data = JSON.parse($(row).find("textarea").val() || "{}");
data[cellId] = value;
$(FormUtil.getField(fieldId)).enterpriseformgrid("fillValue", FormUtil.getField(fieldId), row, JSON.stringify(data));
}
})
</script>
5. Example Use Cases
- Adding selected users into a review grid.
- Maintaining row numbers after grid changes.
- Preventing duplicate grid rows.
- Limiting the number of rows users can add.
6. Customization Tips
- Replace arget_grid with your Enterprise Form Grid ID.
- Replace field IDs with your own select-box or user-picker fields.
- Adjust the row limit based on your process rule.
- Use clear validation messages for missing or duplicate values.
7. Key Benefits
- Gives users a controlled add-row button.
- Keeps grid row data consistent.
- Updates a specific cell without manual user input.
- Reduces mistakes in repeated grid rows.
8. Security Note
Client-side validation is helpful, but important uniqueness and authorization rules should also be checked on the server side before final submission.
9. Final Thoughts
This pattern is useful when a Joget grid needs guided row creation. Keep the field IDs generic in public examples and test row add, duplicate, and delete flows together.
