Text Entry Component
Provides a field for users to type into.
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
|Name||When 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 Size||Set 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.|
|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’, ‘URL’, ‘Password’ or ‘Numbers only’.|
|Prompt||This 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 image||This is the image which sits behind the text entry box.The Nine slice below can be used to 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 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.
|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 size, Font color, Opacity, Font, Alignment and Tracking.|
|Empty Text Style||Provides 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 Style||Provides 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 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 content 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 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.|
|Help||Links to Help.|
|Preset||A 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 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.|