4. Building Your First No-Code Solution

Note: We recommend reading our “Mastering Studio Functionality” article to pick up Checkbox basics if you haven’t already

Please allow 30mins - 1hr to complete this App. 

Objective

Let's build a Solution that allows an end user, an employee, to declare their expenditures and determine whether or not they are within their budget of $10,000.

This Checkbox Solution will include:

1. App Introduction
2. Employee Confirmation
3. Collect Employee Information
4. List of Expense Items
5. Expenditure Calculation
6. Transcript for Review
7. Generated Document
8. Automated Email
9. End of Assessment

The end result should look similar to the following:

 

1. App Introduction

The end user must first be introduced to what the App they are about to go through is. Let’s keep it simple for this budgeting tool.

1. First, create an App using the instructions here under the “How to Access the App Studio” section
   
2. Click into the Start block
3. In the Header of the Property Editor, type “Welcome to the Budgeting Tool”
4. In the rich text editor of the Property Editor, type:
   
   “This is a budgeting tool. It should take less than 5 minutes to complete.
   
   Please click 'START' to begin”
   
   Note: It is best practice to bold and align “Please click ‘START’ to begin” to the right as shown in the screenshot below to maximise the end user experience to ensure that they know exactly what to do next when they land on the START page.
   
   

NICE! Check your current progress in Preview. Your Start block from the end user perspective should look like the screenshot below:

 

 

2. Employee Status Confirmation

Determining whether an end user is an employee is a simple Yes/No question. Hence, a Yes/No (YN) block is sufficient for asking this question.

1. Before we use a YN block, let’s clearly identify this section of the App for the end user to have visibility over their progress using a SECTION block. Drag in a Section block (found on the left block panel under the “workflow” section) and connect it to the Start block.
   
   
2. In the SECTION block, add the following sections:
   
   a. “Employee Status Confirmation"
   b. “List of Expense Items"
   c. “Expenditure Calculation”
   d. “Review"
   e. “Assessment Complete”
   

   Note: Sections b - e will be used later on in other SECTION blocks.

   
3. In the drop down of the SECTION block, select “Employee Status Confirmation”
   
   
   
   
   
4. Drag a YN block into the Studio
   
   
5. Connect the YN block to the SECTION block from the routing node
   
   
6. In the Header of the Property Editor of the YN block, type “Employee Status”
   
   
7. In the textbox (rich text editor) of the Property Editor, type “Are you an Employee?”
   
   
   
   

   This will allow the end user to answer Yes or No to whether or not they are an employee.

   • If they respond yes, they will be taken down the route connected to the green node of the YN block
   • If they respond no they will be taken down the route connected to the red node of the YN block

   To allow the end user to have greater clarity of the definition of an “Employee” while they are going through your App, let’s add what we call a “tip”.
   
   

8. Click on “ADD A TIP” in the Property Editor of the YN block
   
   
   
   
   
9. Add the title “Definition of “Employee”” and add the description “A worker that is not a contractor.” as shown in the screenshot below.
   
   
   
   

WELL DONE! Check your current progress in Preview again. Your YN block from the end user perspective should look like the screenshot below:

 

 

3. Collect Employee Information

If our end user has confirmed that they are an employee, we need to collect some brief details such as their name and email address. This can be done through a FORM block.

1. Drag in a FORM block and connect it to the green node of the YN block (so only those confirmed as employees in the YN block will fill out the form).
   
   
   
   
   
2. Click on “OPEN FORM BUILDER”
   
   
3. Click on the “Paragraph” field on the left panel to add it to your FORM, and in the textbox (i.e. rich text editor) on the right panel, type in “What is your name?” in bold
   
   Note: It is best practice to bold paragraphs that pose a question or prompt for end user input.
   
   
   
   
   
4. Highlight the “name” and click on the tooltip icon on the very end of the toolbar in the textbox
   
   
   
   
   
5. Add the following text to the tooltip box “Please list your name as it appears on your employment contract”. Click the tick icon to confirm the changes.
   
   Note: You will notice that the text “name” now has a dotted underline. If you hover over the word "name", the customised guidance text will be displayed.
   
   
   
   
   
6. Drag in the “Text Input” field on the left panel into the FORM and change the Variable Name to “Name”
   
   Note: This name text variable “Name” will be “referenced” in the LIST block we will add in next.
   
   
   
   

   What is referencing in Checkbox?
   Referencing in Checkbox refers to displaying a variable elsewhere in the app. In Checkbox, we use two curly brackets (found next to the P button on your keyboard) on either side of the variable name to tell our app to reference the variable.

   For example, if the first question in an app is “Please enter your name” followed by a text variable called “Name” to allow them to type their name, on the next page of the app, we can write Hi {{Name}} to make the app feel more personalised.

7. Drag in or click onto another “Paragraph” field from the left panel and type “What is your email?” in bold
   
   
   
   
   
8. Drag in or click onto another Text Input field from the left pane
   
   
9. For the Text Input field added in step 8, select the Field Validation “Email” and rename the Variable Name to “Email”. See screenshot below
   
   
   
   
   
10. Drag in or click onto another Paragraph field from the left panel and type “Please click ‘Next’ to continue” in bold and align to the right
    
    Note: Adding this extra paragraph is best practice to maximise the end user experience, ensuring that they know exactly what to do after filling in the FORM.
    
    
    
    
    
11. Go back to your App Studio and drag in an END block to connect to the red node of the YN block.
    
    Note: This ensures that you are filtering out non-employees from your App.
    
    
    

GREAT JOB! Check your current progress in Preview again. Your FORM block from the end user perspective should look like the below screenshot (if they confirm that they are employees): 

 

 

4. List of Expense Items

Once the end user has confirmed that they are an employee, we want to gather all the expenses incurred by the employee. Hence, we will use a LIST block to gather these expenses, as it is the easiest way to collect a batch of responses.

1. Again, drag in a new SECTION block and connect it to the previous FORM block
   to allow the end-user to see their progress through the app.
   
   
2. In the drop down of the SECTION block, select “List of Expense Items”
   
   
   
   
3. Drag a LIST block into the Studio and connect it to the SECTION block
   
   
4. In the Header of the Property Editor of the LIST block, type “Expenditure Items”
   
   
5. In the textbox (rich text editor) of the Property Editor of the LIST block, type 
   
   “Hi {{Name}},

   Please list any items of expenditure that you've had over the past 12 months.”

   in bold so the end user can understand what they need to input into the list.
   
   Note: Here, we are personalising the LIST page by referencing the {{Name}} variable from the previous FORM block. We are also bolding the text as it is best practice to bold questions or prompts for user inputs.
   
   
   
   

Note: A LIST variable holding all user inputs in the list has now been created that can later be “referenced” in the TABLE block we will be using next to build this App.

AWESOME job! Check your current progress in Preview again. Your LIST block from the end user perspective should look like the below screenshot:

 

 

5. Expenditure Calculation

A TABLE block is most appropriate for letting an employee input the quantity and price of each expense item, as well as calculate the grand total of the expenses, through its spreadsheet functionalities.

1. Again, drag in a new SECTION block and connect it to the LIST block to clearly identify this section of the App for the end user to have visibility over their progress
   
   
2. In the drop down of the SECTION block, select “Expenditure Calculation” 
   
   
3. Drag in a TABLE block into the studio and connect it to the SECTION block
   
   
4. In the Header of the Property Editor of the TABLE block, type “Expenditure Calculation” and in the textbox

   “Thanks for doing that {{Name}},
   
   Please list all your expenditure.”
   
   

5. Click on 'OPEN TABLE BUILDER’
   
   
   
   
   

6. So we have more space to work, drag the bottom right corner of the table to create additional rows and columns like below (i.e. A-D columns and 5 rows)
   
   
   
   Note: You can also right-click on any of the letters or numbers to add/delete columns and rows respectively
   
   
7. In each respective column of row 1, type in “Item”, “Quantity”, “Price” and “Total”. This will tell your user what should be entered into each column during the assessment
   
   
8. Click on the number "1" at the start of row 1 of the table and toggle “Header Row” to create a header format for row 1
   
   
9. To reference the LIST variable created earlier, type the variable name for the LIST in cell A2 in double curly braces (In our example, it is {{LIST12}}, but make sure you check your own LIST block for the correct variable name).
   
   Note: By referencing the LIST variable like this, the App will dynamically add a new table row for each item in the list.
   
   
   

   Note: To find the name of the variable you want to reference,  press 'Show Logic' in the navigation bar of the Studio
   
   
   
   

10. Click into cells B2 and C2 and change the cell type to 'Number Input' so the user's inputs will be read as numbers and hence can be used to calculate the Gross Total, GST and Grand Total (done in next step).
    
    
    
    
    
11. To determine the grand total, we need to calculate the total cost of each item, the gross total of all these items, and the GST for each item.
    
    To calculate the values, reference the following equations (as shown below), and label the cells next to them appropriately.

Notes: 

• TABLE blocks in Checkbox use similar syntax to spreadsheet programs like Microsoft Excel. To learn more about Table syntax and other functionalities, click here.
• To make the Gross Total, GST and Grand Total amounts appear as a dollar figure, type a '$' in the 'Enter Prefix' section of the property editor for cells D3, D4 and D5.
  
  

We’re halfway there! Check your current progress in Preview again. Your TABLE block (from the end user perspective) should look like the screenshot below:

 

 

Transcript for Review

The TRANSCRIPT block allows the end-user to review their previous responses and make any edits if necessary before progressing the Assessment. For this reason, TRANSCRIPT blocks tend to be placed near the end of the App after all end user responses have been collected.

1. Again, drag in a new SECTION block and connect it to the TABLE block to clearly identify this section of the App for the end user to have visibility over their progress
   
   
2. In the drop down of the SECTION block, select “Review”
   
   
   
   
   
3. Drag in a TRANSCRIPT block and connect it to the SECTION block
   
   

We’re almost done! Check your current progress in Preview again. Your TRANSCRIPT block (from the end user perspective) should look like the screenshot below:

 

 

6. Generated Document

Now, this is the exciting part! We want to generate a report of the table calculations and provide advice about whether the employee is within the $10,000 budget or not.

1. Again, drag in a new SECTION block and connect it to the TRANSCRIPT block to clearly identify this section of the App, so that the end user has visibility over their progress
   
   
2. In the drop down of the SECTION block, select “Assessment Complete”
   
   
3. Drag in a DOC GEN block and connect it to the SECTION block
   
   
4. Edit the Report File Name to “Budget Report” and check the “Use docx template” checkbox
   
   
5. (Optional) You can also choose the output format of the report between a .DOCX format or .PDF format.
   
   
   
   

   At this point, we want to create and upload a rich style document (e.g. Word document) that will display the budgeting table and conditionally determine whether the employee is within the $10,000 budget or not by referencing variables and conditions inside the document.
   
   This document is highly customisable and can be designed to include your organisation’s branding and logos. It can be downloaded by the app’s end-user as a handy summary of all the information they gained from using the app.
    

6. Luckily, we have prepared a document for you already! Download this document template and replace the hashtag (#) placeholders for the TABLE reference variables (i.e. TBL#) to reference the relevant variables in your table’s cells. For example, TBL#_A2 to TBL14_A2.
   

   Note: To check your TABLE reference variable, click “Show Logic” in Studio.
   
   Download sample template
   
   

   What’s happening here?
   

   To emulate the App’s table Inside the document, we have created a regular Word table inside the document and inserted the variables from the App’s TABLE block using double curly brackets (e.g. {{TBL14_D3}}) like we do when referencing variables inside our app. This allows our word document to talk to our app, pulling the figure in TBL14_D3 into the end-user report.
   
   

   So that we get the same dynamic rows from our app table in our end-user report, we have used a LOOP function for the first row under the header of the table. What this does is tell our word doc to create a new row for every expenditure item. For a LOOP function to work, a LIST variable must be referenced at the start (i.e. LOOP) and end (i.e. ENDLOOP) of the function. You’ll recall that our expenditure items come from the list we have referenced {{LIST10}} inside the TABLE block (TBL14) in cell A2, therefore the syntax is LOOP(TBL14_A2) and ENDLOOP(TBL14_A2). Any variables referenced within the loop (i.e. the row under the header) must add the suffix “.item” (e.g. {{TBL14_B2.item}}). 
   
   

   We then created 2 conditions to give our end-user advice depending on whether the employee is within or not within budget. Conditions are written the same way as in our app - the only difference is we use double left curly brackets and a hashtag (#) to indicate the start of a condition, and the double right curly brackets to tell our document where the end of the condition is. Anything between the condition and the {{/}} syntax is what we want to show our end-user if the condition is true.
   
   

   In this case, if TBL14 cell D5 (grand total) is under 10,000, we will display “You are within budget” but if TBL14 cell D5 (grand total) is over 10,000 we will display “You are not within budget”.

   Learn more about the Rich Style Document Template.
   

   
   
   

   Note: the green highlights on conditions are created through word add-in, and are not required. This document can also be customised to include your company’s branding and logos, fonts, headers and footers in line with Word’s normal functionality.
   
   
   

7. Upload your amended report to the DOC GEN block by clicking on “UPLOAD DOCUMENT TEMPLATE”
   
   

GREAT! Since the DOC GEN block is a back-end block, the end user will not be able to see the generated document until the END block that we will customise shortly.

Note: You can also add a VIEW DOC block after the DOC GEN block to allow the end-user to preview the document. However, given that this is a short and simple App, this functionality can be covered in the END block in “8. End of Assessment”.

 

 

7. Automated Email

Automated emails can be sent out using the EMAIL block. The email subject and body can be fully customised and previous transcripts and generated documents can also be attached.

1. Drag in an EMAIL block and connect it to the DOC GEN block.
   
   
2. Click onto “OPEN EMAIL BUILDER”
   
   
   
   
   
3. Specify who you want to send it to (try sending it to yourself by using [[current_user_email]] or simply use the end user email input variable {{Email}}), customise the email subject and body.
   
   TIP: Give your emails that personal touch by referencing variables created earlier! For example, if you have a variable called “Name” that asks the user to specify their name at the start of the assessment, you could start the email body by saying
   
   

   For example:
   
   Subject:
   
   “Budgeting Tool Outcome Report”

   
   Body:
   
   “Hi {{Name}},

   Thanks for completing the app, here's your report.”
   
   
   

4. Check the “Attach Transcript” and “Attach Reports” checkboxes and specify the report you want to attach documents to the email using the “Attached Reports” drop-down. Learn more about EMAIL blocks.
   
   
   

Last step next!

 

 

8. End of Assessment

Finally, we need to let the end user know that they have come to the end of the App. Optionally, you can allow the end user to download the document at the end.

1. Drag in an END block and connect it with the EMAIL block.
   
   
2. Edit the Message to “Assessment Complete! Please download your Budget Report below.”
   
   
3. (Optional) Toggle “View Doc” and select the relevant report using the drop-down to allow the end user to download the Budget Report
   
   
   

ALL DONE! Check your current progress in Preview again. Your END block from the end user perspective should look like the below screenshot:

Make sure to do a couple of run throughs of the whole app in Preview to check that it works the way you want to. 

Next, we will look at how you can deploy this App.