multi-select-drop-down-boxes

Chart style

The multi-select drop-down box is an advanced widget that serves as a drop-down form in data dashboards. You can use it to submit user-selected data to the backend for processing or display the selected content on other widgets 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 item to locate it. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget, in pixels.

  • Positioning: the x-axis and y-axis of the component, in pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is 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.

    • Enter the degrees in the Rotation Angle spin box directly, or click the plus sign (+) or minus sign (-) to adjust the value.

    • 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.

• Input box

  • Selected by Default: the entries that are selected by default. The entries in the field must be the existing entries in the value field on the Data tab. Separate multiple entries with commas (, ).

  • Enhancements: The following table describes the features that are added to the input box.

    Metric	description
    Drop-down search	If you turn on the switch, you can enter search content in the input box and filter the data in the corresponding drop-down list. If you turn off the switch, custom input search is not available.
    Clear Selected	If you turn on the switch, the Clear Style configuration item appears in the input box module. You can set the size of the clear arrow, arrow color, right margin, and arrow background color. If you turn off the switch, the clear selection feature is not available.
    One line display	If you turn on the switch, all content in the input box is displayed in one line. If you turn off the switch, content can wrap to multiple lines.

  • Border Style: the border style of the input box.

    Metric	description
    Use the default authorization method	The default border line thickness, line type, line color, and border radius.
    Suspension	The line thickness, line type, line color, and border radius when the pointer hovers over the input box border.
    Selected	The border line color when the input box is clicked. We recommend that you set the color to the hover color with 0.2 opacity.

  • Content Style: the style of the content in the input box.

    Metric	description
    Text Indent	The text indent value in the input box, in pixels.
    Background Color	The background color of the input box. For more information, see color picker description.
    Text Style	The text style for search input, prompt text, and empty drop-down list content, including font style, text weight, font size, and color.
    Prompt Text	The placeholder text displayed when the input box is empty.
    Label Configuration	Background Color: the background color of the tag. Text: the text style of the label text in the input box, including the font style, weight, font size, and color of the text. Border: the border thickness, type, color, and border radius. Border types include Solid Line, Dashed Line, Dotted Line, Double Solid Line, Carve Effect, Emboss Effect, Pin Effect, and Emboss Effect. Padded: the four inner margin values of the tag. Margins: the distance between the label and the outside of the border. Delete: the size of the delete icon, the color of the delete icon, and the distance to the right of the delete icon.

  • Arrow Style: the arrow style of the input box. Click the icon to toggle the arrow display.

    Metric	description
    Size	The size of the drop-down arrow.
    Color	The color of the drop-down arrow.
    Right Margin	The distance between the drop-down arrow and the right border of the widget, in pixels.

• drop-down box

  • Height: the height of the drop-down box.

    Metric	description
    List height	The height of the drop-down list, in pixels.
    Option Height	The height of each option in the drop-down box, in pixels.

  • Background: the background color of the drop-down box.

  • Border: the border style of the drop-down box.

    Metric	description
    thickness	The thickness of the drop-down box border line.
    Type	The border line type of the drop-down box. Valid values: Solid Line, Dashed Line, Dotted Line, Double Solid Line, Carve Effect, Emboss Effect, Pin Effect, and Emboss Effect.
    Color	The color of the drop-down box border.
    Fillet	The border radius of the drop-down box, in pixels.

  • Text: the style of the selected text in the drop-down list.

    Metric	description
    Font	The font style of the selected text in the drop-down box.
    Text weight	The font weight value of the option text in the drop-down box.
    Font size	The size of the text font in the drop-down box.
    Color	The color of the option text in the drop-down box.

  • Margin: the distance between the option content and the option border in the drop-down list, in pixels.

  • Icon Configuration: the style of the icon to the left of the text in the drop-down list. Click the icon to toggle the icon display.

    Note

    The Icon Configuration configuration items in the drop-down list must match the imgSrc field in the Data panel. By default, only the icon field of the first data item is configured in the sample data source panel. If you need to configure the icon of other options, you can customize the imgSrc field of the corresponding data item.

    Metric	description
    Width	The width of the icon.
    Height	The height of the icon.
    Distance Text Spacing	The distance between the icon and the text.

  • Option Hover Style

    Metric	description
    Background information	The background color when the pointer hovers over an option in the drop-down box.
    Text	The text style when the pointer hovers over an option in the drop-down box, including font style, text weight, font size, and color.

  • Select Style

    Metric	description
    Background information	The background color when an option in the drop-down box is selected.
    Text	The text style when an option in the drop-down box is selected, including font style, text weight, font size, and color.
    Select Color	The color of the checkbox after an entry is selected.

Data Sources panel

Advanced Panel

Turn on the switch to enable the global variable feature. When you select items from the drop-down list, a data request is triggered and a temporary variable is thrown for use in other components. By default, the title, value, and imgSrc values configured in the data panel are thrown. 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. Refer to the blueprint configuration parameters.

   • Event

     Event	Description
     When the data interface request is completed	After a data interface request is responded to and processed by a filter, this event is triggered with the processed JSON data. 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 drop-down list is selected	Triggered when a drop-down box option is selected. The data item corresponding to the selected value is also raised. For more information, see the data example. [ { "title": "Beijing", "value": "Beijing", "imgSrc": "https://img.alicdn.com/tfs/TB1jV1lcF67gK0jSZPfXXahhFXa-128-129.png" }, { "title": "Shanghai", "value": "Shanghai" }, { "title": "Guangzhou", "value": "Guangzhou" } ]

   • Action

     Action	Description
     Import data	Imports pre-processed data in the widget's drawing format for redrawing without requesting server data again. For more information, see the data example. [ { "title": "Beijing", "value": "Beijing", "imgSrc": "https://img.alicdn.com/tfs/TB1jV1lcF67gK0jSZPfXXahhFXa-128-129.png" } ]
     Request Data Interface	Requests server data again, using the data sent by an upstream data processing node or layer node as a parameter. For example, if the API data source is https://api.test and the data transferred to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.
     Set Selected Entries	Sets the selected value in the current drop-down box. For more information, see the data example. { "value": "Shanghai" }
     Clear selected entries	Clears the selected drop-down box entries. No parameters are required.
     Clear a component to its default value	Restores a component to its default value. No parameters are required.
     Move	Moves a widget to a specified location. For more information, see the data example. { // 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 /Display	Toggles the widget between displayed and hidden states. No parameters are required.
     Display	Displays the widget. For more information, see the 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	Hides the widget. For more information, see the 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 widget configuration data. Then modify the style field for the data processing node in Blueprint Editor.