Add a new Row in Form Grid using script

Introduction

Adding a new row to a Form Grid in Joget is a simple yet powerful way to expand your application's capabilities dynamically. 

How does it work?

This tutorial will walk you through the process using a straightforward example where the goal is to insert data into a form grid named entries.

  1. Determine the Form Grid Field ID where you want to add data. For this example, use entries as the Form Grid Field ID. Understanding this ID is important because it specifies where the new data will be inserted.


  2. Construct the JSON object that correspond to the item row's form.
    var args = new Object();
    args['result'] = '{"amount":"1","category":"Medical","claim":"","purpose":"a","date":"11/18/2015","formattedAmount":"$ 1.00"}';
  3. Add the New Row to the Form Grid:
    • Retrieve the form grid field using the ID.
    • Identify and call the add method associated with the Form Grid.
      // The field ID is "entries"
      var field = FormUtil.getField("entries");
      var functionName = window[field.attr("id") + "_add"];
      if (typeof functionName === 'function') {
          functionName(args);
      }
Created by Julieth Last modified by Aadrian on Dec 13, 2024