Blockly Blocks

Blockly is a block-based visual programming environment with a beginner-friendly interface for writing custom scripting logic. Instead of writing error-prone text-based code, you can create logic flows by dragging and dropping blocks onto a canvas.

Each block performs a different function, such as displaying a pop-up message or navigating to a new page in a SOTI Snap app.

Sample blocks on the Canvas

You can connect blocks to other blocks to create more complicated logic statements. The shape of a block indicates where you can connect it to other blocks.

All available blocks are in the toolbox on the left side of the workspace. Click a block category to open a menu of blocks within that category.

Hover your mouse pointer over a block or toolbox category to reveal a tooltip with a brief description of the block's use.

To delete a block from the canvas, drag and drop it over the left toolbar. The toolbar turns red, and a trash icon appears.

Widget Values

The Widget Values toolbox category contains generic get and set blocks for widgets in your SOTI Snap app.

Get blocks pull in data from the specified widget.
Set blocks dictate what should appear inside a widget, whether the value is fixed or dynamic (created by combining two or more values or blocks). You can also use a Set block to change the background Color of some widgets.

Open the Widget Values toolbox category to reveal a list of blocks related to all the widgets in your SOTI Snap app. Blocks are categorized by widget type.

Example of some types of Widget Values blocks

Note: The list of available widget types depends on the widget types in your app. For example, if you create an app with a textbox widget, blocks related to textbox widget values will be listed.

You can set and get values for the following widgets:

Button
Checkbox
Date
Dropdown
Layout
Radio Button
Rating
Section
Textbox

Note: Not all widgets support the same set/get values.

Each Widget Value block has a dropdown list of applicable widget names from your app.

For instance, the following block can set the text of a Button widget. The widget's dropdown shows all the buttons in the app, organized by the pages where they appear. The button named button8 appears on the Submit Request page of the SOTI Snap app.

Sample block with a dropdown

App Actions

The toolbox category App Actions contains blocks that can perform actions specific to a SOTI Snap app. For example, you can use the Navigate block to send app users to a different page in a SOTI Snap app.

Connections

The Connections toolbox category contains blocks for sending RESTful requests to third-party services. The REST Service block supports all RESTful method types (GET, POST, PUT, and DELETE).

Connection blocks contain hooks to inform when a request succeeds or fails so you can display the appropriate feedback on your app.

Sample Connection block

Click the Test button to map JSON key values to fields in a widget. In addition to assuring a proper connection to the data source, the test reveals the key values and adds them to the Response Data block. You can use these key values to map to fields in a widget. See the example below:

Code Blocks

Use Code Blocks to store custom JavaScript as a block for future use. Maintaining code blocks in your library will save time recreating complex or frequently used code. Drag and drop them on the canvas like other blocks.

XSight Topics

Use XSight Topics to get and set values between widgets and XSight Topics connections. See Pass App Data to XSight Topics Using Blockly.

Global Variables

Global Variables contains any global variables defined for an app. You can perform get and set on these variables.

Read Global Variables for more information.

Note: You will not see this toolkit option until you create a global variable.

Local Variables

In the Local Variables toolbox category, you can create a variable to store values for reuse elsewhere in your script.

When creating a variable, Blockly adds new blocks to the Local Variables toolbox category to:

Set the value of a variable
Get the value of a variable
Increment the value of a variable by 1 (default)

A complicated calculation that requires many Math blocks might be long and difficult to read. The example block below calculates the total price of a food order. All calculations to add the costs of each menu item are performed at once. The number of embedded calculations makes the block complex.

Sample complex expression

With variables, you can split the calculation into a few steps by storing the value in a Local Variable and updating it with each calculation. The script becomes easier to read and understand.

Sample expression is broken into steps by using a Local Variable

Logic

Use Logic blocks to execute nested blocks when a condition is met.

The If block runs its nested statement if the condition in its hexagonal block input is met. For instance, the coin toss script below prints a message saying "heads" if a randomly generated fraction is greater than 0.5.

Note: All blocks that evaluate a TRUE or FALSE (Boolean) condition have a hexagonal shape.

Sample If Logic block

To complete the heads/tails script so that the program prints "tails" the other 50% of the time, add an Else statement by clicking the add (plus) button. The new Else statement only executes when the condition is not met (when the fraction is less than or equal to 0.5).

Sample If Logic block with Else

Loops

Use Loop blocks to execute code blocks a specified number of times or while a condition is met.

Repeat and Repeat While blocks

Use a counter to track the current iteration of a loop. For example, the Count With block below repeats the print statement ten times. After each iteration, the i Local Variable (see the Local Variables section) is incremented by one. The first iteration prints the first element of the list called myList. The second iteration prints the second element of myList, and so on. Count With block

It is also common to loop through each item in a list. This is similar to how the block above loops through the first ten items.

The for each item in list block repeats its inner statement as many times as there are items in the list. At each new iteration of the loop, the specified variable has the value of the next item in the list.

The block below loops through myList and prints each list item.

Math

Use Math blocks to compute values and work with numbers. The Math toolbox category includes blocks to perform math operations (addition, subtraction, multiplication, division, and square root, for example), generate random numbers, and add mathematical constants such as pi π or phi φ.

Sample Math blocks

Text

Use Text blocks to construct and manipulate lines of text (also called strings). You can use text blocks to combine pieces of text, search for a quote within some text, change the text case, and display messages.

Sample use of Text blocks

Lists

Use List blocks to combine multiple values into one block.

For instance, you can aggregate any number of names into a List block and then put the block within a Sort block to alphabetize them.

Use List blocks to perform mathematical operations on sequences of numbers.

List blocks can also return a specific item in a list by referencing the item's position. For example, if you wanted to get the second item in a list, you could create the following block.

Color

Use Color blocks to style aspects of your SOTI Snap app. Choose colors from a color palette or specify them as an RGB value.

Color blocks used in Set Text blocks

Color blocks convert the RGB value to hex format. For instance, the RGB value of R:255, G:0, B:100, produces #ff0064 (a pink color).

Dates

Use Date blocks to work with SOTI Snap date widgets and to compare dates.

The example below displays an error if the date entered into a SOTI Snap Date widget is earlier than the current date.

Sample Date block in an If logic block

Date blocks use the following format: month day year. For example, Jan 1 1970.

Table

Use Table blocks to manage and access content within a Table widget. Capabilities include:

Retrieving a value from a column in a table's selected row
Adding a row to a table
Renaming a table column
Retrieving a column name
Deleting a table row based on a column value
Refreshing/updating the table view
Running or cancelling record edits
Connecting to an external data source to retrieve or add data

The following shows a Table block used to populate a table:

Debug Tools

Use debugging blocks to help troubleshoot your Blockly script.

The Log block returns the value of the block you wish to monitor as the app runs. Place the app in Preview mode and right-click anywhere on the page to see the information log. Open your web browser's Console view (The view's name and menu location vary by browser).

Debugging information is also available after the app is published. When testing a SOTI Snap app on a device, the Log block sends messages to the app's error log.

View error logs in the app by tapping More > View Logs.

SOTI Blockly runs on SOTI products only. Please contact the SOTI administrator.

My Libraries

Use My Libraries to store a set of blocks for future use. Maintaining a block library will save time recreating complex or frequently used block structures. Drag and drop them on the canvas like other blocks, and modify them as required.