Section author: Jonathon Love

2. Advanced UI Design

2.1. Controls

There are three different categories of controls:

Layout controls are used to control the layout child controls in the UI. Option controls allow the user to change the values of options for analyses. We’ve already seen some of these; the CheckBox, the ComboBox, etc. Display controls are for presenting static information such as labels.

2.1.1. Option Controls

As already seen earlier in this tutorial series, different option controls are ‘bound’ to different analysis options. The name of the option control typically needs to match the name of the option it is bound to. Changing the option control leads to changes to the underlying option, resulting in changes to the analysis.

Not all controls can be bound to any option. It wouldn’t be meaningful to bind a checkbox to a List option for example. The following lists the different option types, and the control types that can be bound to each:

2.1.2. Bool

You can use : CheckBox

- type: CheckBox
  name: #optionName

Or you can use : Label

This control is read only.

- type: Label
  name: #optionName
  format: bool

2.1.3. Integer

You can use : TextBox

Allows for the value to be edited.

- type: TextBox
  name: #optionName
  format: number

Or you can use : Label

This control is read only.

- type: Label
  name: #optionName
  format: number

2.1.4. Number

You can use : TextBox

Allows for the value to be edited.

- type: TextBox
  name: #optionName
  format: number

Or you can use : Label

This control is read only.

- type: Label
  name: #optionName
  format: number

2.1.5. String

You can use : TextBox

Allows for the value to be edited.

- type: TextBox
  name: #optionName

Or you can use : Label

This control is read only.

- type: Label
  name: #optionName

2.1.6. List

You can use : ComboBox

- type: ComboBox
  name: #optionName

Or you can use : RadioButton

Use multiple RadioButton’s linked to the different sub-options.

- type: RadioButton
  name: #uniqueName_1
  optionName: #optionName
  optionPart: #optionPartName_1

- type: RadioButton
  name: #uniqueName_2
  optionName: #optionName
  optionPart: #optionPartName_2

- type: RadioButton
  name: #uniqueName_N
  optionName: #optionName
  optionPart: #optionPartName_N

2.1.7. NMXList

You can use : CheckBox

Use multiple CheckBox’s linked to the different sub-options.

- type: CheckBox
  name: #uniqueName_1
  optionName: #optionName
  optionPart: #optionPartName_1

- type: CheckBox
  name: #uniqueName_2
  optionName: #optionName
  optionPart: #optionPartName_2

- type: CheckBox
  name: #uniqueName_N
  optionName: #optionName
  optionPart: #optionPartName_N

2.1.8. Variable

You can use : VariablesListBox

- type: VariableListBox
  name: #optionName
  isTarget: true
  maxItemCount: 1

Or you can use : ListBox

- type: ListBox
  name: #optionName
  isTarget: true
  maxItemCount: 1
  template:
  - type: VariableLabel

2.1.9. Variables

You can use : VariablesListBox

- type: VariableListBox
  isTarget: true
  name: #optionName

Or you can use : ListBox

- type: ListBox
  name: #optionName
  isTarget: true
  template:
  - type: VariableLabel

2.1.10. Terms

You can use : ListBox

- type: ListBox
  name: #optionName
  isTarget: true
  template:
  - type: TermLabel

2.1.11. Pairs

You can use : VariablesListBox

- type: VariablesListBox
  name: #optionName
  isTarget: true
  columns:
  - name: i1
    template:
    - type: VariableLabel
  - name: i2
    template:
    - type: VariableLabel

Or you can use : ListBox

- type: ListBox
  name: #optionName
  isTarget: true
  columns:
  - name: i1
    template:
    - type: VariableLabel
  - name: i2
    template:
    - type: VariableLabel

2.1.12. Array

You can use : ListBox

- type: ListBox
  name: #optionName
  template:
  type: #depends on the option

This is jamovi’s most complicated control. The setup of it’s UI definition depends heavily on the way the option is setup. A more detailed explanation can be found here.