This topic describes control configurations, including the configuration rule and common fields.

Rule configuration

Configurations of a control consist of common and custom fields. For more information, see Configure general settings..

For example, in the following example, name, type, and default are common configurations, and prefix are private configurations. 

{
  "name": "Text Box", 
  "type": "text",
  "default": "",
  "description": "Description and Label",
  "prefix": "Today's progress: "
}

Configure general settings.

Field nameElementTypeRequiredRemarks
nameThe name of the control.stringYesExample value: Text Box.
typeTypestringYesExample value: text. If this field is set to hidden, DataV does not render the control.
defaultThe default value of the control.string, number, object, or arrayNoThe dimension.
showInPanelThe rule to display the control on the panel.stringNoIf you do not specify this field, the control is displayed on the panel. If you specify this field, the control is displayed based on the rule. For more information, see Configuration of the showInPanel field.
captionThe label of the control.stringNoIf this field is not configured, the label is not displayed.
descriptionDescriptionstringNoThe dimension.
handlerThe processing function name.stringNoThe dimension.
colThe number of grids for the control.numberNoThe 24-grid system is used.
valuePathThe value path of the control.stringNoFor more information, see Configuration of the valuePath Field.
showDisplay and hide of elementsobjectNoThe following sample code provides configuration examples. 
{
  "xAxis": {
    "type": "group",
    "name": "X-axis",
    "children": {
      "show": { 
        "type": "boolean",
        "name": "Display",
        "default": true
      },
      "color": {
        "type": "color",
        "name": "Color",
        "default": "#ccc",
        "show": [                
          ["show", "$eq", true] 
        ]
      }
    }
  }
}
  • children.show: indicates that a pick box is displayed on the right side of the x-axis. The configuration is not valid for sibling properties.
  • color.show: determines whether a single control is shown.
  • ["show", "$eq", true]: The color picker control is shown only when the children.show field in the sibling control is set to true.

Custom fields

The custom fields for different controls vary. For more information, see Control configurations.