Update 2:<\/strong> Also, you can set the button component’s Enabled<\/em> property to false<\/em>, so that the button will not function. Then set Enabled<\/em> to true<\/em> once the data entry meets your app’s requirements.<\/p>\n What we want to do is have the button look like it is “grayed out” and unusable until after some data is entered into the field. In the text box, I have set the\u00a0 “hint” value to “Button available when data entered”:<\/p>\n <\/p>\n Set up this app by dragging a horizontal layout to the top, and then adding a label (with its text changed to “Data entry” and a text box data entry field to its right.<\/p>\n Add a button. On the button’s properties, set the text color to white (instead of the usual black). This makes the button appear to be “grayed out” (see screen shot).<\/p>\n Drag a Clock<\/em> component from the Sensors category, to the designer window. On the Clock<\/em>‘s properties, set the timer interval to a small value such as 250 milliseconds. The Clock<\/em>‘s event handler will continuously check the data entry field for proper data.<\/p>\n The implementation is easy. First, set up a global variable, which I have named DataEntered<\/em> and set it to false<\/em>. Once sufficient or correct data has been entered, the code changes DataEntered<\/em> to true<\/em>.<\/p>\n The btnEnterData.Click<\/em> event handler consists of an if-then<\/em> block. It checks to see if DataEntered<\/em> is true; if it is, then it executes the blocks of code for processing the button (in this example, I have left this blank – insert your own code blocks to do something!)<\/p>\n The guts of the program are handled in the Clock’s Timer<\/em> event handler. Every 250 milliseconds, we do a simple test to see if data has been entered and if at least 4 characters of data have been type in the text box. If so, then we set DataEntered<\/em> to true and we turn the text color on the button to black so that the button appears to now be active. You can add more complex tests here – has a date been entered in the proper format? Has a password been entered with at least one upper case letter and one number? You can implement whatever rules you want to have here.<\/p>\n The text box control has two events – gotfocus<\/em> and lostfocus<\/em>. Initially I tried to use those to implement this feature, but this approach does not work. We want the button to change to “active” as soon as the proper data has been entered. But the gotfocus<\/em> event occurs only when you first tap the text box entry field and lostfocus<\/em> occurs only when you have moved elsewhere in the user interface.<\/p>\n What if you have more than one control you wish to have “grayed out”? Simple implement the same code as above, but add a 2nd (or 3rd) Clock component to your app. Your app can have multiple clocks. Then implement the appropriate code for the additional clock event handlers and button handlers.<\/p>\n You could also implement this feature for say, a series of check boxes. For example, suppose you have 4 check boxes on screen and the user may select 1 to 4 of them, but the app should not continue until at least one box has been selected. Your “Continue” button would be grayed out until at least one check box has been selected. Once a check box value has been selected you can use code similar to the above to activate the button.<\/p>\n GrayBtnDataVerify.aia<\/a><\/p>\n If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page<\/a>.<\/p>\n Thank you for visiting! — Ed<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" A reader asked\u00a0 if it might be possible to “gray out” a button so that pressing it has no action, until appropriate data has been entered? The answer is “Yes, we can do this.” After some thought, I came up with the following simple solution. Update 1: Check the comments to this post for a … Continue reading Can you “gray out” a button until data entry is complete?<\/span> User Interface<\/h2>\n
![\"Screenshot_20160317-202312\"](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/03\/Screenshot_20160317-202312.png\")
<\/a>After the user has entered some data, the button becomes “active” as shown here:<\/p>\n<\/a><\/h2>\n<\/h2>\n
Designer View<\/h2>\n
<\/a>The components list – I renamed the text box to txtDataEntry<\/em> and the button control to btnEnterData<\/em>.<\/p>\nBlocks View<\/h2>\n
<\/a><\/p>\nTricks<\/h2>\n
Download Source Code<\/h2>\n
E-Books and Printed Books<\/h2>\n
\n
\nStep-by-step guide to easy Android programming<\/li>\n
\nStep-by-step guide\u00a0to\u00a0Advanced features including TinyDB<\/li>\n
\nStep-by-step TinyDB, TinyWebDB, Fusion Tables and Files<\/li>\n
\nStep-by-step guide to graphics, animation and charts<\/li>\n<\/ul>\n