textBox

The textBox layer allows user input in text form. It is used when the user is required to enter information such as a username.

Field Configurations

Key	Type	Description	Default Value
"autoComplete"	Object	undefined	null
"autoCorrection"	Boolean	Use the system's autocorrect features.	false
"automaticCapitalisation"	AutomaticCapitalisation	Use the systems's automatic capitalisation feature.	"sentence"
"clearButtonColor"	Color	The color of the clear button.	"#cccccc"
"closeKeyboardOnReturn"	Boolean	Close the keyboard if the user presses the return key.	false
"font"	String	Font name to use.	null
"fontColor"	Color	The font color.	"#000000"
"fontScalable"	Boolean,String	Determines if this font will be scaled by the OS font scale factor.	false
"fontSize"	UnitSize	Font size to use.	10
"hasClearButton"	Boolean	Shows a clear button at the end of the text box.	true
"hint"	String	The placeholder hint.	null
"hintFontColor"	Color	The placeholder font color. Default: System placeholder color.	null
"iOS_scrollParentGridToSelf"	Boolean	iOS only. Workaround to let a grid scroll it's text box to the current view.	false
"inputAccessoryBackgroundColor"	Color	The background color of the input accessory view of the keyboard.	"#ffffff"
"inputAccessoryEnabled"	Boolean	Determines, if the text box should display a keyboard with accessory view.	true
"inputAccessoryHeight"	Number	Height of the input accessory view of the keyboard.	56
"inputAccessoryTitle"	String	Text of the done button of the keyboard accessory.	"Localized verison of 'done'"
"inputAccessoryTitleColor"	Color	The font color of the input accessory view label of the keyboard.	"#000000"
"inputAccessoryTitleFont"	String	Font to use for the input accessory view label of the keyboard	null
"inputAccessoryTitleFontSize"	UnitSize	Font size to use for the input accessory view label of the keyboard.	12
"inputType"	TextBoxInputType	Defines the text box's content type. Does not affect the keyboard type. Translates to UITextContentType on iOS. The value text enables all kinds of system's autocorrect features.	"text"
"isPassword"	Boolean	Use this to have a password text box, that only shows dots instead of the actual characters.	false
"keyboardLayout"	KeyboardLayout	Changes the keyboard layout. Translates to UIKeyboardType on iOS.	null
"lineBreakMode"	LineBreakMode	The line break mode.	"truncateEnd"
"maxLines"	Number	Line count.	1
"preferredLanguage"	String	The preferred keyboard language. This is a ISO 639 language code.	null
"readOnly"	Boolean	undefined	false
"returnActions"	Array	Action to fire if the return key was pressed.	null
"returnKeyType"	ReturnKeyType	Changes the type of the return key on the keyboard. Translates to UIReturnKeyType on iOS.	null
"scaleToFit"	Boolean	If true, the text box will automatically shrink to its minimum size.	null
"scaleType"	ScaleType	Defines how an element should fit into the layer's frame.	null
"textAlign"	TextAlign	The alignment of the text.	"left"
"useBackground"	Boolean	Determines whether the text box should look like a system text box.	false

Inherited

From Form Layer

Form Layer

Field Configurations

Key	Type	Description	Default Value
"form"	String	Name of the form e.g. used to access the value of the form outside of its view.	null
"formDataKey"	String	Datakey used to access the value of the form layer.	null
"onChanged"	Array	Actions to execute when the form value is changed.	null
"settingsDataKey"	String	If set, the value of the form layer will be written into the _settings table. DEPRECATED Use onChanged to save values in the database.	null
"validationErrorMessage"	String	Message to display in case the input is invalid.	null
"validationExpression"	String	Regex to use in the validateForm action.	null
"valueActionIndex"	String	Index of the value action.	null
"valueActions"	Array	Actions to be executed when a specified value is set e.g. hiding a layer when a checkbox is selected.	null

From Base Layer

Base Layer

Field Configurations

Key	Type	Description	Default Value
"_value"	Value	[PREVIEW] Dynamic value of the layer.	null
"accessibilityAppendState"	String	Defines this layer appends its state to the accessibility text.	null
"accessibilityText"	String	Text for accessibility navigation. Can be translated.	null
"actions"	ActionList	List of actions, which will be executed when the layer is tapped.	null
"borderColor"	Color	The color of the border in hex color value.	null
"borderRadius"	UnitSize	The radius applies to all corners; with a borderWidth of 0 the border is not drawn and radius is set anyway.	0
"borderWidth"	UnitSize	The width of the border.	0
"bottomLeftRadius"	UnitSize	Radius for the bottom left corner.	0
"bottomRightRadius"	UnitSize	Radius for the bottom right corner.	0
"classes"	Array	List of classes for layer styles.	null
"conditions"	Conditions	List of conditions to alter the layer state.	null
"constraints"	Constraints	A list of constraints defining the position of the layer in a layout.	null
"consumesKeyboard"	Boolean	This layer will be used to shrink, if a keyboard is shown.	null
"dataKey"	String	Name for assigning data to this layer.	null
"focusColor"	Color	The highlight color of this layer when it is focused. Mainly used on TV. If no color is provided, the pressedColor will be used.	null
"hidden"	Boolean	Indicates whether the layer is hidden. Default: false.	false
"isAccessibilityElement"	String	Defines if this layer is important for accessibility navigation. The default depends on the layer type.	null
"layerRotation"	Number	The layer is rotated by the specified degree.	0
"name"	String	Unique name in the layout. Used for alignment or actions.	null
"opacity"	Number	The opacity of the layer.	1
"overInsetBottom"	Boolean	Determines if this layer ignores the save space at the bottom of the device.	false
"overInsetTop"	Boolean	Determines if this layer ignores the save space at the top of the device.	false
"pressedColor"	Color	The highlight color of this layer when it is pressed. Mainly used on TV. If no color is provided, the focusColor will be used.	null
"safeArea"	SafeAreaTypeObject	Determines the safe area behaviour.	null
"shadowElevation"	Number	The elevation of this layer for casting shadows.	0
"state"	String	The state the layer will use as default.	"default"
"states"	LayerStates	A list of named states that affect the appearance of the layer.	null
"topLeftRadius"	UnitSize	Radius for the top left corner.	0
"topRightRadius"	UnitSize	Radius for the top right corner.	0
"touchFeedback"	TouchFeedback	Determines if the layer should show a touch feedback if touched.	"visible"
"trackingKey"	String	Defines a key for a scroll event.	null
"type"	LayerType	The type of the layer	null
"value"	Value	(Initial) value of the layer.	null

Examples

Example 1: Create a text box for a nickname.

Goal: Create a text box with a specific size, font and hint.

To achieve this the following code can be used:

{
  "type": "textBox",
  "name": "nickName",
  "dataKey": "nickName",
  "formDataKey": "nickName",
  "font": "Raleway-Regular",
  "fontSize": "30dp",
  "hint": "Please enter your nickname",
  "hintFontColor": "#585B5B",
  "constraints": [
    {
      "type": "pos",
      "anchor": "nw",
      "x": "05%",
      "y": "40%"
    },
    {
      "type": "size",
      "width": "90%",
      "height": "70pt"
    }
  ]
}

Result:

A textBox has been created.

Example 2: textBox with autoComplete

Goal: Create a textBox with autoComplete possibility. Autocomplete should be a zip code, which are defined in extra data base

To do so, you have to define resultTemplate, displayTemplate, displayLayout and specific query in autoComplete block:

{
  "type": "textBox",
  "formDataKey": "autocomplete",
  "fontColor": "#000000",
  "textFont": "Roboto-Regular",
  "fontSize": "20pt",
  "scaleType": "alignBottomLeft",
  "hint": "Please enter your zip code",
  "hintFontColor": "#585B5B",
  "keyboardLayout": "NumberPad",
  "autoComplete": {
    "query": {
      "table": "autocomplete",
      "name": "zipLike",
      "ranked": true
    },
    "resultTemplate": "zip_result",
    "displayTemplate": "zip_display",
    "displayLayout": "p_text",
    "displayAspectRatio": 2,
    "minCharacters": 2,
    "horizontalOffset": "-20dp",
    "verticalOffset": "5dp"
  },
  "constraints": [
    {
      "type": "pos",
      "anchor": "nw",
      "x": "05%",
      "y": "40%"
    },
    {
      "type": "size",
      "width": "90%",
      "height": "70pt"
    }
  ]
}

The autoComplete configuration is defined in corresponding database table.

Result:

A textBox with autocomplete functionality has been created.