Using Checkboxes to Enable a Button | Proto.io Prototyping Tool
Learn how to create checkboxes that, when selected, enable a button in Proto.io.
Checkboxes and interactive buttons are a great feature in Proto.io. In this tutorial, we’ll be creating a button that ONLY becomes active once 2 checkboxes are selected.
Step 1: Adding Elements
To begin, add two checkboxes, two buttons, descriptive labels, and an interaction area to your canvas. These can be found in the UI panel.
Each checkbox needs to be inactive. To do this, click on the checkbox. Select Properties, and deselect the “active” box. Do this for both boxes.
To create an inactive button by default,click on the button, and deselect “visible”.
Then, place the Active button overtop of the Inactive.
Once you are ready to add an interaction area, place it off the canvas onto the pasteboard.
Step 2: Creating Variables
Click on settings, then select” variables manager”.
Click “Add Variable”. We’ll be creating 4 variables in total.
For the first, name it : checkboxval1
For type, select numeric
For value, leave blank.
And check the evaluate box.
Then, click save variable.
Follow these exact steps when creating the next three variables:
checkboxval2
noofchecked
showbutton
These variables will be used throughout our project.
Step 3: Setting Up The Interaction Area
Select the Interaction area and click “Add Interaction”.
For trigger, select tap. For action, select variable. For variable name, select noofchecked, which by default is empty. For value type, select custom value. Now, press Shift + { to bring up all variables available. Select the checkbox1val variabl, then +, then shift + { and select checkboxval2.
Let’s recap.
The purpose of this interaction is to calculate the number of checked boxes.
When this area is tapped - the trigger - a new variable is set - the action. The variable is noofchecked, short for Number of Checked, which by default is empty. It’s new value is the combination of the values of both checkboxes.
Step 4: Adding an Interaction to Checkbox 1
Click on a checkbox and then “interactions”. Select” Add Interactions on activation”.
Step 5: Defining the Checkbox 1 Interaction
For trigger, select tap. For action, select set variable. For variable name, select checkbox1val. For value type, select custom value. For new value, input 1. And for delay, select no delay.
Let’s recap what we’ve done:
When a checkbox is tapped - the trigger - a new variable will be created - the action. This variable is the value of checkbox 1, which by default is zero - empty. The new variable is a custom value of 1.
Step 6: Adding a Callback to a Checkbox
To add a callback, check the box beside “Callback”. For action, select “Fire an items event”. For target, select screen. For screen, select “Checkboxes enable button”. For item, select “interaction area 1”. For items event, choose “Tap”. Leave delay as “no delay.
Let’s recap again:
When interaction 1 is completed, another action - a callback - will automatically begin. The purpose of the callback is to start another event - fire an items event. The item is interaction 1, which is located off the canvas. The event that will be fired on the item is a tap.
Step 7: Completing the Checkbox Interactions
Now, save the interaction, then right click on it and select” copy”. Then, right-click on “add interaction on deactivation” and select paste. Now, edit the interaction by clicking on the pencil. All that needs to be done is to change the “new Value” to zero.
By doing this, you are resetting the value of the checkbox to zero when it is deactivated.
Follow the exact same process for the second checkbox - copy and paste to speed things up. The ONLY difference is that the variable name will be checkboxval2, not checkboxval 1.
Step 8: Adding a Callback to the Interaction Area
For action, select set variable. For variable name, select showbutton, which by default is empty. For value type, select custom value. For new value, enter the following java. Without going into detail, it says that If - question mark - that the number of checked boxes equals 2 - double equal signs - , then the new value of showbutton is 1. Otherwise, it is zero. Leave delay. Then select Callback.
Website: https://www.discoverbusiness.us
Google +: https://plus.google.com/+Discoverbusi...
Facebook: / discoverbusiness
Twitter: / discoverbusines
Pinterest: / discoverbusines
Watch video Using Checkboxes to Enable a Button | Proto.io Prototyping Tool online without registration, duration hours minute second in high quality. This video was added by user Discover Business Degrees 21 September 2015, don't forget to share it with your friends and acquaintances, it has been viewed on our site 8,999 once and liked it 54 people.