Block: ControlPanel
The ControlPanel block is used to create a panel of input elements and display elements.
Overview
You can use a ControlPanel object to create a panel that contains a set of elements.
The elements can be input widgets (such as sliders) or display elements (such as text paragraphs).
ControlPanelConfig
A ControlPanel allows users to change alter values and see textual results
ControlConfig
TextControlConfig
| Name |
Type |
Required |
Description |
kind |
"Text" |
Yes |
|
hideWhen |
HideWhenConfig |
No |
Hide this control based on another control’s value |
text |
string |
Yes |
|
type |
TextType |
No |
|
TextType
"lead""h1""h2""h3""h4""h5""h6""display-1""display-2""display-3""display-4"
SliderControlConfig
| Name |
Type |
Required |
Description |
kind |
"Slider" |
Yes |
|
value |
number |
Yes |
|
min |
number |
Yes |
|
max |
number |
Yes |
|
precision |
integer |
Yes |
|
label |
string |
Yes |
|
unit |
string |
No |
|
disabled |
boolean |
No |
|
disableWhen |
DisableWhenConfig |
No |
Disable this control based on another control’s value |
hidden |
boolean |
No |
|
hideWhen |
HideWhenConfig |
No |
Hide this control based on another control’s value |
| Name |
Type |
Required |
Description |
kind |
"NumberInput" |
Yes |
NumberInput is used to input a number |
label |
string |
Yes |
The label of the number input |
value |
number |
No |
Optionally define the value of the number input |
unit |
string |
No |
Optionally show a unit behind the number input |
placeholder |
string |
No |
Optionally display a placeholder when the value is empty |
min |
number |
No |
Optionally set the lower bound of the number |
max |
number |
No |
Optionally set the upper bound of the number |
step |
number |
No |
A float defining the step size that the value must adhere to.
Valid values are defined by moving in discrete steps from the basis, possibly constrained by min and max if they are specified.
The basis is either min, or value, or the default value, depending on what is specified.
The default for step is undefined, which means that any value is allowed (barring other constraints,
such as min
and max). |
required |
boolean |
No |
|
disabled |
boolean |
No |
|
disableWhen |
DisableWhenConfig |
No |
Disable this control based on another control’s value |
hidden |
boolean |
No |
|
hideWhen |
HideWhenConfig |
No |
Hide this control based on another control’s value |
DisableWhenConfig
TableControlConfig
| Name |
Type |
Required |
Description |
kind |
"Table" |
Yes |
Table is used to display table of data |
columns |
Dictionary<string, TableControlColumn> |
Yes |
Columns schema. Columns should be referenced by key when defining table items. Item object should specify value for each column |
hidden |
boolean |
No |
|
hideWhen |
HideWhenConfig |
No |
Hide this control based on another control’s value |
TableControlColumn
| Name |
Type |
Required |
Description |
type |
"Text" | "Number" |
Yes |
|
label |
string |
No |
|
HideWhenConfig
FalsyConfig
| Name |
Type |
Required |
Description |
kind |
"Falsy" |
Yes |
Check if the control value is falsy |
control |
string |
Yes |
The control name to check the condition against its value |
TruthyConfig
| Name |
Type |
Required |
Description |
kind |
"Truthy" |
Yes |
Check if the control value is truthy |
control |
string |
Yes |
The control name to check the condition against its value |
EqualConfig
| Name |
Type |
Required |
Description |
kind |
"Equal" |
Yes |
Check if the control value is equal to a specific value |
control |
string |
Yes |
The control name to check the condition against its value |
value |
number | string | boolean |
Yes |
The value to check the condition with |
NotEqualConfig
| Name |
Type |
Required |
Description |
kind |
"NotEqual" |
Yes |
Check if the control value is not equal to the provided value |
control |
string |
Yes |
The control name to check the condition against its value |
value |
number | string | boolean |
Yes |
The value to check the condition against |
| Name |
Type |
Required |
Description |
kind |
"Button" |
Yes |
|
routerLink |
string |
No |
|
hidden |
boolean |
No |
|
disabled |
boolean |
No |
|
text |
string |
Yes |
|
color |
"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" |
No |
A constant that defines the theme colour to use for the button.
Possible options are primary, secondary, success, danger, warning, info, light, dark, and link. The default is primary. |
| Name |
Type |
Required |
Description |
kind |
"SubmitButton" |
Yes |
|
routerLink |
string |
No |
|
hidden |
boolean |
No |
|
disabled |
boolean |
No |
|
text |
string |
Yes |
|
color |
"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" |
No |
A constant that defines the theme colour to use for the button.
Possible options are primary, secondary, success, danger, warning, info, light, dark, and link. The default is primary. |
TextAreaConfig
An object for configuring a text area in a control panel. A text area allows the user to enter multiple lines of text.
| Name |
Type |
Required |
Description |
kind |
"TextArea" |
Yes |
A constant, textArea. |
label |
string |
Yes |
A string defining the label for the text area. |
placeholder |
string |
No |
A string defining the text to be display in the text area when no value has been entered. |
required |
boolean |
No |
|
TextInputConfig
| Name |
Type |
Required |
Description |
kind |
"TextInput" |
Yes |
TextInput is used to input text |
label |
string |
Yes |
The label of the text input |
value |
string |
No |
Optionally define the value of the text input |
placeholder |
string |
No |
Optionally display a placeholder when the value is empty |
required |
boolean |
No |
|
disabled |
boolean |
No |
|
disableWhen |
DisableWhenConfig |
No |
Disable this control based on another control’s value |
hidden |
boolean |
No |
|
hideWhen |
HideWhenConfig |
No |
Hide this control based on another control’s value |
An object for configuring an email input in a control panel. An email input allows the user to enter an email address.
The input value is automatically validated to ensure that it is a properly-formatted email address.
| Name |
Type |
Required |
Description |
kind |
"EmailInput" |
Yes |
A constant, emailInput. |
label |
string |
Yes |
A string defining the label for the email input. |
placeholder |
string |
No |
A string defining the text to be display in the email input when no value has been entered. |
required |
boolean |
No |
A boolean indicating whether the text area is a required input. |
ToggleControlConfig
| Name |
Type |
Required |
Description |
kind |
"Toggle" |
Yes |
Toggle is used to input true or false value |
value |
boolean |
Yes |
Define the value of the toggle input |
label |
string |
Yes |
The label of the toggle input |
disabled |
boolean |
No |
|
disableWhen |
DisableWhenConfig |
No |
Disable this control based on another control’s value |
hidden |
boolean |
No |
|
hideWhen |
HideWhenConfig |
No |
Hide this control based on another control’s value |
DropdownConfig
| Name |
Type |
Required |
Description |
kind |
"Dropdown" |
Yes |
Dropdown is used to select one option from multiple choices |
label |
string |
Yes |
The label of the dropdown |
choices |
List<DropdownChoice> |
Yes |
The choices of the dropdown |
value |
boolean | string | number |
No |
Optionally define the value of the dropdown |
placeholder |
string |
No |
Optionally display a placeholder when the value is empty |
required |
boolean |
No |
|
disabled |
boolean |
No |
|
disableWhen |
DisableWhenConfig |
No |
Disable this control based on another control’s value |
hidden |
boolean |
No |
|
hideWhen |
HideWhenConfig |
No |
Hide this control based on another control’s value |
updateChoicesWhen |
UpdateChoicesWhen |
No |
Update the choices of this control based on another control’s value |
CheckboxConfig
| Name |
Type |
Required |
Description |
kind |
"Checkbox" |
Yes |
Checkbox is used to display a list of choices for the user to select from |
label |
string |
Yes |
The label of the checkbox |
choices |
List<CheckboxChoice> |
Yes |
The choices for the user to select from |
required |
boolean |
No |
|
disabled |
boolean |
No |
|
disableWhen |
DisableWhenConfig |
No |
Disable this control based on another control’s value |
hidden |
boolean |
No |
|
hideWhen |
HideWhenConfig |
No |
Hide this control based on another control’s value |
CheckboxChoice
| Name |
Type |
Required |
Description |
label |
string |
Yes |
The label to be displayed in the dropdown |
value |
string |
Yes |
The value to be used for selected choice |
SelectionControlConfig
@deprecated
kind: Select control is deprecated use SelectColor or SelectImage
| Name |
Type |
Required |
Description |
kind |
"Select" |
Yes |
@deprecated
kind: Select control is deprecated use SelectColor or SelectImage |
choices |
List<ColorChoiceConfig> | List<ImageChoiceConfig> |
Yes |
A list of choices to select |
value |
string |
No |
Optionally define the start value of the control |
label |
string |
Yes |
Text displayed above the control |
columns |
number |
No |
Optionally set the number of equal sized columns in which the selection items are displayed, default is 3 |
height |
number |
No |
Optionally define the height of the selection grid, default is 300 |
itemHeight |
number |
No |
Optionally set the heigh of each item in the grid, default is 50 |
required |
boolean |
No |
|
disableWhen |
DisableWhenConfig |
No |
Disable this control based on another control’s value |
hideWhen |
HideWhenConfig |
No |
Hide this control based on another control’s value |
updateChoicesWhen |
UpdateChoicesWhen |
No |
Update the choices of this control based on another control’s value |
hidden |
boolean |
No |
|
disabled |
boolean |
No |
|
SelectColorControlConfig
| Name |
Type |
Required |
Description |
kind |
"SelectColor" |
Yes |
Select is used to select an item from a list of items |
choices |
List<ColorChoiceConfig> |
Yes |
A list of choices to select |
value |
string |
No |
Optionally define the start value of the control |
label |
string |
Yes |
Text displayed above the control |
numberOfColumns |
number |
No |
Optionally set the number of equal sized numberOfColumns in which the selection items are displayed, default is 3 |
height |
number |
No |
Optionally define the height of the selection grid, default is 300 |
itemHeight |
number |
No |
Optionally set the heigh of each item in the grid, default is 50 |
disableWhen |
DisableWhenConfig |
No |
Disable this control based on another control’s value |
hideWhen |
HideWhenConfig |
No |
Hide this control based on another control’s value |
updateChoicesWhen |
UpdateChoicesWhen |
No |
Update the choices of this control based on another control’s value |
required |
boolean |
No |
|
hidden |
boolean |
No |
|
disabled |
boolean |
No |
|
ColorChoiceConfig
| Name |
Type |
Required |
Description |
kind |
"Color" |
Yes |
|
label |
string |
Yes |
|
value |
string |
Yes |
|
color |
List<number> |
Yes |
|
SelectImageControlConfig
| Name |
Type |
Required |
Description |
kind |
"SelectImage" |
Yes |
Select is used to select an item from a list of items |
choices |
List<ImageChoiceConfig> |
Yes |
A list of choices to select |
value |
string |
No |
Optionally define the start value of the control |
label |
string |
Yes |
Text displayed above the control |
numberOfColumns |
number |
No |
Optionally set the number of equal sized numberOfColumns in which the selection items are displayed, default is 3 |
height |
number |
No |
Optionally define the height of the selection grid, default is 300 |
itemHeight |
number |
No |
Optionally set the heigh of each item in the grid, default is 50 |
disableWhen |
DisableWhenConfig |
No |
Disable this control based on another control’s value |
hideWhen |
HideWhenConfig |
No |
Hide this control based on another control’s value |
updateChoicesWhen |
UpdateChoicesWhen |
No |
Update the choices of this control based on another control’s value |
required |
boolean |
No |
|
hidden |
boolean |
No |
|
disabled |
boolean |
No |
|
ImageChoiceConfig
| Name |
Type |
Required |
Description |
kind |
"Image" |
Yes |
|
label |
string |
Yes |
|
value |
string |
Yes |
|
imagePath |
string |
Yes |
|
UpdateChoicesWhen
| Name |
Type |
Required |
Description |
kind |
"Match" |
Yes |
Match is used to match the control value with the provided choices |
control |
string |
Yes |
The control name to match a choice against its value |
matchValues |
List<{ value: undefined, choices: undefined }> |
Yes |
The list of values to be matched with |
DropdownChoice
| Name |
Type |
Required |
Description |
label |
string |
Yes |
|
value |
boolean | string | number |
Yes |
|
ControlPanelSubscribe
ControlPanelModelSubscribe
| Name |
Type |
Required |
Description |
kind |
"Model" |
Yes |
Subscribe to the results of a model to present them to the user. |
frame |
string |
Yes |
The frame name that the model you wish to subscribe to lives |
source |
string |
Yes |
The model name to use as a source. This is the same name as used in your contents |
setOutputs |
Dictionary<string, SetOutput> |
No |
Define which outputs to set on the panel controls.
Note that the model output name must match the control names defined here |
disableControls |
boolean |
No |
Disable the controls while model is solving. Default is true |
SetOutput
SetTextOutput
| Name |
Type |
Required |
Description |
type |
"setText" |
Yes |
|
SetTableOutput
| Name |
Type |
Required |
Description |
type |
"setTable" |
Yes |
|
ControlPanelDataStoreSubscribe
| Name |
Type |
Required |
Description |
kind |
"DataStore" |
Yes |
Subscribe to the value of a data store to initialise the control panel |
frame |
string |
Yes |
The frame name where the data store you wish to subscribe to lives |
source |
string |
Yes |
The data store name to use as a source. This is the same name as used in your contents |
ControlPanelEntityDataStoreSubscribe
| Name |
Type |
Required |
Description |
kind |
"EntityDataStore" |
Yes |
|
frame |
string |
Yes |
|
source |
string |
Yes |
|
setControls |
Dictionary<string, ControlSetter> |
No |
|
ControlSetter
SetSelectionChoices
| Name |
Type |
Required |
Description |
type |
"setSelectionChoices" |
Yes |
|
imageProperty |
string |
Yes |
|
labelProperty |
string |
No |
|
filterChoices |
List<string> |
No |
|
SetDropDownChoices
| Name |
Type |
Required |
Description |
type |
"setDropDownChoices" |
Yes |
|
labelProperty |
string |
No |
|
filterChoices |
List<string> |
No |
|
SetNumberValue
| Name |
Type |
Required |
Description |
type |
"setNumberValue" |
Yes |
|
filterBy |
List<string> |
No |
|
valueProperty |
string |
No |
|
SetTextValue
| Name |
Type |
Required |
Description |
type |
"setTextValue" |
Yes |
|
filterBy |
List<string> |
No |
|
valueProperty |
string |
No |
|
SetMinMax
| Name |
Type |
Required |
Description |
type |
"setMinMax" |
Yes |
|
minProperty |
string |
Yes |
|
maxProperty |
string |
Yes |
|
filterBy |
List<string> |
No |
|
SetVisibility
| Name |
Type |
Required |
Description |
type |
"setVisibility" |
Yes |
|
filterBy |
List<string> |
Yes |
|