Extension options are configuration items you define when registering an extension. Users fill in these options to customize the extension's behavior per workspace — for example, setting different SQL statement length limits in different workspaces.
How it works
When you register an extension, you define its options as a JSON schema. Users then configure those options before enabling the extension in a workspace. The following figure shows the configuration panel they see.
To read the values a user has saved, call the GetOptionValueForProject API from your extension code.
The extension developer provides the option configurations and related text. The platform is not responsible for any security threats posed by the content.
Supported components
Options support seven component types. The following figure shows all seven types as they appear in the configuration panel.
| Component | x-component value |
|---|---|
| Text | PreviewText.Input |
| Single-line input box | Input |
| Multi-line input box | Input.TextArea |
| Single-select drop-down list | Select |
| Multi-select drop-down list | Select |
| Checkbox group | Checkbox.Group |
| Radio button group | Radio.Group |
Define options
When registering an extension, paste a JSON string into the Option Configuration field. The top-level structure is:
{
"type": "object",
"properties": {
"<component-name>": {
"type": "string",
"title": "<display title>",
"x-decorator": "FormItem",
"x-component": "<see table above>",
"x-decorator-props": {
"tooltip": "<tooltip text>"
},
"x-component-props": {
"dataSource": "<see below>",
"mode": "multiple"
}
}
}
}Each key under properties is the component name and must be unique within the schema.
For configuration examples, see Set the CU resource threshold for SQL tasks and Use all seven component types.
For extension registration, see Develop and deploy an extension: Self-built service.
Parameters
title
Specifies the label displayed above the input field in the configuration panel. Set a title for every component type.
x-decorator
Controls how the component is wrapped in the form layout. Set x-decorator to FormItem for all component types.
x-component
Determines which UI control is rendered. Use the x-component values from the Supported components table.
x-decorator-props.tooltip
Sets the tooltip text shown next to the component label. Applies to all component types.
x-component-props.dataSource
Provides the list of selectable options. This field is optional for text, single-line input box, and multi-line input box components. For single-select drop-down list, multi-select drop-down list, checkbox group, and radio button group components, configure dataSource as an array of objects:
[
{ "value": "10001", "label": "opt1" },
{ "value": "10002", "label": "opt2" }
]-
label: the text displayed in the UI -
value: a developer-defined identifier for the option;valueandlabelcannot be duplicates within the samedataSourcearray
x-component-props.mode
Set mode to "multiple" to enable multi-selection. Use this for multi-select drop-down list, checkbox group, and radio button group components.
Configuration example: Set the CU resource threshold for SQL tasks
The following figure shows the configuration and its rendered result.
This example uses a single-line input box (Input) so users can enter a numeric threshold value.
{
"type": "object",
"properties": {
"cuNumber": {
"type": "string",
"title": "CU Threshold",
"x-decorator": "FormItem",
"x-component": "Input",
"x-decorator-props": {
"tooltip": "Enter the CU consumption threshold for the SQL task."
}
}
}
}To retrieve the cuNumber value set by a user, call the GetOptionValueForProject API.
Configuration example: Use all seven component types
The following figure shows the configuration using all seven component types and its rendered result.
Copy and modify the following JSON to use all seven component types at once.
{
"type": "object",
"properties": {
"text": {
"type": "string",
"title": "Text",
"x-decorator": "FormItem",
"x-component": "PreviewText.Input",
"x-decorator-props": {
"tooltip": "Description file"
},
"default": "This is text information"
},
"input": {
"type": "string",
"title": "Single-line input box",
"x-decorator": "FormItem",
"x-component": "Input",
"x-decorator-props": {
"tooltip": "Description file"
},
"x-component-props": {},
"default": "This is the default value"
},
"textarea": {
"type": "string",
"title": "Multi-line input box",
"x-decorator": "FormItem",
"x-component": "Input.TextArea",
"x-decorator-props": {
"tooltip": "Description file"
},
"x-component-props": {},
"default": "This is the default value"
},
"select": {
"type": "string",
"title": "Single-select drop-down list",
"x-decorator": "FormItem",
"x-component": "Select",
"x-decorator-props": {
"tooltip": "Description file"
},
"x-component-props": {
"dataSource": [
{ "value": "10001", "label": "opt1" },
{ "value": 10002, "label": "opt2" },
{ "value": 10003, "label": "opt3", "disabled": true }
]
},
"default": "10001"
},
"selectmore": {
"type": "string",
"title": "Multi-select drop-down list",
"x-decorator": "FormItem",
"x-component": "Select",
"x-decorator-props": {
"tooltip": "Description file"
},
"x-component-props": {
"dataSource": [
{ "value": "10001", "label": "opt1" },
{ "value": 10002, "label": "opt2" },
{ "value": 10003, "label": "opt3", "disabled": true }
],
"mode": "multiple"
},
"default": ["10001", "10002"]
},
"checkbox": {
"type": "array",
"title": "Checkbox group",
"x-decorator": "FormItem",
"x-component": "Checkbox.Group",
"x-decorator-props": {
"tooltip": "Description file"
},
"x-component-props": {
"dataSource": [
{ "value": "10001", "label": "opt1" },
{ "value": 10002, "label": "opt2" },
{ "value": 10003, "label": "opt3", "disabled": true }
],
"mode": "multiple"
},
"default": ["10001", "10002"]
},
"radio": {
"type": "number",
"title": "Radio button group",
"x-decorator": "FormItem",
"x-component": "Radio.Group",
"x-decorator-props": {
"tooltip": "Description file"
},
"x-component-props": {
"dataSource": [
{ "value": "10001", "label": "opt1" },
{ "value": 10002, "label": "opt2" },
{ "value": 10003, "label": "opt3", "disabled": true }
],
"mode": "multiple"
},
"default": "10001"
}
}
}To retrieve the values users set for any of these options, call the GetOptionValueForProject API.