Input

Input component allow user to input text or paragraph. You can specify a default value or hint to the input box, and choose the keyboard type to each input box.

Usage

In most of the cases, we simply use "Input" component to read user text input and identify the data by storage name. It allows you to get back the user input data by typing ${ NAME YOU DEFINED IN STORAGE NAME } in anywhere of the app.

Action [ Created | Text Changed | Editing Ended | Editing Started ]

Simply click the action you want to define and drag components inside.

Created:

Mostly used to define further UI design within the Input.

Text Changed:

It's used to define action if user changed the Text input within the Input box.

Example

Reload a "Text" component (*Be reminded that you should set a alias to that "Text" component first) displayed on screen when user changed the text input. The logic is showed below. ( ) is used to define the action we selected and [ ] is used to define the properties we set:

Input -> (Text Changed) -> Reload Action [Action: TEXT ALIAS]

Editing Ended:

It's used to define action when user stop typing for a while.

Example

Connect to server database to check if the user email existed. The logic is showed below. ( ) is used to define the action we selected and [ ] is used to define the properties we set:

Input -> (Editing Ended) -> Connect Server -> (Successful) -> Reload Action [Action: TEXT ALIAS, src: available]
                                           -> (Failed) -> Reload Action [Action: TEXT ALIAS, src: failed]

Editing Started:

It's used to define action when user start typing.

Example

Set a timer for user input like 60s then disable the Input box. The logic is showed below. ( ) is used to define the action we selected and [ ] is used to define the properties we set:

Input -> (Editing Started) -> Timer [Duration: 6000] -> (Stopped) -> Reload Action [Action: INPUT ALIAS]

Properties

Simply click a gear on the right hand corner of related "Input" component to edit the properties.

Type [ Text | Notes | Disable ] - It's used to define the type of input box for capturing user input.

• Text - Short text
• Notes - long paragraph
• Disable - User input is not allowed

Default value - Preconfigured the user input into the input box. You may use it to reduce the input works of user such as preconfigured user’s ID, username, user’s preference, etc.

Password [ Yes | No ] - User input will be masked with * when password mode set to Yes.

Placeholder - It allows you to give hint to user that what information shall they provided into the input box.

Placeholder text color - It's used to define the text color of the hint.

Max Length - It's used to limit the characters that user can type into the input box.

Keyboard Type [ Default | Numeric | Email | Phone-Pad ] - Set the keyboard display when user start typing into the input box.

• Default - The keyboard displayed will be follow the default setting of user’s operating system
• Numeric - Keyboard with number 1-9 and *# will be displayed to capture number only input
• Email - TBC
• Phone-Pad - TBC