Control Types

Standard Control Types

There are many controls build in the module. If you need some other, then you can add your own control and used it together with the default Controls. Therefore see: Custom Enhancements

JSON Enum	Description	Data binding	Implemented control	Comment
DropDown	Drop down to show option list	Sync and Async	UI Fabric Dropdown	The property “options” can also be used to load the options
CascadingDropDown	Cascading Drop down shows multiple Lists cascaded together. Can also disable entries.	Sync and Async	Rc cascader	Stores the selected entry as JSON object. All returned options must be the format defined from rc-cascader. Set “theme” has no impact on this control
ComboBox	Combo box. Allow search and autocomplete a list of options	Sync and Async	UI Fabric ComboBox	The property “options” can also be used to load the options
ChoiceGroup	Show a group of radio buttons. Only one can be choose		UI Fabric ChoiceGroup
Checkbox	Shows a checkbox. If required validator used. Then its valid if checked.		UI Fabric Checkbox	Supports “subrows” and “subcontrols”
Textbox	Show Textbox. Can also used for entering Numbers. For masking use MasktedTextobx		UI Fabric TextField	Can also be used for number input and validate it. See Validation
RichtTex	Shows a rich text box entry. Return html as value.		react-quill	No unit test possible with quill. Set “theme” has no impact on this control. In the options “theme” can be set. Use “snow” or “bubble” as theme.
MaskedTextbox	Show a masked text box. See how to mask: Pattern		react-maskedinput	Set “theme” has no impact on this control
DatePicker	Shows an Datepicker. Return the value as UTC date formatted.		UI Fabric DatePicker	Is localized over the set language for the form.
Time	Masked time entry box. With or without seconds in the format hh:mm:ss or hh:mm		react-maskedinput	Return absolute seconds calculated form 00:00. “hideSeconds” as set if seconds are shown or not.
InfoText	Shows only an html formatted info Text		UI Fabric Label	Use the “title” to set the text. There you can use html to format it.
Rating	Show a rating (stars) control. Store the rate as integer		UI Fabric Rating
Slider	Show a slider to set a number value		UI Fabric Slider
SpinButton	Show a spin button with a up and down arrow. A Suffix can be set over the “config”		UI Fabric SpinButton	On top of the Properties from UI Fabric also “sufix” can be used in the “config”. E.g “%”. Then the spinbutton can set percentage values (with setp you can set the step of the number count)
Toggle	Similar like a checkbox, but shows a toggle		UI Fabric Toggle	Supports “subrows” and “subcontrols”
TabContainer	Has to be used as parent from the “Tab”.		UI Fabric Pivot	Set the used “Tabs” as “subcontrols”. All other type of controls are ignored. Also “subrows” are ignored
Tab	Show a Tab inside the “Tabcontainer”. Display when active the defined “subcontrols” or “subrows”		UI Fabric PivotItem	Must have as parent control a “TabContainer”
SubmitButton	Shows an PrimaryButton. Call the event onSubmitForm		UI Fabric PrimaryButton	If the form is valid then the button is activated. If not valid then it is disabled. When no “title” is set then it used a default translated text (”send”).
CancelButton	Show an DefaultButton. Call the event onCancelForm		UI Fabric DefaultButton
CustomButton	Show an DefaultButton. Call an action in the “customActions” property from the Form Component		UI Fabric DefaultButton	Define in the JSON attribute “customtype_name” the “typeName” from the “customActions” that should be called at clicking. The formData set in this moment is take over as parameter.
PeoplePicker	Show an PeoplePicker	AsyncFilter	UI Fabric PeopelPicker	Retrieve any Persons filtered with the Data binder “filteredPeoples”. See Data binding. To allow or deny multi selection, set to the config the property "allowMultiple" to true or false
DateTimePicker	Shows and DatePicker and a TimePicker Control		UI Fabric DatePicker and react-times	Set “theme” has only impact on the date picker control, not on the time picker. In the config you can set “theme” “classic” or “material” and “colorPalette” "dark" or "light". The config has both properties combined. In addition of those properties comes the “defaultDateTime”. This sets the DateTime when loaded. If not set, then it use the current DateTime
TimePicker	Shows a time Picker. classic style. With material you get a time picker in the UI Material style.		react-times	Set “theme” has only impact on the date picker control, not on the time picker. In the config you can set “theme” “classic” or “material” and “colorPalette” "dark" or "light". The config has both properties combined. In addition of those properties comes the “defaultDateTime”. This sets the DateTime when loaded. If not set, then it use the current DateTime
FileUpload	Show a DropDown Zone for upload files	DataProvider	drag-drop zone with React	Set the dataprovider_list_configkeys with one Provider that implement ad least the addFile Method to retrieve the files. Additional Properties: DropZoneText, ShowFiles (must be true to show the uploaded files), DropedFilesText (Header Text for Files)
Custom	See Custom Enhancements			Custom Controls has to inherit from FormBaseInput and set to the customControls Property from the Form. The “typeName” defines the control_type name for the control

Info Icon

For allmoste all controls you can add an small (i) at the right side of the control. For this you has to set the “info” Attribute and if you want translate the “info_trans” attribute. This will render an info icon and when you hover it shows an UI Fabric Callout. This Callout can have an action link. For this set “action_link” attribute object.

Configuration from the Controls

Basically you can use in the JSON node for a control the JSON object "config". The most of the properties that are available at the props for the origin control (See column "Implemented Control") can be used here to configure the control.

Here a list of the properties that cannot be overwrite in the config:

Control	Properties / Events
DropDown	id, onChanged, errorMessage, label, selectedKey
CascadingDropDown	id, options
ComboBox	id, errorMessage, onChanged, value, label, selectedKey
ChoiceGroup	id, onChange, label, selectedKey
Checkbox	id, key, label, name, onChange
Textbox	id, key, label, name, onBeforeChange, errorMessage
RichtTex	id, key, onChange
MaskedTextbox	id, key, name, label, onChange
DatePicker	key, strings, formatDate, label, value, onSelectDate
Time	Non can be set at config. Only “hideSeconds” is allowed
InfoText	id, key
Rating	id, key, label, onChanged
Slider	label, key, onChange
SpinButton	key, label, onValidate, onIncrement, onDecrement
Toggle	id, key, label, onChanged
TabContainer	key
Tab	key
SubmitButton	key, type, disabled
CancelButton	key
CustomButton	key
PeoplePicker	key, onRemoveSuggestion, onResolveSuggestions, className, selectedItems, onChange, getTextFromItem, onEmptyInputFocus, onValidateInput
DateTimePicker	DatePicker: key, strings, formatDate, label, value, onSelectDate
TimePicker	trigger, focused, onFocusChange, onHourChange, onMinuteChange, onTimeChange, language, time
FileUpload	key, onDrop

Example

If you want to an placeholder in the Textbox then see the documentation for it (TextField) go to the example with placeholder at "TextField with Placeholder" there you find that you can use "placeholder" as property. so you JSON look like:

"controls": [{
    "id": "text",
    "title": "Textbox",
    "control_type": [ "Textbox" ],
    "config": {
        "placeholder": "This is my placeholder Text"
    },
    "config_trans": {
        "properties": [{
            "key": "placeholder",
            "object_trans": {
                "de": "Placeholder DE",
                "fr": "Placeholder FR",
                "it": "Placeholder IT"
            }
        }]                  
    }    
}]

Databinding and Events

You cannot catch events here or binding data. See:
Events: Even handling
Databinding: Databinding

Translation

If you need to translate some config properties you can use the "config_trans" to do that. More Info see Translations or Home

Validation

Not all controls can used with all validators. See here a list of usable validation combinations:

Control Name	Required	isInteger	isNumber	minValue	maxValue	length	regex	minLength	maxLength
DropDown	x	x (key)	x (key)	x	x
CascadingDropDown	x					x (selected items)	x	x (selected items)	x (selected items)
ComboBox	x	x (key)	x (key)	x	x
ChoiceGroup	x	x (key)	x (key)	x	x
Checkbox	x (Checked)
Textbox	x	x	x	x	x	x	x	x	x
RichtTex	x					x	x	x	x
MaskedTextbox	x	(use “11” as Mask)	x			x	x	x	x
DatePicker	x					x	x	x	x
Time	x			x (amount Seconds)	x (amount Seconds)
InfoText
Rating	x			x	x
Slider	x			x	x
SpinButton	x	Only numbers possible	x	x	x
Toggle	x (On)
TabContainer
Tab
SubmitButton
CancelButton
CustomButton
PeoplePicker	x					x (selected persons)	x	x (selected persons)	x (selected persons)
DateTimePicker	x					x	x	x	x
TimePicker	x					x	x	x	x
FileUpload	x					x		x	x