This component lets you gather information from customers using their native device data entry methods (on
screen keyboard, voice, handwriting etc).
You can type in user-friendly prompts and add designer backgrounds
to the form. Type your prompt text into the Empty Text field and it will disappear once the customer starts
typing e.g. ‘Type your name here’.
There is a minimum size to the text entry box which is to simulate the minimum sizes for text entry on
android and IOS
Properties for Text Entry Component
|Name||When components are placed on a page they appear highlighted blue in the scene tree|
be renamed by double clicking in this panel and typing the new name. Components can
set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
|Position and Size||Set position and size. As long as measurements are maintained as percentages it|
automatically with dynamic layout and resizing for different devices and
can use millimeters to control aspects of size like width or height in order to
text entry box thats size will be maintained across devices.
|Appearance||Set the content and placement of the text entry panel.|
|Entry Type||Select from a dropdown offering entry of ‘All characters’, ‘Phone Number’, ‘ Email’,|
‘Password’ or ‘Numbers only’.
|Prompt||This is the Text editor panel to type in the text to display when the user has not|
anything and it would otherwise be empty. It is usually an instruction like ‘Type
|Background image||This is the image which sits behind the text entry box.The Nine slice below can be|
manipulate the image.
|Focus image||Set the focus image.|
|Disabled image||Set the image when text entry is disabled.|
|Resize Type||Dropdown to select ‘Scale with screen’ or ‘Millimeters’.|
|Nine Slice Values||Maintain the correct proportions for edges and corners of your image. Editing values|
Nine Slice will apply to the background image you have selected above.
Top Slice: Stop the top of the image from being stretched.
Bottom Slice: Stop the bottom of the image from being stretched.
Left Slice: Stop the left of the image from being stretched.
Right Slice : Stop the right of the image from being stretched.
|Multiline||Checkbox to enable multiline text.|
|Select All on Focus||Checkbox that selects all the text when you have the cursor focused in the text box.|
|Character limit||Sets a character limit on how many characters can be entered.|
|Text Style||Provides all the usual properties for style of text including, Base style, Font|
color, Opacity, Font, Alignment and Tracking.
|Empty Text Style||Provides all the usual properties for style of text including, Base style, Font|
color, Opacity, Font, Alignment and Tracking. Used for the text style when prompts
entry are provided.
|Disabled Text Style||Provides all the usual properties for style of text including, Base style, Font|
color, Opacity, Font, Alignment and Tracking. Used for the text style when text
|Form Validation||Set properties to validate the form entries.|
|Required field||If this checkbox is checked then the text box becomes a required field and must have|
added or the form will not submit.
|Validation type||Dropdown with options;None, Phone number, Email, Number, Custom regex.|
|Validation Regex||Greyed out unless Custom Regex validation type option is selected from dropdown|
an Editor panel to enter validation regex. This property lets advanced users
custom regular expression to restrict text entered to valid phone numbers, email
dates and other structured content.
|Help||Links to Help.|
|Preset||A Preset is a pre-determined set of properties and files for a component. You can|
Predefined Preset (Umajin created) or a Custom Preset (custom designed by you).
component has a Predefined Preset it will automatically be loaded into your app as
default when you insert that component.
The ‘LOAD’ button opens the Preset Selector, which has tabs for Predefined and
you can choose which preset to load for your component.
Create your own Preset by building your assets, putting them in your Image folder
selecting them in the Properties panel. The ’SAVE’ button will enable you to name
your preset under the Custom tab.
Events that can Trigger an Action on the Text Entry Component
|On Focus||Action occurs when the specific text entry panel is focused on.|
|On Focus Lost||Action occurs when focus on the text entry is lost.|
|On Typing||Action occurs when typing begins.|
|On Tab||Action occurs when Tab is used.|
|On Enter||Action occurs when Enter is pressed.|
|On Before Validation||Action occurs before validation is started.|
|On Fail Validation||Action occurs when validation fails.|
|On Pass validation||Action occurs when validation passes.|