multiple-selection-boxes

Chart style

The multiple selection box is an advanced control component that serves as a multi-select form in visual applications. It submits user-selected data to the backend for processing, or displays user selections on other components through interactive configuration.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis of the component. Unit: pixels. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: The widget is rotated around the center of the widget. Unit: degrees.

    • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Global Style

  • Selected by Default: the selected option. The default value is B.

  • Alignment Mode: Select an alignment mode. Valid values: Horizontal and Vertical.

  • Option Size: the size of the option, including the width and height of the option. Unit: pixels.

  • Spacing: specifies the distance between the selected items and the distance between the selected items and the text. Unit: pixels.

  • Select All: If the switch is turned on, the Select All Text configuration items can be customized. If the switch is turned off, the Select All Text configuration items is not displayed.

• Normal Style

  • Text Style

    • Font: the font style of the text in the multi-select box.

    • Text weight: the font weight of the text.

    • Font Size: the font size of the text.

    • Color: the color of the text in the multi-selection box.

  • Border Style

    • Border Width: the width of the outer border of the button.

    • Border Color: the color of the outer border of the button.

    • Border Fillet: the rounded corner of the outer border of the button. Valid values: 0 to 360. When the value is 0, the outer border of the button is square. When the value is 360, the outer border of the button is round.

    • Line Type: the line type of the border. You can select Solid Line, Dashed Line, Dotted Line, Double Solid Line, Carve Effect, Emboss Effect, Pin Effect, and Emboss Effect.

  • Background Color: the background color of the multimarquee button.

• Check Style: the style of the multi-check box.

  • Text Style

    • Font: the font style of the selected text.

    • Text weight: the font weight of the selected text.

    • Font Size: the font size of the selected text.

    • Color: the color of the selected text.

  • Border Style

    • Border Width: the width of the outer border of the button.

    • Border Color: the color of the outer border of the button.

    • Border Fillet: the rounded corner of the outer border of the button. Valid values: 0 to 360. When the value is 0, the outer border of the button is square. When the value is 360, the outer border of the button is round.

    • Line Type: the line type of the border. You can select Solid Line, Dashed Line, Dotted Line, Double Solid Line, Carve Effect, Emboss Effect, Pin Effect, and Emboss Effect.

  • Background Color: the background color of the multi-check box.

  • Select Hook

    • Hook Color: the color of the selected hook in the multiple selection box.

    • Hook Size: the size of the selected hook in the multi-check box. Unit: times.

Data Sources panel

value: the display content for each option in the multi-select box.

Advanced Panel

Turn on the switch to enable the global variable feature. You can change the selected options in the multi-select box, trigger data requests, emit temporary variables, and use them in other components. By default, the data value configured in the Data Source panel is displayed. For more information, see Component interaction configuration.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the data interface request is completed	Triggered with the processed JSON data after a data interface request is responded and processed by a filter. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     When the multi-select button is clicked	Triggered when a multi-select button is clicked. The data item corresponding to the selected value is also emitted. See the data sample below. { "data": [ { "value": "B" } ] }

   • Action

     Action	Description
     Import data	After widget data is processed according to its drawing format, the data is imported for redrawing without requesting server data again. See the data example below. [ { "value": "A" } ]
     Request Data Interface	Requests server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.
     Obtain the current selected value	Gets the value of the current selection in the multi-select box. No parameters are required.
     Set the value of the current multi-check box	Sets the values of the current multi-select box. See the data example below. [ { "value": "A" } ]
     Clear a component to its default value	Restores the component to its default selected value. No parameters are required.
     Move	Moves a widget to a specified location. See the data example below. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Hash	Toggles whether the widget is displayed or hidden. No parameters are required.
     Display	Display the widget. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hide the component. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data. Then change the style field for the data processing node in Blueprint Editor.