Obtaining All Values Selected in the Extended Widgets by JS

Problem

During data entry report creation, when the data entry widget is extendable for display, you need to obtain all values of the extended data entry widgets. For example, all values of the extended radio button group widgets are obtained, as shown in the following figure.

Implementation Method

With the widget APIs, you can obtain an array of the widget objects according to the widget name, and iterate through and obtain all values selected in the widgets. For details about the API description, see Exclusive API for Data Entry Preview and General API for Widgets.

Extendable Widget Preparation

Radio Button Group Widget

1. Create a template, add a radio button group widget to cell A1, set Widget Name to p1, as shown in the following figure.

Note:

The widget name p1 will be used together with the JS that will be added later. If you modify the widget name, modify the corresponding code in the JS accordingly.

2. Select cell A1, and set Expansion Direction to Vertical under Cell Attribute > Expansion > Basic, as shown in the following figure.

3. Select the radio button group widget in cell A1, and add a data dictionary for the widget, as shown in the following figure.

Inserting Row Button

Add a button widget to cell B1, set Button Type to Insert Row, and set Specified Cell to A1, as shown in the following figure.

Obtaining the Values of the Extendable Widget

1. Add a button widget to cell A3, set Button Type to Common, and set Button Name to Obtain All Values Selected in the Extended Widgets, as shown in the following figure.

2. Add a Click event for the button widget in cell A3, as shown in the following figure.

The JavaScript code is as follows.

var temp = "";
var arr = _g().getWidgetsByName("p1");
//Obtain the array of the widget objects of the extendable radio button group p1.
if (arr[0] != undefined) {
	for (var i = 0; i < arr.length; i++) {
		temp = temp + arr[i].getValue() + ' ';		//If the array returned by the widgets contains more than one character, iterate through the characters and concatenate them.
	}
} else {
	temp = arr.getValue();	//If the array returned by the widgets contains only one character, directly obtain the widget value.
}
alert(temp);

Effect Preview

PC

Save the template and click Data Entry Preview. The following figure shows the preview effect on the PC.

Mobile Terminal

The following figure shows the preview effect on the DataAnalyst app and the HTML5 terminal.

For details, you can download the template Obtaining All Values Selected in the Extended Widgets by JS.cpt.