Buttons and Interactive Interfaces
Quick Overview Video
Buttons expand the utility of Text Blaze snippets by allowing you to create interactive interfaces that execute multiple lines of code when a button is clicked or once when the snippet loads.
Here’s an example:
The {button} Command
The {button} command runs one or more lines of code (also known as a code block) when clicked. They help you create interactive interfaces within snippets.
In the example below, the counter increases every time you click the button. A text field initializes the variable ‘counter’ and sets it equal to zero. Every time you click the button, the counter is increased by one. A formula is used to display the value for the counter variable.
{formtext: name=counter; default=0}
{button: counter = counter + 1 ; label=Click me}
Counter is currently: {=counter}
The {run} Command
The {run} command runs code exactly once. This means that when there is an update in the snippet, the code inside the {run} command will not run again.
It is useful because it allows you to initialize variables when the snippet is triggered or when some condition is true.
Instead of using a text field like the previous example, the snippet below uses the {run} command to initialize the variable counter and set it equal to zero.
{run: counter=0}
{button: counter = counter + 1 ; label=Click me}
Counter is currently: {=counter}
Note that {run} is different from assigning variables via formulas. Because {run} commands run once, any variable set by them can be subsequently overwritten with another value. Formulas, on the other hand, run continuously, and therefore will continuously set the value of a variable.
You can see this in practice in the two snippets below. The first snippet shows a variable being set with a formula. When you try to change the value of the variable x, it goes back to 5 and can’t be changed. However, with the second snippet, the variable x can be changed because it is set with the {run} command.
{note}Try to change the value:{endnote} {x=5}
{formtext: name=x}
{run: x=5}
{note}Try to change the value:{endnote} {formtext: name=x}
If you place the {run} command inside of an {if} statement, it will run once when the clause is true. In the example below, once you input a value for the variable x, the {run} command executes once. If you update the value of x, the value of y stays the same because the {run} command only executes once.
{note}Enter value for X{endnote} X = {formtext: name=x}
{if: x>2}{run: y=7 }{else}{run: y=5 }{endif}
Y = {=y}
Code Blocks in Functions
Functions can also contain code blocks (called block functions). These functions can contain multiple lines and imperative logic. The code inside of a block function is executed when the formula itself is executed in the snippet.
Block functions should start with block and end with endblock. The return statement in a block function will return values from the function.
Here’s an example of a block function:
{AddOne=(x) -> block var y = x + 1 return y endblock}
{=addone(5)}
Comments
Within code blocks, you can include comments. These are notes that don’t impact anything in the code block, and are just used for information. Comment lines start with a # sign.
Assigning Variables
Within code blocks, you can assign variables either globally or locally. Global variables are available throughout the entire snippet, while local variables are only available within the current code block.
You can use most Text Blaze commands in your variables. Ex: clipboard_data = {clipboard}
Global assignment
When assigning variables, you can assign them globally by using this assignment statement: x = abc
Global variable assignment works in the {button} and {run} commands. When you create new variables in block functions, you can use local variables to keep them contained within the current function.
Local assignment
By default, variables assigned within the {button} and {run} commands are applied to the global scope of a snippet, i.e. you can use them anywhere in the snippet.
However, you can force a variable to only be available within the current code block by using the ‘var’ variable. Var makes it so that the variable is only available within the current code block, not the entire snippet.
Local variable assignment is useful because it prevents conflicts in your snippet and ensures the localized variable doesn’t impact anything outside of the current code block.
In the example below, you can see that the variable ‘var y = 3’ is not defined in the global context of the snippet because it is a local variable.
If statements
You can use if statements in code blocks to create conditions and execute logic.
Keep in mind that if statements may contain one or more elseif statements and may include a single else statement.
Here’s an example that uses an if statement to show a notification that depends on what you type in the text field.
{formtext: name=Input Text}
{button: if `Input Text` = "Hello" notify("You entered Hello") else notify("You entered something else") endif ; label=Check Text}
For loop statements
If you want to iterate over a list of values in a code block, you need to use a for loop statement. For loop statements iterate once for each item in a list.
One potential use case for iterating over lists is processing the results of some connected commands (like {dbselect}), which return results in a list format.
In the example below, you can see that the {run} command adds up all of the values in a list and produces the sum.
{run: # Initialize a list of numbers numbers = [1, 2, 3, 4, 5]
# Initialize a variable to store the sum total_sum = 0
# Loop through the list and calculate the sum for number in numbers total_sum = total_sum + number endfor }
The sum of the numbers is {=total_sum}.
Try and CatchError Statements
If there is a part of your code that may throw an error, you can enclose it within Try and CatchError statements. This helps you avoid errors or simply change the behavior of your snippet if there is an error. This works similarly to Text Blaze’s catch() function in that it tells the code what to do if an error occurs in the snippet.
Here’s what it looks like:
If there is an error in the Try statement, the code between CatchError and endtry will run. Alternatively, if there is no error, the code between CatchError and endtry is skipped.
For example, the snippet below helps you validate data entered into a text field. It sends conditional notifications depending on what you enter in the text box.
{formtext: name=Input Text}
{button: try if len(`input text`) = 0 error("Enter the data") elseif `input text` < 500 notify("Verify data - cost must be over $500") elseif `input text` > 500 notify("Data is accurate") endif catcherror notify("Error: Enter the data") return endtry ; label=Check text}
Return statements
You can use return statements to end the execution of a code block at the point it is placed in the code block. This is useful because it allows specific code to be run if conditions are met within a code block.
Also, return statements are useful with block functions because they return values from within the functions.
In the example below, you input a value into a text field, and a block function is used to create a function that doubles it, squares it, and assigns a category to it depending on the value inputted, then a return statement returns each of the values using the function.
{analyzeNumber=(x) -> block var doubled = x * 2 var squared = x * x var category = "" if x > 10 category = "High" elseif x >= 0 category = "Moderate" else category = "Negative" endif return ["doubled": doubled, "squared": squared, "category": category] endblock}
Enter a number: {formtext: name=num; default=5}
{result=analyzeNumber(num)}
Doubled: {=result.doubled}
Squared: {=result.squared}
Category: {=result.category}
Commands
You can use Text Blaze commands inside of code blocks. Most commands are supported, but some are not. For example, the {formtext} and {note} commands are not supported in code blocks, as they either require user input or are filled in with snippet contents.
You can use Text Blaze commands (and even command packs) in your code blocks to expand their functionality. In the example below, we’ve added the Randomize command pack to a code block so that every time you click the button, you get a random greeting.
Note that command packs cannot be previewed, so clicking the button below results in an error. Copy it to your dashboard and enable the command pack to give it a try.
Connected Commands in Code Blocks
One of the most powerful features of code blocks is their ability to interact with connected commands. This is especially useful for snippets that interact with Data Blaze.
When you use connected commands in code blocks, the commands are run at the time they are encountered in the code block. Additionally, code blocks return the results of some connected commands (like {dbselect}) as a list, and others (like {dbdelete}) as a single value.
There are a few important ways that code blocks can interact with Data Blaze:
- Insert rows into Data Blaze while the snippet form menu is still open.
- Set initial values of fields using data from Data Blaze.
- Refetch data read from Data Blaze when a button is clicked.
- Update rows in Data Blaze with buttons.
Examples
Inserting Rows Into Data Blaze
In the example below, you can fill out form data and then click the button to insert the data into Data Blaze while the form menu is still open.
The snippet creates a button that uses Try and CatchError statements to either insert a row into Data Blaze when the button is clicked, or show an error notification if it fails.
Setting Initial Values of Fields With Data From Data Blaze
Another useful way to use code blocks with Data Blaze is to set the initial value for a field based on data being pulled from Data Blaze.
In the example below, the snippet uses a {run} command to initialize a variable and sets the initial value of the variable to the number read from Data Blaze. Also, the snippet waits for the Data Blaze command to complete before presenting the data to avoid showing an error.
Refetching data being read from Data Blaze
You can also use code blocks to refetch the data being read from Data Blaze.
In the example below, you can click the button to refetch the data.
In this snippet, the {run} command runs the fetchData block function and {button} executes it when clicked. When the command is done executing, it will set the variable name to be equal to the value of the "name" formula. The variable isloading is set to true while the command is executing.
Updating rows in Data Blaze with buttons
Code blocks can also help you update data in Data Blaze with the click of a button.
In the example below, you can manage tasks by clicking the button to update the status in Data Blaze. You can also fill in the form data and click a button to insert new tasks into Data Blaze.
This snippet reads tasks from Data Blaze, then uses the {repeat} to iterate over those tasks. Next, a button is created that updates the task that it is next to when clicked. Then, a {button} is created that adds a new task in Data Blaze when clicked.
Interacting With a Data Blaze CRM
Below is an advanced example of how you can add buttons to your snippets to interact with Data Blaze and add interactivity to your snippets.
In this example, company information, opportunities, and tasks are stored in Data Blaze. When you use this snippet in Gmail, it reads the email address of the person you’re emailing. If the person you’re emailing is in the CRM, then you can either click to update the company status or add tasks related to that company. If the company is not in the CRM, you can add their information and click to add them to the CRM.