Help Center/ DataArts Insight/ User Guide/ Custom Components/ Custom Component Development Package/ UI Types
Updated on 2025-02-25 GMT+08:00
View PDF
Share

UI Types

This section describes the controls (component style configuration items) that are supported by a custom component. You can use the type field defined in the gui.json file to define the control type and configuration.

Supported Types

The options of type are:

  • input: text input box. See Text Input Box.
  • number: numeric control, which supports input and customization of maximum and minimum values. See Numeric Control.
  • select: drop-down list, which supports enabling filtering and custom input. See Drop-Down List.
  • color: color selector. See Color Selector.
  • checkbox: check box. See Check Box.

Text Input Box

Table 1 Parameter description

Field

Mandatory

Type

Description

value

Yes

String

Value in the text box.

An example is shown below:

1
2
3
4
5
6
7
 
{
  "label": "Init value",  
  "name": "initvalue",  
  "type": "input",  

  "value": ""
}

Numeric Control

Numeric control

Table 2 Parameter description

Field

Mandatory

Type

Description

value

Yes

Number

Value of the numeric control. The default value is 0.

min

No

Number

Minimum value.

max

No

Number

Maximum value.

step

No

Number

Adjustment range. The default value is 1.
An example is shown below: 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
{
  "label": "Size",  
  "name": "size",  
  "type": "number",  
  "min": 0.1,  
  "max": 1.5,  

  "step": 1,  
  "value": 14
}

Drop-Down List

Table 3 Parameter description

Field

Mandatory

Type

Description

value

Yes

String

Value selected from the drop-down list. The value corresponds to value in options.

options

Yes

Array<Object>

All the options contained in the drop-down list.

Example data:

{
  "label": "Font weight",
  "name": "fontWeight",
  "type": "select",
  "options": [
    {
      "key": "Normal",
      "value": "normal"
    },
    {
      "key": "Bold",
      "value": "bold"
    }
  ],
  "value": "normal"
}

Color Selector

Table 4 Parameter description

Field

Mandatory

Type

Description

value

Yes

String

Value selected by the color selector.
An example is shown below: 
1
2
3
4
5
6
7
 
{
  "label": "Color",  
  "name": "color",  
  "type": "color",  
  "value": "rgba(70,94,212,1)",
  "gradient": true
},

Check Box

Table 5 Parameter description

Field

Mandatory

Type

Description

value

Yes

Boolean

Value of the check box. The value can be true or false.

An example is shown below:

1
2
3
4
5
6
 
{
  "label": "Checked",  
  "name": "checked",  
  "type": "checkbox",  
  "value": true
}