🧮 Update Joget Form Grid Cells with JavaScript

#joget #javascript #lowcode #forms

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.

DEV Community