Copy rows in Form Grid and List Grid using a script

Introduction

Adding a new row into a Form Grid or a List 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 or list grid named entries.

1. Create a form that will contain fields as the columns you will see in your form grid and list grid. In this case, the Form will be labelled 'Form Grid Form' and the text fields will be Name and Description.
   
   Create a CRUD menu for this form and add a few records to the form at runtime.
2. In another form (in this case, Main Form), drag and drop a Form Grid and a List Grid.
   The columns will be the fields present in the grid form.
   
3. Configure the form grid such that it contains text fields from the grid form as columns.
   
4. In order to add a new row to the form grid, add the custom JavaScript function in your Custom HTML element.
   

   Form Grid Javascript here to add copy function.
   
   <script>
   $(function(){
       var grid = FormUtil.getField("fg");
       
       $(grid).on("change", function(){
           //add copy button
           $(grid).find("tr.grid-row").each(function(i, row){
               if($(row).find("td.grid-action-cell .copy").length === 0) {
                   $(row).find("td.grid-action-cell").append("<a class=\"copy\">COPY</a>");
               }
           });
       });
       $(grid).trigger("change");  //trigger change to add buttons to the existing rows
       
       $(grid).on("click", ".copy", function(){
           var copyRow = $(this).closest("tr");
           var newRow = copyRow.clone(true);
           alert('copying form grid row');
   
           var newRowJson = $(newRow).find("textarea").val();
           //remove id
           var obj = JSON.parse(newRowJson);
           if (obj.id !== undefined) {
               delete obj.id;
               newRowJson = JSON.stringify(obj);
           }
           $(newRow).find("textarea").val(newRowJson);
           
           //add after copyRow
           $(copyRow).after(newRow);
           
           $(grid).enterpriseformgrid("refreshIndex");
       })
   })
   </script>

5. Configure the list grid so it contains the text fields as columns from the Grid form. 
   
6. Similarly, in order to add a new row to the list grid, add the custom JavaScript function in your Custom HTML element.
   

   List Grid Javascript here to add copy function.
   
   <script>
   $(function(){
       var lgrid = FormUtil.getField("lg");
       
       $(lgrid).on("change", function(){
           //add copy button
           $(lgrid).find("tr.grid-row").each(function(i, row){
               if($(row).find("td.grid-action-cell .copy").length === 0) {
                   $(row).find("td.grid-action-cell").append("<a class=\"copy\">COPY</a>");
               }
           });
       });
       $(lgrid).trigger("change");  //trigger change to add buttons to the existing rows
       
       $(lgrid).on("click", ".copy", function(){
           var copyRow = $(this).closest("tr");
           var newRow = copyRow.clone(true);
           alert('copying list grid row');
           var newRowJson = $(newRow).find("textarea").val();
           //remove id
           var obj = JSON.parse(newRowJson);
           if (obj.id !== undefined) {
               delete obj.id;
               newRowJson = JSON.stringify(obj);
           }
           $(newRow).find("textarea").val(newRowJson);
           
           //add after copyRow
           $(copyRow).after(newRow);
           
           $(lgrid).enterpriseformgrid("refreshIndex");
       })
   })
   </script>

7. Create a CRUD element for the Main form and launch the application to view in runtime.
8.  Go to your main form and create an entry.
   Add a row in the form grid. Click the COPY link in the last column, and it will create another row in the same grid with the copied values.
9. Add a row in the list grid. Click the COPY link in the last column, and it will create another row in the same grid with the copied values.

Expected outcome

1. Creating a new record in the form grid will open the form preview. Enter the values and click Submit.
   
   
   
   
   Upon clicking COPY, a new row gets added with the same values as the copied row. You may edit (the pencil icon) a selected row or delete a row in real time.
   
2. For the List Grid, the UI is a little different. When creating a new record in the list grid, the data list preview appears, containing all the list data present like a checklist. You may select any record from the data list and insert it into the list grid.
   
   
   
   
   Upon clicking COPY, a new row gets added into the List Grid with the same values as the copied row. (In the list grid, you can not edit the records. To do so, you need to change the values from the 'Form Grid Form' record entries.)
   Select any row to be able to delete the row from the grid.
   
   

Video Tutorial

Download sample app