Types of Interactive Controls

Messages (strings) sent to the strategy after interactive control is triggered:

• Number type
  After entering interactive data 123 in the input box of interactive control cmdNum, click the button of interactive control cmdNum. The GetCommand() function in the strategy program will receive the message: cmdNum:123.
• Boolean type
  After setting the switch control of interactive control cmdBool to on, click the button of interactive control cmdBool. The GetCommand() function in the strategy program will receive the message: cmdBool:true.
• String type
  After entering interactive data abc in the input box of interactive control cmdStr, click the button of interactive control cmdStr. The GetCommand() function in the strategy program will receive the message: cmdStr:abc.
• Dropdown
  After selecting the second option in the dropdown of interactive control cmdCombox, click the button of interactive control cmdCombox. The GetCommand() function in the strategy program will receive the message: cmdCombox:1, where 1 represents the index of the selected option, the first option has index 0, the second option has index 1.
• Button
  Click the button of interactive control cmdBtn. The GetCommand() function in the strategy program will receive the message: cmdBtn.

Application of interactive controls: Dynamically modify strategy parameters
For example, the strategy has a parameter called symbol. The strategy parameters added on the strategy interface are also global variables, so global variables in the code are used here for demonstration.

            javascript
            
            
// Strategy parameters
var symbol = "BTC_USDT"

function main() {
    while (true) {
        var cmd = GetCommand()
        if (cmd) {
            var arr = cmd.split(":")
            if (arr.length == 2 && arr[0] == "changeSymbol") {
                // When changeSymbol control is triggered, parameter update operation will be executed
                Log("Changed symbol parameter to:", arr[1])
                symbol = arr[1]
            }
        }

        LogStatus(_D(), ", Current symbol parameter value:", symbol)
        Sleep(3000)
    }
}

Setting up interactive controls:

Component Configuration

The "Component Configuration" option for strategy interaction controls is used to set up controls corresponding to 5 types of interaction controls on the platform, enhancing functionality and simplifying design.

Supported component types for the 5 interaction controls:

• Number type interaction control
  Supported component types: Input box control (default), Time picker control, Slider input control.
• Boolean (true/false) interaction control
  Only supports Switch control (default).
• String type interaction control
  Supported component types: Input box control (default), Text box control, Time picker control, Color picker control, Currency selector, Trading code selector.
• Dropdown (selected) interaction control
  Supported component types: Dropdown control (default), Segmented controller control, Currency selector, Trading code selector.
• Button type interaction control
  Only supports Button control (default), no input controls.

Interaction controls support grouping functionality, same as interface parameter settings. Grouping can be configured in Component Configuration.

• Grouping
  In the "Group" input box of Component Configuration, you can enter a label name to group multiple strategy interaction controls under the same group label (this feature replaces the platform's original "Interaction Control Grouping" function).

Interactive Controls in Status Bar

In addition to designing interactive controls in the "Strategy Interaction" section, you can also design interactive controls in the strategy status bar. Currently, the only supported interactive control type is the button type. Please refer to the LogStatus function chapter in the "Syntax Guide".

Button controls in the status bar can be divided into:

• Regular button controls
  Data structure example:

  
              json
              
              
  {"type": "button", "name": "Button 1", "cmd": "button1", "description": "This is the first button"}
  

• Button controls with a single input data
  Use the input attribute to set input control options. Data structure example:

  
              json
              
              
  {"type": "button", "name": "Button 2", "cmd": "button2", "description": "This is the second button", "input": {"name": "Open Quantity", "type": "number", "defValue": 1}}
  

  
              json
              
              
  {
      "type": "button",
      "cmd": "test1",
      "name": "test1",
      "input": {
          "type": "selected",
          "name": "selected",
          "label": "Dropdown",
          "description": "description",
          "default": 100,
          "settings": {
              "multiple": true,
              "customizable": true,
              "options":[{"name": "A", "value": 100}, {"name": "B", "value": 200}]
          }
      },
  }
  

• Button controls with a group of input data
  Use the group attribute to set options for a group of input controls. Data structure example:

  
              json
              
              
  {
      "type": "button",
      "cmd": "open",
      "name": "Open",
      "group": [
          {"name": "orderType", "description": "Order Method|order type", "type": "selected", "defValue": "Market Order|Limit Order"},
          {"name": "tradePrice@orderType==1", "description": "Trade Price|trade price", "type": "number", "defValue": 100},
          {"name": "orderAmount", "description": "Order Quantity|order amount", "type": "string", "defValue": 100},
          {"name": "boolean", "description": "Yes/No|boolean", "type": "boolean", "defValue": true}
      ]
  }
  

  
              json
              
              
  {
      "type": "button",
      "cmd": "test2",
      "name": "test2",
      "group": [{
          "type": "selected",
          "name": "selected",
          "label": "Dropdown",
          "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 the JSON data of these button controls as a JSON string, then wrap it with ` characters and output it in the status bar. Using JavaScript as an example:

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

These button controls can also be written into status bar tables. For detailed examples, please refer to the Syntax Guide.

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

            desc
            
            
{
    "type": "selected",     // Control type (required field), supports: number, string, selected, boolean
    "name": "test",         // Name (required field when used in group)
    "label": "topic",       // Title (required field)
    "description": "desc",  // Tooltip information for the component
    "default": 1,           // Default value; if the settings field is not set in the current JSON structure, it is compatible with defValue, and defValue can be used instead of default
    "filter": "a>1",        // Selector, not setting this field means no filtering (display control); when this field is set, the control is not filtered (displayed) when the expression is true, and filtered (not displayed) when the expression is false
                            // For the selector, using the expression a>1 in this example, 'a' refers to the control value with name 'a' under the group field in the type=button structure, and this value is used to determine whether to filter
    "group": "group1",      // Grouping
    "settings": { ... },    // Component configuration
}

Detailed explanation of each field in the component configuration settings:

• settings.required: Whether it is required.
• settings.disabled: Whether it is disabled.
• settings.min: Valid when type=number, represents the minimum value or minimum string length.
• settings.max: Valid when type=number, represents the maximum value or maximum string length.
• settings.step: Valid when type=number and render=slider, represents the step size.
• settings.multiple: Valid when type=selected, indicates support for multiple selection.
• settings.customizable: Valid when type=selected, indicates support for customization; users can directly edit and add new options in the dropdown control. If a newly edited option is selected, the option's name will be used instead of the option's value when triggering the interaction.
• settings.options: Valid when type=selected, represents the selector's option data format: ["Option 1", "Option 2"], [{'name':'xxx','value':0}, {'name':'xxx','value':1}].
• settings.render: Render component type.
  When type=number, settings.render is not set (defaults to number input box), options: slider (slider), date (date picker, returns timestamp).
  When type=string, settings.render is not set (defaults to single-line input box), options: textarea (multi-line input), date (date picker, returns yyyy-MM-dd hh:mm:ss), color (color picker, returns #FF00FF).
  When type=selected, settings.render is not set (defaults to dropdown), options: segment (segmented selector).
  When type=boolean, currently only the default checkbox is available.

Bilingual settings are supported. For example: 'Option｜options' text content will automatically adapt based on the current language environment. Using a single control in the group field as an example, complete example:

            json
            
            
{
    type:'selected',
    name:'test',
    label:'Option｜options',
    description:'Description｜description',
    default:0,                            // Here the default value is set to 0, representing the value in {name:'xxx|yyy',value:0} option
    filter:'a>1&&a<10',
    group:'Group|group',
    settings:{
        multiple:true,
        customizable:true,
        options:[{name:'xxx|yyy',value:0}]
    }
}