Updated on 2024-05-08 GMT+08:00

All inputs

Overview

Type

Widget

Style

extendProp

input

Single-line Text Box

  • visibleConditions
  • disabledConditions

inputNumber

Digit

  • visibleConditions
  • disabledConditions

switch

Switch

  • visibleConditions
  • disabledConditions

singleSelect

Single-selection Drop-down List

  • options
  • apiType
  • apiOptions

multipleSelect

Multi-selection Drop-down List

  • options
  • apiType
  • apiOptions

keyValuePair

Key-Value Pair

  • visibleConditions
  • disabledConditions

radio

Option Button

options

timeInterval

Time Interval

  • visibleConditions
  • disabledConditions

shell

Shell

  • visibleConditions
  • disabledConditions

endpoint:${module_id}

Endpoint

  • visibleConditions
  • disabledConditions

Basic Fields of a Widget

Field

Description

Mandatory

Remarks

name

Unique identifier of a widget

Yes

The value must be unique.

label

Title of a widget

Yes

-

type

Type of a widget

Yes

-

defaultValue

Initial value

No

Initial default value of a widget. This field can be left blank.

description

Description of a widget

No

The infotip message next to a widget name

required

Whether a widget is mandatory

No

Fields marked with asterisks (*) are mandatory.

validation

Validation information, which is an object that contains the requiredMessage, regex, and regexMessage properties.

{
    requiredMessage: '',    // Prompt message for a mandatory field
    regex: '',              //  RegEx validation
    regexMessage: ''        // The message displayed when RegEx validation failed
}

No

extendProp

Extension field

{
     visibleConditions: [],
     disabledConditions: []
     ...
}

No

For details about extendProp, see extendProp.

extendProp

Field

Description

Mandatory

Remarks

visibleConditions

Widgets are displayed if conditions are met.

No

Multiple conditions can be included:

[{},{},{},...]

Example:

[{comp:'key_001',symbol:'===', value: 'xxx'}]

In this example, widget A will be displayed if widget B has a unique ID of key_001 and has a value that is equal to (===) xxx.

symbol can be:

  • ===: Equal
  • !==: Not equal
  • empty: Empty
  • notEmpty: Not empty

disabledConditions

Widgets are disabled if conditions are met.

No

Multiple conditions can be included:

[{},{},{},...]

Example:

[{comp:'key_002',symbol:'!==', value: 'yyy'}]

In this example, widget A will be disabled if widget B has a unique ID of key_002 and has a value that is not equal to (!==) yyy.

symbol can be:

  • ===: Equal
  • !==: Not equal
  • empty: Empty
  • notEmpty: Not empty

options

The fixed drop-down list. The field's type is list.

No

Example:

[{label:'option 1',value: 1},{label:'option 2',value: 2}]

apiType

Options in the drop-down list box:

  • fixed: The values in options are used as options.
  • api: API requests, available only when apiOptions is configured.

No

If this field is left blank, fixed is used.

apiOptions

JSON body, including parameters used by APIs.

No

Example:

'{"body":{"xxx":111},"header":{"yyy":222},"linkedFields":["key_001"],"method":"POST","params":{"zzz":333},"remote":true,"remoteName":"xxx","remoteQueryField":"body","responseUrl":"data","label":"name","value":"id","url":"https://sss/lll/mmm"}'

JSON (parsed):

{
    body: {xxx:111},             // Request parameters for calling an API
    header: {yyy: 222},          // Request header field
    params: {zzz: 333},          // Request parameters for calling an API
    linkedFields: ['key_001],    // This field is associated with other widgets. When the values of other widgets change, the API will be called again and the current options will be cleared.
    method: 'POST',              // Request mode: POST or GET
    remote: true,                // Whether to enable remote search
    remoteName: 'tt',            // Field to be searched in a remote search
    remoteQureyField: 'body',    // Parameter passing method for the remote search field: body or params
    responseUrl: 'data',         // The path of the option list obtained in the returned data
    label: 'name',               // Parameter corresponding to the label in ComboBox
    value: 'id',                 // Parameter corresponding to the actual value in ComboBox
    url: 'https://sss/lll/mmm'   // API URL
}