Text Entry

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
systems.


Properties for Text Entry Component

NameWhen components are placed on a page they appear highlighted blue in the scene tree
and can
be renamed by double clicking in this panel and typing the new name. Components can
also be
set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and SizeSet position and size. As long as measurements are maintained as percentages it
deals
automatically with dynamic layout and resizing for different devices and
orientations.You
can use millimeters to control aspects of size like width or height in order to
create a
text entry box thats size will be maintained across devices.
AppearanceSet the content and placement of the text entry panel.
Entry TypeSelect from a dropdown offering entry of ‘All characters’, ‘Phone Number’, ‘ Email’,
‘URL’,
‘Password’ or ‘Numbers only’.
PromptThis is the Text editor panel to type in the text to display when the user has not
typed
anything and it would otherwise be empty. It is usually an instruction like ‘Type
your name
here’.
Background imageThis is the image which sits behind the text entry box.The Nine slice below can be
used to
manipulate the image.
Focus imageSet the focus image.
Disabled imageSet the image when text entry is disabled.
Resize TypeDropdown to select ‘Scale with screen’ or ‘Millimeters’.
Nine Slice ValuesMaintain the correct proportions for edges and corners of your image. Editing values
in the
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.
MultilineCheckbox to enable multiline text.
Select All on FocusCheckbox that selects all the text when you have the cursor focused in the text box.
Character limitSets a character limit on how many characters can be entered.
Text StyleProvides all the usual properties for style of text including, Base style, Font
size, Font
color, Opacity, Font, Alignment and Tracking.
Empty Text StyleProvides all the usual properties for style of text including, Base style, Font
size, Font
color, Opacity, Font, Alignment and Tracking. Used for the text style when prompts
for text
entry are provided.
Disabled Text StyleProvides all the usual properties for style of text including, Base style, Font
size, Font
color, Opacity, Font, Alignment and Tracking. Used for the text style when text
entry is
disabled.
Form ValidationSet properties to validate the form entries.
Required fieldIf this checkbox is checked then the text box becomes a required field and must have
content
added or the form will not submit.
Validation typeDropdown with options;None, Phone number, Email, Number, Custom regex.
Validation RegexGreyed out unless Custom Regex validation type option is selected from dropdown
above. Opens
an Editor panel to enter validation regex. This property lets advanced users
specific a
custom regular expression to restrict text entered to valid phone numbers, email
addresses,
dates and other structured content.
HelpLinks to Help.
PresetA Preset is a pre-determined set of properties and files for a component. You can
have a
Predefined Preset (Umajin created) or a Custom Preset (custom designed by you).
Where the
component has a Predefined Preset it will automatically be loaded into your app as
the
default when you insert that component.
The ‘LOAD’ button opens the Preset Selector, which has tabs for Predefined and
Custom, so
you can choose which preset to load for your component.
Create your own Preset by building your assets, putting them in your Image folder
and then
selecting them in the Properties panel. The ’SAVE’ button will enable you to name
and save
your preset under the Custom tab.

Events that can Trigger an Action on the Text Entry Component

On FocusAction occurs when the specific text entry panel is focused on.
On Focus LostAction occurs when focus on the text entry is lost.
On TypingAction occurs when typing begins.
On TabAction occurs when Tab is used.
On EnterAction occurs when Enter is pressed.
On Before ValidationAction occurs before validation is started.
On Fail ValidationAction occurs when validation fails.
On Pass validationAction occurs when validation passes.