{
"type": "object",
"properties": {
"switch": {
"type": "boolean",
"default": true
}
},
"required": ["switch"] //If it should be required
}
Custom Options Overview
Option
Required
Default (Option not used)
Values
Description
"type"
yes
null
"boolean"
Must be Boolean.
"default"
no
null
Boolean
Default Value (will be inserted only at rendertime).
UI Schema and Custom options
{
"type": "HorizontalLayout", //or any other layout"elements": [
{
"type": "Control",
"scope": "#/properties/switch",
"label": "Switch Component", //Optional Label, default label is the property name, in this example it would be Switch"options": {
"focus": true,
"isEmphasized": false,
"toggle": true
}
}
]
}
{
"type": "object",
"properties": {
"checkbox": {
"default": true,
"type": "boolean"
}
},
"required": ["checkbox"] //If it should be required
}
Custom Options Overview
Option
Required
Default (Option not used)
Values
Description
"default"
no
null
Boolean
Default Value (will be inserted only at rendertime).
"type"
yes
null
String
Must be provided.
Custom Options Overview
Option
Required
Default (Option not used)
Values
Description
"type"
yes
null
"boolean"
Must be Boolean.
UI Schema and Custom options
{
"type": "HorizontalLayout", //or any other layout"elements": [
{
"type": "Control",
"scope": "#/properties/checkbox",
"label": "Checkbox Component", //Optional Label, default label is the property name, in this example it would be Checkbox"options": {
"focus": true,
"isEmphasized": false
}
}
]
}
{
"type": "object",
"properties": {
"booleanButton": {
"type": "boolean",
"default": true
}
},
"required": ["booleanButton"] //If it should be required
}
Custom Options Overview
Option
Required
Default (Option not used)
Values
Description
"type"
yes
null
"boolean"
Must be Boolean.
"default"
no
null
Boolean
Default Value (will be inserted only at rendertime).
UI Schema and Custom options
{
"type": "HorizontalLayout", //or any other layout"elements": [
{
"type": "Control",
"scope": "#/properties/switch",
"label": "Switch Component", //Optional Label, default label is the property name, in this example it would be Switch"options": {
"button": true,
"focus": true,
"isEmphasized": false,
"isQuiet": false,
"staticColor": "white"
}
}
]
}
Custom Options Overview
Option
Required
Default (Option not used)
Values
Description
"button"
yes
Without "button" it's a Checkbox
true or false
If true the Component will be a Button.
"focus"
no
false
true or false
If true it will be focused after it rendered.
"isEmphasized"
no
false
true or false
Changes the appearance.
"isQuiet"
no
false
true or false
Changes the appearance.
"staticColor"
no
false
"white" or "black"
The static color style to apply. Useful when the button appears over a color background.
{"type": "object","properties": {"enumComponent": {"default": "foo","enum": ["foo","bar"],"type": "string"}},"required": ["enum"]//If it should be required}
Custom Options Overview
Option
Required
Default (Option not used)
Values
Description
"default"
no
null
One of the Enum Values
Default Value (will be inserted only at rendertime).
"enum"
yes
null
"enum"
Must be enum.
"type"
no
"string"
"string" or "array"
For multiple selection, choose array.
UI Schema and Custom options
{
"type": "HorizontalLayout", //or any other layout"elements": [
{
"type": "Control",
"scope": "#/properties/enumComponent",
"label": "Enum Component", //Optional Label, default label is the property name, in this example it would be Enum"options": {
"align": "start",
"autocomplete": false,
"defaultOpen": true,
"description": "ComboBox description",
"direction": "top",
"errorMessage": "Custom error message",
"focus": true,
"isQuiet": true,
"labelAlign": "end",
"labelPosition": "side",
"menuWidth": "size-100",
"necessityIndicator": "label",
"placeholder": "Select an option",
"shouldFlip": true,
"trim": false
}
}
]
}
Custom Options Overview
Option
Required
Default (Option not used)
Values
Description
"align"
no
"start"
"start" or "end"
Alignment of the menu relative to the input target.
"autocomplete"
yes
true
true or false
Must be false for a Picker, else it's a ComboBox.
"defaultOpen"
no
false
true or false
Whether the Picker is open after it rendered or not.
"description"
no
null
String
A Description for your ComboBox. Will be displayed if no error is displayed.
"direction"
no
"bottom"
"bottom" or "top"
Direction the menu will render relative to the ComboBox.
"errorMessage"
no
null
String or false (no ErrorMessage)
Create a Custom Error Message.
"focus"
no
false
true or false
If true it will be focused after it rendered.
"isQuiet"
no
false
true or false
Changes the appearance.
"labelAlign"
no
"start"
"start" or "end"
Has only effect when labelPosition="top". Place the Label at the start or end of the control.
Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"placeholder"
no
null
String
Text which is displayed inside the Component if it's empty (Placeholdertext).
"shouldFlip"
no
true
true or false
Whether the menu should automatically flip direction when space is limited.
"trim"
no
false
true or false
If false the Component uses 100% width, else the Component will be trimmed.
Different Name and Value for Enum and Enum Autocomplete
Show me how to use it
For the Enum Component you can use different names and values for the enum. This is useful if you want to display a different name than the value in the UI. For example if you want to display "Foo" instead of "foo" in the UI.
For that you have to change enum to oneOf and the array is an array of objects with title and value.
Schema
{"type": "object","properties": {"enumWithDifferentTitleValue": {"type": "string","oneOf": [{"const": "foo","title": "Foo"},{"const": "bar","title": "Bar"},{"const": "foobar","title": "FooBar"}]}},"required": ["enumComponent"]//If it should be required}
{"type": "object","properties": {"enumAutocomplete": {"default": "foo","enum": ["foo","bar"],"type": "string"}},"required": ["enumAutocomplete"]//If it should be required}
Custom Options Overview
Option
Required
Default (Option not used)
Values
Description
"default"
no
null
One of the Enum Values
Default Value (will be inserted only at rendertime).
"enum"
yes
null
"enum"
Must be enum.
"type"
no
"string"
"string" or "array"
For multiple selection, choose array.
UI Schema and Custom options
{
"type": "HorizontalLayout", //or any other layout"elements": [
{
"type": "Control",
"scope": "#/properties/enumAutocomplete",
"label": "Enum Autocomplete Component", //Optional Label, default label is the property name, in this example it would be Enum Autocomplete"options": {
"allowsCustomValue": true,
"autocomplete": true,
"description": "ComboBox description",
"direction": "top",
"errorMessage": "Custom error message",
"focus": true,
"isQuiet": true,
"labelAlign": "end",
"labelPosition": "side",
"menuTrigger": "manual",
"necessityIndicator": "label",
"shouldFlip": true,
"shouldFocusWrap": true,
"trim": false
}
}
]
}
Custom Options Overview
Option
Required
Default (Option not used)
Values
Description
"allowsCustomValue"
no
false
true or false
Whether the ComboBox allows a non-item matching input value to be set.
"autocomplete"
yes
true
true or false
Must be true for a ComboBox, else it's a Picker.
"description"
no
null
String
A Description for your ComboBox. Will be displayed if no error is displayed.
"direction"
no
"bottom"
"bottom" or "top"
Direction the menu will render relative to the ComboBox.
"errorMessage"
no
null
String or false (no ErrorMessage)
Create a Custom Error Message.
"focus"
no
false
true or false
If true it will be focused after it rendered.
"isQuiet"
no
false
true or false
Changes the appearance.
"labelAlign"
no
"start"
"start" or "end"
Has only effect when labelPosition="top". Place the Label at the start or end of the control.
"labelPosition"
no
"top"
"top" or "side"
Position of the Label.
"menuTrigger"
no
"input"
"input", "focus" or "manual"
The interaction required to display the ComboBox menu. It has no effect on the mobile ComboBox.
"necessityIndicator"
no
false
"label", "icon" or false
Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"shouldFlip"
no
true
true or false
Whether the menu should automatically flip direction when space is limited.
"shouldFocusWrap"
no
false
true or false
Whether keyboard navigation is circular.
"trim"
no
false
true or false
If false the Component uses 100% width, else the Component will be trimmed.
{
"type": "object",
"properties": {
"rating": {
"default": 3,
"maximum": 10,
"minimum": 1,
"type": "integer"
}
},
"required": ["rating"] //If it should be required
}
Custom Options Overview
Option
Required
Default (Option not used)
Values
Description
"default"
no
null
Integer
Default Value (will be inserted only at rendertime).
"maximum"
no
5
positive Integer (>= minimum)
How much Stars should rendered.
"minimum"
no
null
Integer between 0 and maximum
Lowest Integer to accept.
"type"
yes
null
"integer"
Must be Integer.
UI Schema and Custom options
{
"type": "HorizontalLayout", //or any other layout"elements": [
{
"type": "Control",
"scope": "#/properties/rating",
"label": "Rating Component", //Optional Label, default label is the property name, in this example it would be Rating"options": {
"necessityIndicator": "label",
"orientation": "vertical",
"rating": true,
"trim": false
}
}
]
}
Custom Options Overview
Option
Required
Default (Option not used)
Values
Description
"necessityIndicator"
no
false
"label", "icon" or false
Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"orientation"
no
"horizontal"
"horizontal" or "vertical"
How the Stars should be aligned.
"trim"
no
false
true or false
If false the Component uses 100% width, else the Component will be trimmed.
