Multiline text input in App Inventor

The App Inventor TextBox control supports both single line and multi-line input; the TextBox control default to single line mode – and you may not have realized it can support multiple line text input too!

In single line input, text is entered using the on screen keyboard, followed by the Enter key (or you can use an external Bluetooth keyboard). Once the enter key is pressed, the on screen keyboard goes away.

Multi-line mode is enabled by checking the Multiline checkbox item in the control properties. However, the Enter key is used to enter multiple text lines – that means you need to complete the multiline text entry by adding another control, such as a Done button.

The multi-line control is easy to use – and needs just a single line of blocks code to implement! Describing the operation of the control takes more time!

App View

The multiline TextBox looks like a single line text box, as shown here, after entering “first line” into the TextBox control as the app is running.

Screenshot_2015-04-08-18-03-40

To enter a second (or third…) line, tap the green/blue Enter button at the lower right of the onscreen keyboard. Here is the result after typing three lines of text:

Screenshot_2015-04-08-18-03-57

The Designer View

To set up a multiline TextBox, drag the TextBox control from the palette to the Canvas. Add a Button control and change the text on the button to say “Done:.

MultilineDesigner

 

Click the mouse (or select) the TextBox control and then refer to the control’s properties on the right side of the Designer view. In the Properties list, scan down to the MultiLine item and check the checkbox.

MultilineProperties

 

Blocks View

After all that description, how do we implement this feature? With one block to hide the keyboard after data entry!

MultilineBlocks

The trick for the multiline input box is to set the multiline property to true, and then add another control to indicate when data entry is finished. Here, we use a Button and handle the click event by calling the HideKeyboard method of TextBox1.

To obtain the entered text, refer to the Text property of TextBox1:

Mutliline-text

Easy, huh?

Please Share on Social Media

Please click on the buttons below this post to share with your friends on Facebook or other social media.

If you are not already following this blog, click on the following links to like on Facebook, add to your Google+ circles or follow on Twitter or in your RSS news reader. Thank you for visiting!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s