The resource loading... loading...

Interactive Controls in the Status Bar

In addition to designing interactive controls in the “Strategy Interaction” column, it is also possible to design interactive controls in the Strategy Status column. Currently, only the interactive control kind button type is supported, which can be found in the LogStatus function section of the “Syntax Guide”. The button controls in the status bar can be categorized as:

  • Common button controls An example of a data structure is:

    {"type": "button", "name": "button1", "cmd": "button1", "description": "This is the first button."}
    
  • Button control with a data input Use the input property to set the input control options, with an example data structure:

    {"type": "button", "name": "button2", "cmd": "button2", "description": "This is the second button.", "input": {"name": "number of open positions", "type": "number", "defValue": 1}}
    
    {
        "type": "button",
        "cmd": "test1",
        "name": "test1",
        "input": {
            "type": "selected",
            "name": "selected",
            "label": "drop-down box",
            "description": "description",
            "default": 100,
            "settings": {
                "multiple": true,
                "customizable": true,
                "options":[{"name": "A", "value": 100}, {"name": "B", "value": 200}]
            }
        },
    }
    
  • Button control with a set of input data Use the group property to set the options for a group of input controls, with an example data structure:

    {
        "type": "button",
        "cmd": "open",
        "name": "open positions",
        "group": [
            {"name": "orderType", "description": "下单方式|order type", "type": "selected", "defValue": "market order|pending order"},
            {"name": "tradePrice@orderType==1", "description": "交易价格|trade price", "type": "number", "defValue": 100},
            {"name": "orderAmount", "description": "委托数量|order amount", "type": "string", "defValue": 100},
            {"name": "boolean", "description": "yes/no|boolean", "type": "boolean", "defValue": True}
        ]
    }
    
    {
        "type": "button",
        "cmd": "test2",
        "name": "test2",
        "group": [{
            "type": "selected",
            "name": "selected",
            "label": "drop-down box",
            "description": "description",
            "default": 200,
            "group": "group1",
            "settings": {
                "multiple": true,
                "options":[{"name": "A", "value": 100}, {"name": "B", "value": 200}]
            }
        }, {
            "type": "string",
            "name": "string",
            "label": "input box",
            "description": "description",
            "default": "ABC",
            "group": "group1"
        }],
    }
    

Encode these button control JSON data into a JSON string, then wrap it with ` characters and output it in the status bar. Take the JavaScript language as an example:

function main() {
    var btn = {"type": "button", "name": "button1", "cmd": "button1", "description": "This is the first button."}
    LogStatus("`" + JSON.stringify(btn) + "`")
}

These button controls can also be written to status bar forms, please refer to Syntax Guide for detailed examples.

The structure of the input field is consistent with the structure of a single control in the group field. The following is a detailed description:

{
    "type": "selected",     // Control type (required field), supports the following settings: number, string, selected, boolean
    "name": "test",         // Name (required when used in group)
    "label": "topic",       // Title (required field)
    "description": "desc",  // Component tips
    "default": 1,           // Default value; if the settings field is not set in the current JSON structure, defValue is compatible and can be used instead of default
    "filter": "a>1",        // Selector. If this field is not set, no filtering (controls are displayed). If this field is set, no filtering (controls are displayed) occurs when the expression is true. Filtering occurs when the expression is false (controls are not displayed)
                            // For the selector, take the expression a>1 in the current example as an example, a refers to the value of the control with name a under the group field in the structure of type=button. This value is used to determine whether to filter.
    "group": "group1",      // Grouping
    "settings": { ... },    // Component configuration
}

Component configuration settings each field is described in detail:

  • settings.required: Whether this option is required.
  • settings.disabled: Whether to disable.
  • settings.min: Valid when type=number, indicating the minimum value or minimum string length.
  • settings.max: Valid when type=number, indicating the maximum value or maximum string length.
  • settings.step: type=number, valid when render=slider, indicates the step length.
  • settings.multiple: type=selected is valid, indicating that multiple selections are supported.
  • settings.customizable: type=selected is valid, indicating that customization is supported; users can directly edit and add new options in the drop-down box control. If the newly edited option is selected, the name of the option is used instead of the value represented by the option when the interaction is triggered.
  • settings.options: Valid when type=selected, indicating the selector option data format: ["option 1", "option 2"], [{'name':'xxx','value':0}, {'name':'xxx','value':1}].
  • settings.render: Rendering component type. When type=number, settings.render is not set (default number input box), optional: slider (slider bar), date (time selector returns timestamp). When type=string, settings.render is not set (default single-line input box). Optional: textarea (multi-line input), date (time selector returns yyyy-MM-dd hh:mm:ss), color (color selector returns #FF00FF). When type=selected, settings.render is not set (default drop-down box), optional: segment (segment selector). type=boolean currently only has a default checkbox.

Supports bilingual settings, for example: the text content of '选项 | options' will be adapted according to the current language environment; taking a single control in the group field as an example, the complete example is:

{
    type:'selected',
    name:'test',
    label:'选项|options',
    description:'描述|description',
    default:0,                            // Here, the default value is set to 0, which means the value in the option {name:'xxx|yyy',value:0}
    filter:'a>1&&a<10',
    group:'分组|group',
    settings:{
        multiple:true,
        customizable:true,
        options:[{name:'xxx|yyy',value:0}]
    }
}
Component Configuration Options Trading