Selecting All and Batch Operation by JS in a Checkbox Widget

Problem

When you use multiple checkbox widgets, how to implement the functions of selecting all and batch operation? The following figure shows the effect.

Implementation Method

Get the widget array by widget name, traverse, and assign values to achieve selecting all. Based on the widget status, get selected widgets in batch and perform related operations. For details about interface description, see Teams Integration Environment Preparation.

Note:

1. This solution only supports use in Data Entry Preview.

2. This solution only supports batch modification on mobile terminals.

Data Preparation

Create a general report, create a database query dataset named ds1, and enter the SQL statement SELECT * FROM Sales.

Table Design

As the design of the data entry template shown in the following figure, the left parent cell of cell A3 is B3.

Add Checkbox Widget to cells A2 and A3, add Text Widget to cells C1, D1, E1, F1, G1, C3, D3, E3, F3, and G3, and add Button Widget to cell H5.

Set the name of Checkbox Widget in A3: box. The name can be customized. But if you modify the name, the widget name box in the subsequent JS code also needs to be modified accordingly.

Implementing the Selecting All Function

1. Select cell A2 (the checkbox for selecting all) and add a State Change event, as shown in the following figure.

The JavaScript codes are as follows:

Note:

It is the first sheet by default in the code. If you need to set other sheets, modify the sheet parameter of the _g().setCellValue() interface.

var flag = this.getValue();
//Get the current value.
var boxes = _g().getWidgetsByName("box");
//Get the array in the checkbox widget on the current page.
if (typeof(boxes[0]) != "undefined") {
for (i = 0; i < boxes.length; i++) {
var cr=FR.cellStr2ColumnRow(boxes[i].options.location);
//Get the row/column ID object.
_g().setCellValue(0,cr.col,cr.row,flag);
//If more than one widget exists, traverse and assign the value.
}
} else {
var cr=FR.cellStr2ColumnRow(boxes.options.location);
//Get the row/column ID object.
_g().setCellValue(0,cr.col,cr.row,flag);
//If only one widget exists, assign values directly.
}
Show Code

 If the jar package version is 11.0.6 (2022-06-30) or later, you can use the batch assignment interface with better performance to achieve this function. For details about interface description, see API Only for Checkbox Widget.

Note:

This interface is not supported on mobile terminals.

The JavaScript codes are as follows:

var flag = this.getValue();
//Get the current value.
var boxes = _g().getWidgetsByName("box");
//Get the array in the checkbox widget on the current page.
if (typeof(boxes[0]) != "undefined") {
        var configs = [];
        for (i = 0; i < boxes.length; i++) {
                var cr=FR.cellStr2ColumnRow(boxes[i].options.location);
                //Get the row/column ID object.
                configs.push({reportIndex:0,col:cr.col,row:cr.row,value:flag});
                //If more than one widget exists, traverse and insert the row/column ID and value information into the array.
                
        }
            _g().setCellsQuick(configs);
        //Assign values in batches.
        //If the template is frozen and the row height and column width of the cell to which the value is assigned will change, you need to replace this statement with _g().setCellsValueInBatch(configs).;
} else {
        var cr=FR.cellStr2ColumnRow(boxes.options.location);
        //Get the row/column ID object.
        _g().setCellValue(0,cr.col,cr.row,flag);
        //If only one widget exists, assign values directly.
}
Show Code

2. Select cell A3 (the checkbox for single selecting), and add a State Change event as shown in the following figure.

The JavaScript codes are as follows.

Note:

The first sheet is used by default in the code. For other sheets, you need to modify the sheet parameter of the _g().setCellValue() API.

var isAllChecked = true;
// Set the tag status to selected.
var boxes = _g().getWidgetsByName("box");
//Get the array in the checkbox widget on the current page.
if (typeof(boxes[0]) != "undefined") {
	for (i = 0; i < boxes.length; i++) {
		isAllChecked = boxes[i].getValue() == true ? isAllChecked : false;
		//If more than one widget exists, traverse and get the values. Once an unselected button appears, change the tag value to false.
	}
} else {
	isAllChecked = boxes.getValue();
	//If only one widget exists, get the widget value directly and transfer it to the tag value.
}
_g().setCellValue(0, 0, 1, isAllChecked);
//Assign the tag value to cell A2.

Show Code

Implementing the Batch Row Deletion Function

Select cell H5 (containing the button widget), and add a Click event, as shown in the following figure.

The JavaScript codes are as follows.

Note:

The following JavaScript codes are not supported on mobile terminals.

var boxes = _g().getWidgetsByName("box");
//Get the array in the checkbox widget on the current page.
var cells = [];
if (typeof(boxes[0]) != "undefined") {
for (i = 0; i < boxes.length; i++) {
if (boxes[i].selected()) {
cells.push(boxes[i].options.location); //If more than one widget exists, check whether the checkbox is selected by traversal. If so, insert the ID of the cell where the selected widget is located into the array.
}
}
} else {
if (boxes.selected()) {
cells.push(boxes.options.location);
//If only one widget exists, directly check whether the checkbox is selected. If selected, insert the cell ID into the array.
}
}
_g().deleteRows(cells);
//Delete the row according to the cell ID.
//_g().verifyAndWriteReport(true);
//Execute verification and submit all sheets. If directly-submitted requests exist during row deletion, this statement can be enabled.
Show Code

Implementing the Batch Modification Function

Add Editing End events to the widgets in cells C1, D1, E1, F1, and G1, as shown in the following figure.

The JavaScript codes are as follows:

Note:

The first sheet is used by default in the code. For other sheets, you need to modify the sheet parameter of the _g().setCellValue() API.

var boxes = _g().getWidgetsByName("box");
//Get the array in the checkbox widget on the current page.
var value = this.getValue();
//Get the current widget value.
if (typeof(boxes[0]) != "undefined") {
	for (i = 0; i < boxes.length; i++) {
		if (boxes[i].getValue() == true) {
			var row = FR.cellStr2ColumnRow(boxes[i].options.location).row;
			//Get the row ID.
			var col = FR.cellStr2ColumnRow(this.options.location).col;
			//Get the column ID.
			_g().setCellValue(0, col, row, value);
			//If more than one widget exists, modify the value of the current column in the selected row by traversal.
		}
	}
} else {
	if (boxes.getValue() == true) {
		var row = FR.cellStr2ColumnRow(boxes.options.location).row;
		//Get the row ID.
		var col = FR.cellStr2ColumnRow(this.options.location).col;
		//Get the column ID.
		_g().setCellValue(0, col, row, value);
		//If only one widget exists, directly check whether the checkbox is selected. If selected, modify the value in the current column.
	}
}
Show Code

If the JAR package version is 11.0.6 (2022-06-30) or later, you can use the batch assignment API with better performance to achieve this function. For details about API description, see API Only for Checkbox Widget.

Note:

This API is not supported on mobile terminals.

The JavaScript codes are as follows:

var boxes = _g().getWidgetsByName("box");
//Get the array in the checkbox widget on the current page.
var value = this.getValue();
//Get the current widget value.
if (typeof(boxes[0]) != "undefined") {
	var configs = [];
	//Initialize the array.
	for (i = 0; i < boxes.length; i++) {
		if (boxes[i].getValue() == true) {
			var row = FR.cellStr2ColumnRow(boxes[i].options.location).row;
			//Get the row ID.
			var col = FR.cellStr2ColumnRow(this.options.location).col;
			//Get the column ID.
			configs.push({reportIndex:0,col:col,row:row,value:value});
			//If more than one widget exists, traverse and insert the row/column ID and modified value information into the array.
		}
	}
	_g().setCellsQuick(configs);//Assign values in batches.		
	//If the template is frozen and the row height and column width of the cell to which the value is assigned will change, you need to replace this statement with _g().setCellsValueInBatch(configs).;
} else {
	if (boxes.getValue() == true) {
		var row = FR.cellStr2ColumnRow(boxes.options.location).row;
		//Get the row ID.
		var col = FR.cellStr2ColumnRow(this.options.location).col;
		//Get the column ID.
		_g().setCellValue(0, col, row, value);
		//If only one widget exists, directly check whether the checkbox is selected. If selected, modify the value in the current column.
	}
}

Show Code

Effect Display

Save the template and click Data Entry Preview.

1. PC

The following figure shows the effect.

2. Mobile Terminal

The following figure shows the effect when the JAR package version is earlier than 11.0.6.

Note:

1. This solution only supports batch modification operations on mobile terminals.Batch deletion operations are not supported on mobile terminals.

2. If the page contains a large amount of data, the selecting all operation will cause the page to freeze. In this case, you can consider using data entry pagination to optimize performance.

For details, you can download the template Selecting All and Batch Operation by JS in a Checkbox Widget.cpt.

If the JAR package version is 11.0.6 (2022-06-30) or later, you can select the following  version for better performance Selecting All and Batch Operation by JS in a Checkbox Widget (For 11.0.6 and Later Versions).cpt