How to add a row via script in grid. (Community edition)

Confluence User - 11 Sep, 2020

Hi,



What I would like to do is.

Create a Custom HTML with 5 fields with an integration with a REST API to fill these fields and once is complete, click in a button beside the custom form to add these values to the grid .


I already saw the article Add a new Row in Form Grid using script , however it's very complicated to understand how procedure.

When I run the command var functionName = window[field.attr("id") + "_add"]; in the browser console it does not return anything .


I'm already for a week on this, please give me a hope (wink)

forms;grid;api;customcode

5


11 Sep, 2020
confluenceUser
confluenceUser

Hi,

I have tried below script to add a row in Form Grid.


You can use jQuery to add a new row using json data.

Sample jQuery used is as follows:

Javascript here to add new row using json data.
<script>
$(function(){
	//FGid is the formgrid id
    var grid = FormUtil.getField("FGid");

    $(grid).on("change", function(){
        //add button
        $(grid).find("tr.grid-row").each(function(i, row){
            if($(row).find("td.grid-action-cell .add").length === 0) {
                $(row).find("td.grid-action-cell").append("<a class=\"add\">Add</a>");
            }
        });
    });
    $(grid).trigger("change");  //trigger change to add buttons to the existing rows

    $(grid).on("click", ".add", function(){

        var newRow = $(this).closest("tr");
        //json data below is the field id and value when inserting a new row
        var newRowJson = '{"field1":"testing1","field2":"testing2","field3":"testing3"}';

        $(grid).enterpriseformgrid("addRow",{result:newRowJson});
    })
})
</script>
11 Sep, 2020
confluenceUser
confluenceUser

Hi

var functionName = window[field.attr("id") + "_add"];

The above row is getting the function name so you can use it as a function and pass an object to it (ex: functionName(data))

var args = new Object();
    args['result'] = '{"amount":"1","category":"Medical","claim":"","purpose":"a","date":"11/18/2015","formattedAmount":"$ 1.00"}';

put your args in this format and pass it to the function
    functionName(args);

//all code

// the field id is "entries" grid Name
var field = FormUtil.getField("entries");
var functionName = window[field.attr("id") + "_add"];
if(typeof functionName === 'function') {
    var args = new Object();
    args['result'] = '{"amount":"1","category":"Medical","claim":"","purpose":"a","date":"11/18/2015","formattedAmount":"$ 1.00"}';
    functionName(args);
}

see this : Add a new Row in Form Grid using script

11 Sep, 2020
confluenceUser
confluenceUser

Hi Lee,

This works on the free edition ?


I cannot use the advanced grid.



11 Sep, 2020
confluenceUser
confluenceUser

Hi Issa,

I really tried to do as you said, but it does not work.

If you could send my an app example, I'll really really appreciate.


(wink)

14 Sep, 2020
confluenceUser
confluenceUser

Hi Everyone,

I tried both options and I can't get to work.

I'm almost giving up from Joget.

Have you anyone a app example with this solution ???

Please, it had to work on the free edition (Community).

RELATED QUESTIONS

Your answer


To answer a question you'll need an account.

Print