I. Overview
1) In designing a form, you can insert a Checkbox Group widget to choose more than one data option.
2) The Checkbox Group widget displays all options in the report for users to check.
3) These options should be set using the data dictionary. In the preview mode, options they see are Display Values and the data they have submitted are the Actual Values.
4) The Checkbox Group widget is a data entry widget. After clicking Data Entry Preview and New Data Entry Preview modes, you can see the effect of the widget.
| You will Learn |
|---|
|
II. Steps
1. Insert a Checkbox Group widget
1) Click B2, click [Widget Setting] in the right-hand pane, click the drop-down box, and choose [Checkbox Group].
2. Set the widget name
1) Set the names of the widgets inserted in B2 and C2 respectively.
2) After setting the names, access the widgets through JavaScript, and modify their attributes.
3. Set the data dictionary: database table
1) Click B2. Click [...] following the [Data Dictionary] and the setting pane will pop up.
2) Settings of the data dictionary:
⦁ Type: Datasource from Database
⦁ DB: FRDemo
⦁ Select Database Table：Sales_Volume
⦁ Actual Value: Product
⦁ Display Value: Product
⦁ Click [OK] and the setting is completed.
4. Preview the widget effect
1) Right click Column B, choose [Set the column width], and input 40. Click [OK].
2) Right click Row 2, choose [Set the line height], input 20. Click [OK].
3) Select [Data Entry Preview]. The page displays all product options, which can be selected by directly checking them.
5. Set the data dictionary: custom
1) Click B2. Click [...] following the [Data Dictionary] and the setting pane will pop up.
2) Settings of the data dictionary:
⦁ Type: Custom
⦁ Click [+] to set the Checkbox Group 1:
⦁ Actual Value: 1
⦁ Display Value: Online shopping
⦁ Click [+] to set the Checkbox Group 2:
⦁ Actual Value: 2
⦁ Display Value: Bricks and mortar
⦁ Click [OK] and the setting is completed.
3) Data entry preview. The page displays custom options.
6. Set the data dictionary: formula
1) Click B2. Click [...] following the [Data Dictionary] and the setting pane will pop up.
2) Settings of the data dictionary:
Type: formula
Click the box behind [Actual Value]
Input formula in the text box: ARRAY("Watermelon", "Pumpkin")
Do not input any number in the input box behind [Display Value]
3) Data entry preview. The page displays the two strings contained in the function ARRAY() as options.
7. Insert a new dataset [ds1]
1) Create a new DB query dataset.
2) Drag the table [Sales_Volume] into the DB query.
8. Set the data dictionary: dataset
1) Click B2. Click [...] behind [Data Dictionary] and the setting pane will pop up.
2) Settings of the data dictionary:
Type: Data Query
Dataset: ds1
Actual Value: Salesperson
Display Value: Salesperson
Click [OK] and the setting is completed.
3) Data Entry Preview. The page displays all salesperson options.
9. Layout of options: Adaptive
1) The layout of options in B2 is [Adaptive] by default.
2) Adjust the width and height of B2. Options in the cell are adapted to the size of the cell.
10. Layout of options: Fixed number of columns
1) Click B2 and uncheck [Adaptive].
2) Number of columns displayed: 1.
3) Data entry preview. Options are displayed in a single column.
11. Provide Choose All
1) Click B2 and check [Provide Choose All].
2) Data entry preview. All options are followed by a [Provide Choose All] box. Click [Provide Choose All] to check all options and click it again to uncheck all.
12. Disable the widget
1) Click B2 and uncheck [Enabled].
2) Data entry preview. All options are greyed and cannot be checked.
13. Hide the widget
1) Click B2, check [Enabled] and uncheck [Visible Widget].
2) Data entry preview. All options are invisible and cannot be checked.
14. Validate the input value: Not allow null
1) Click B2, check [Visible Widget], and uncheck [Allow Null]. Enter an error tip: Select a salesperson!
2) Data entry preview. Click to check a salesperson first and then click again to uncheck it. An error tip pops up on the right-hand side of the browser window.
Note
Below is a description of return value types, which does not require you to practice in person. These steps are designed to display the data loading effects of different return value types
14. Set the return value type: Array
1) Input “Return Type” in A1, insert a [Text Field] in B1, and input “Array” in B1.
2) Select [Array] by default as the return value type in B2.
3) Set [Data Entry Attributes] and enter the data into [Sales_Volume]. The text in B1 is passed into the field [Region] and the options checked in B2 are passed into the field [Salesperson].
4) Data entry preview. After multiple options are checked, click [Submit] at the top-left corner.
5) Preview [ds1]. [ds1] displays the data in [Sales_Volume]. It can be found that if [Array] is selected as the return value type, then each option checked will stand alone as a piece of data in data loading.
15. Set the Return Value Type: String
1) Modify the text in B1 to String.
2) Set the return value type in B2 as [String] and set the delimiter as comma by default.
3) Data entry preview. After multiple options are checked, click [Submit] at the top-left corner.
4) Preview [ds1]. It can be found that if [String] is selected as the return value type, then in data loading, all checked options will make up a string delimited by commas and then constitute one and the same piece of data.
