SKIP AHEAD TO
What is the App Studio?
Blocks
Property Editor
Variables, Operators and Conditions
Validator
Preview
Other App Studio Basics
What is the App Studio?
Once a Solution is created, the App Studio is where you can intuitively start building or editing your own Checkbox App using simple drag-and-drop.
Blocks
Blocks are the components that make up Checkbox Apps and can be accessed via the left panel of the Studio using drag and drop.
Basic Anatomy of a block:
While each block is arranged slightly differently, these components are common to most blocks:
- Port/Node: This is on the right hand side of a block. When you hover over it, your mouse will change into a cross. This can then be used to draw a routing arrow, which connects one block to another in the sequence you’d like them to occur.
- Block Header: This is the “Title” of a block, that you can use to indicate the purpose of a page to your end users.
- Block Description: This helps you identify what the function of the block is, and is not shown to your end users.
Each block has a specific function, which generally falls under one of the following categories:
Try it yourself: Start by dragging a FORM block from the left panel on to the canvas and connecting it to the start block.
To customise these blocks to your needs, we use the Property Editor that pops up on the right panel of the App Studio when you click into any block or routing arrow.
Property Editor
The Property Editor helps you change the content and behaviour of a selected block or routing arrow. It pops up as the right panel in the App Studio when you click on a block or routing arrow.
Each block has different components that can be customised in the Property Editor. For example, a FORM block's Property Editor shown below includes components specific to FORM blocks, such as the “OPEN FORM BUILDER” button, which allows you to specify the data you want to collect from or show the app’s end-users.
Try it yourself: Customise the header and block description of the FORM block you added in, by clicking on the grey line beneath the respective headers on the property editor.
Note: Checkbox auto-saves all your work, but it’s best practice to hit the 'SAVE' button at the bottom of the Property Editor if you make any changes.
Learn more about the Property Editor.
Now that we’ve mastered block basics, let’s learn how to add content to our app. In Checkbox, we have three main tools for creating and manipulating content: variables, operators and conditions.
Variables, Operators and Conditions
In Checkbox we use variables and operators to tell our app how to present and manipulate content.
Variables
Variables are the digital equivalent of a storage box. When building an app on Checkbox, variables act as “empty boxes”. Some of these variables are filled in by us as app builders (e.g. Paragraphs), while others are placeholders which our end-users can then add content to when they use our app.
For example, the image below shows a FORM with a variable. This variable is a text field, where the user can type to add their name. To prompt the user about what to enter here, we've asked the question "What is your name?".
Notice that our variable (named TXT2) acts as an “empty box” - our end-user could write John or Mary or any number of things there (depending on what their name is).
Try it yourself:
To create your first variable:
- Click on your form block, and then on the “FORM BUILDER” button in the property editor.
- Click on “Radio” from your left panel, and use the property editor to customise it. First, in the Question section of the Radio Property Editor, type our user prompt: "Do you like Cats or Dogs?". Then in the options section below, create the two options “Cat” and “Dog”.
Learn more about Variables.
Operators
Operators in Checkbox can be thought of as symbols that represent an action for our app to evaluate. Some of these will be familiar - for example, the symbol “+” is an operator that means “plus” and tells our app to add the things on either side of it.
Other operators may be new to you - for example, the combination of an exclamation mark and an equals sign (written as “!=”) means “not equal to”, and tells our app that what is on the left of the operator should not be the same as what is on the right.
Learn more about Operators.
Conditions
A condition is a statement we write using operators and variables, which can be either true or false depending on the response given to a variable in our app. When our end user-reaches the condition in the app sequence, our app evaluates the condition behind-the-scenes, and if it is true, one of the following will happen:
- If the condition is written on a routing arrow: the user is sent down that path. This is useful in cases where we only want our users to see specific blocks. For example, if our end user specifies that they have a dog from a radio button with the options “Dog” or “Cat”, they will be directed to the page to fill in information for their dog and vice versa.
- If the condition is written on a variable: The variable is shown to our end user. This is useful when we need to collect certain information in specific situations. For example, if we ask our end-user to specify their title from a dropdown which has “Mr”, “Ms”, “Mrs” and “Other”, we can use conditions so that when a user selects “Other” a text field pops up for our user to specify what their title is.
The general format of a condition is:
| Variable Name | Operator | Value | Example |
|---|---|---|---|
| RAD2 | == | "Dog" | RAD2 == "Dog" |
Using our earlier example, we want to ask our end-user to specify which dog breed is their favourite - but only if they say “Dog” in response to the first question. We can build this into our app with the following condition:
RAD2 == “Dog”
Try it yourself
In your form:
1. Add Text field with the question “What is your favourite dog breed?”
- Toggle “Conditional” ON in the property editor of the newly created text field
3. Copy the condition RAD2 == “Dog” to the “Show” section that pops up when the "Conditional" toggle is ON.
Note: for the condition to work, the variable name has to match the name of the radio variable in your app. Double-check this by clicking on the radio variable, copying the variable name from the property editor, and pasting it to replace RAD2 in the condition above.
Note: The video above uses Checkbox's condition auto-complete feature to complete the condition (instead of copy-pasting the condition listed above). To use this, start typing in the 'Show If' section of your condition (which appears when the 'Conditional' toggle is on), and select the radio variable. Hit your space bar once to select '== (equals to)' from the available operators, and then again to select 'Dogs' from the radio options.
Learn more about Conditions
To test how this works from the end user perspective, we can use the Preview function
Validator
Checkbox flags errors in your App using its error detector (Validator) to indicate App-breaking issues such as:
- Blocks being unreachable
- Referencing variable names that don't exist in the application
- Conditions being written incorrectly
For example, if you are making an app and you have two blocks that aren't connected (and hence can't be reached by the end user), the Validator will flag them at the bottom of the canvas as shown in the image below:
Blocks that have errors will be red. Additionally, clicking on an individual validator error will take you to the specific block where the error is located so you can correct it easily.
Learn more about the Validator here.
Preview
Previews are accessed through the App Studio to preview the flow of your App from the end-user perspective. App authors typically use Previews while building their App to ensure that the app works as intended.
Other App Studio Basics
Basic App Studio controls:
| Feature | Description |
|---|---|
| Guides | Alignment lines for your blocks (click Guides at the top of your studio grid to turn this feature on/off) |
| Select multiple blocks | Hold shift and drag your cursor to highlight multiple blocks that you wish to select and freely move the blocks in bulk |
| Zoom in / Zoom out | Click zoom in / zoom out at the top left of your Studio grid (or scroll up or down with your mouse scroll) |
| Delete blocks |
Click on a block then hit backspace or click Delete |
| Finish Editing |
Allows you to exit the App Studio and return to the Solution Homepage |
- Blocks can be duplicated by clicking the copy icon on the corner of a block when selected
- Keyboard Shortcuts
That’s a wrap on the basics! Click ‘NEXT’ to move on to building your first app.