UI element specifications

This is a list of all the elements that can be shown in the Inspector panel (the right-hand side panel of the Studio application UI).

Plugins can use the Inspector UI to display settings which will be visible to the user and allow to control the behavior of the plugin.

Each element provides certain kind of functionality, such as a button triggers an action, or a plain text label shows some useful information to the user. Elements have different settings and properties depending on the element type. Properties are defined in the plugin's inspectorUIDefinition property and they control behavior and appearance of the element.

For interactive elements, an actionBinding property is available which can be used to trigger a function on the plugin's object context. The reference below also shows examples of how this works. (If you have lots of elements in your inspector UI, it often makes sense to use a single action function which knows how to read the data from all your UI elements. See the example plugins for how this can be effectively used in practice.)

Here's a brief description and list of settings and properties for each element type:

label

Shows a string value to the user. Useful for showing any kind of textual information, such as instructions.

Inspector UI definition example:

{
  "type": "label",
  "text": "<text visible to the user>"
}

textinput

Shows a text input field to the user.

Inspector UI definition example:

{
  "type": "textinput",
  "id": "mytext",
  "actionBinding": "this.onTextInputChange"
}

Action function example:

this.onTextInputChange = function(controlId) {
  var control = this.getUI().getChildById(controlId);
  if (controlId == "mytext") {
    var text = control.text;
    // do something with 'text'
  }
}

numberinput

Shows a number input field to the user.

Inspector UI definition example:

{
  "type": "numberinput",
  "id": "mynumber",
  "min": 0, "max": 100, "increment": 1,
  "actionBinding": "this.onNumberInputChange"
}

Action function example:

this.onNumberInputChange = function(controlId) {
  var control = this.getUI().getChildById(controlId);
  if (controlId == "mynumber") {
    var number = control.numberValue;
    // do something with 'number'
  }
}

checkbox

Shows a checkbox (an input field with two values: true and false) to the user.

Inspector UI definition example:

{
  "type": "checkbox",
  "id": "mycheckbox",
  "label": "<text visible to the user>",
  "actionBinding": "this.onCheckboxChange"
}

Action function example:

this.onCheckboxChange = function(controlId) {
  var control = this.getUI().getChildById(controlId);
  if (controlId == "mycheckbox") {
    var checked = control.checked;
    // do something with 'checked'
  }
}

button

Shows a button to the user.

Inspector UI definition example:

{
  "type": "button",
  "id": "mybutton",
  "label": "<text visible to the user>",
  "actionBinding": "this.onButtonPress"
}

Action function example:

this.onButtonPress = function(controlId) {
  var control = this.getUI().getChildById(controlId);
  if (controlId == "mybutton") {
    // do something
  }
}

multibutton

Shows a button consisting of multiple segments to the user. One of the segments is always selected and can be changed by clicking.

Inspector UI definition example:

{
  "type": "multibutton",
  "id": "mymultibutton",
  "labels": ["<label 1>", "<label 2>", "<label 3>"],
  "actionBinding": "this.onMultiButtonChange"
}

Action function example:

this.onMultiButtonChange = function(controlId) {
  var control = this.getUI().getChildById(controlId);
  if (controlId == "mymultibutton") {
    var selection = control.numberValue;
    // do something with 'selection'
  }
}

dataslot-picker

Shows a pop-up button with a list of data slots in the project to the user.

Inspector UI definition example:

{
  "type": "dataslot-picker",
  "id": "mydataslot",
  "actionBinding": "this.onPickDataSlot"
}

Action function example:

this.onPickDataSlot = function(controlId) {
  var control = this.getUI().getChildById(controlId);
  if (controlId == "mydataslot") {
    var dataSlotName = control.dataSlotName;
    // do something with 'dataSlotName'
  }
}

datasheet-picker

Shows a pop-up button with a list of data sheets in the project to the user.

Inspector UI definition example:

{
  "type": "datasheet-picker",
  "id": "mydatasheet",
  "actionBinding": "this.onPickDataSheet"
}

Action function example:

this.onPickDataSheet = function(controlId) {
  var control = this.getUI().getChildById(controlId);
  if (controlId == "mydatasheet") {
    var dataSheetName = control.dataSheetName;
    // do something with 'dataSheetName'
  }
}

screen-picker

Shows a pop-up button with a list of screens in the project to the user.

Inspector UI definition example:

{
  "type": "screen-picker",
  "id": "myscreen",
  "actionBinding": "this.onPickScreen"
}

Action function example:

this.onPickScreen = function(controlId) {
  var control = this.getUI().getChildById(controlId);
  if (controlId == "myscreen") {
    var screenName = control.screenName;
    // do something with 'screenName'
  }
}

component-picker

Only in React Studio.

Shows a pop-up button with a list of components in the project to the user. Works similarly to screen-picker.

element-picker

Shows a pop-up button with a list of elements in the containing screen to the user.

Inspector UI definition example:

{
  "type": "element-picker",
  "id": "myelement",
  "actionBinding": "this.onPickElement"
}

Action function example:

this.onPickElement = function(controlId) {
  var control = this.getUI().getChildById(controlId);
  if (controlId == "myelement") {
    var elementId = control.elementId;
    // do something with 'elementId'
  }
}

file-picker

Shows a button which allows the user to browse for a file in the file system.

Inspector UI definition example:

{
  "type": "file-picker",
  "id": "myfile",
  "allowedFileTypes": ["rtf"],
  "actionBinding": "this.onPickFile"
}

Action function example:

this.onPickFile = function(controlId) {
  var control = this.getUI().getChildById(controlId);
  if (controlId == "myfile") {
    var filePath = control.filePath;
    // do something with 'filePath'
  }
}

colorpicker

Shows color controls to the user.

Inspector UI definition example:

{
  "type": "colorpicker",
  "id": "mycolor",
  "label": "<text visible to the user>",
  "actionBinding": "this.onColorChange"
}

Action function example:

this.onColorChange = function(controlId) {
  var control = this.getUI().getChildById(controlId);
  if (controlId == "mycolor") {
    var color = control.stringValue;
    // do something with 'color'
  }
}

canvas

Custom drawing canvas.

Inspector UI definition example:

{
  "type": "canvas",
  "width": "300",
  "height": "300"
}

hlist

A horizontal list, allows aligning controls horizontally.

Inspector UI definition example:

{
  "type": "hlist",
  "items": [
    {
      "type": "button",
      "id": "mybutton1",
      "label": "<text visible to the user>",
      "actionBinding": "this.onButtonPress"
    },
    {
      "type": "button",
      "id": "mybutton2",
      "label": "<text visible to the user>",
      "actionBinding": "this.onButtonPress"
    }
  ]
}