Get Started

To implement checkbox in spreadsheet form element. It is achievable with Handsontable javascript API to interact with the elements in the table manually.

Steps Example

Step 1 

Enable the handsontable instance to be interactable by pasting the following code into the html elements from form builder > spreadsheet configuration > UI > Custom Settings (JSON)'

{
    "afterInit" : function() {
        var hot = this;
        $(hot.rootElement).data("hot", hot);
    },
}

Figure 1: Enable handsontable instance

Step 2

Use the following Javascript code to handle a custom button with the logic to check the boxes using the Custom HTML form element. 

An inverse function is also included inside the code from line 15-22.

<div class="btn btn-primary" id="custom-check-all">Check All</div>
<div class="btn btn-primary" id="custom-invert-all">Invert All</div>


<script>
    $(function(){
        var hot = FormUtil.getField("field1").data("hot");
        $('#custom-check-all').on('click', function(){
            rowcount = hot.countRows();
            for(i = 0; i < rowcount - 1; i++){  // rowcount - 1 to ignore last row
                hot.setDataAtCell(i, 1, true);  // (row, column, value). column is 1 because checkbox is 2nd col in the table
            }
        })
        
        $('#custom-invert-all').on('click', function(){
            rowcount = hot.countRows();
            for(i = 0; i < rowcount - 1; i++){
                if(hot.getDataAtCell(i,1) == true){
                    hot.setDataAtCell(i, 1, false);
                }
                else{
                    hot.setDataAtCell(i, 1, true);
                }
            }
        })
    })
</script>

Figure 2: Insert Javascript code into Custom HTML

Step 3

Result:

Figure 3: Check all expected result

Figure 4: Invert all expected result

Sample App

APP_kb_dx8_spredsheetSelectAllCheckbox.jwa


Related Articles




  • No labels