In this article you will learn…

  • How to create and use arrays
  • How to change arrays in the Trigger Editor
  • Using split string to turn the output of a Connector function into an array

Arrays and objects are two popular data structures that are used in many programming languages. Tulip utilizes these data structures in two parts of the platform:

  1. Variables, to store multiple data points related to the same variable
  2. Connectors, to pass the output of a Connector function to a variable

In order to manipulate a data structure, it must be already stored as a variable. You can see your existing variables by entering the Context Pane in the App Builder, and selecting the Sigma symbol next to “Variables” in the App tab.

Arrays will be shown as “Array” in the “Type” Column, depending on what kind of values they contain.

Objects will be shown with the universal object symbol, “{}”.

Occasionally, you may need to create an array without using a Connector. We will cover that in the “Arrays” section of this article. But usually, arrays and objects are related to the output of a Connector function. For example, values from a SQL query or an object from an HTTP GET request.

There is one more important difference: objects and arrays originate in different parts of Tulip. 

Arrays can be created: 

  1. In the Trigger Editor
  2. In the Variable Summary View (shown above)
  3. By storing the output of a Multiselect option in a Form Step
  4. By storing the output of a SQL connector function that returned multiple rows

Objects can only be created automatically upon the successful completion of a Connector function.

We will cover Connector functions first, since they use objects to store their output.

Collecting Output from Connectors

Imagine that you want to pull all the data about a specific operator from a SQL database based on their Tulip badge ID. 

To do this, you would write a SQL Connector function that takes badge_id as an input, and saves all the operator’s information in an output. In this case, the output is called group_name. This is what it would look like:


This function has one output, group_name, which is stored as a string. This is based on the “Text” label in the Outputs section.

In fact, when you create a Connector function, there is no option to store output as an array or object.

So, you must store it as “Text”, then manipulate it in the Trigger Editor.

Run this function in the Trigger Editor to store the output in an object.

  • "Run Connector Function" connector: "SBD - Test" "Operator Navigation"
  • badge ID: "Static Value" "text" "2222" and save result as: "Variable" "test_var"

In this case, you are using a value of 2222 as the input, and storing output in a variable called “test_var”.

Objects

In the example above, we took an output called group_name and then saved it in a variable called test_var. The App Variables view show that this variable is actually an object with one property called “group_name”.

In fact, if the Connector function had multiple outputs, each one would be stored as a new property of the object called “test_var” that was created in the Trigger. This allows you to organize all the outputs of one function call in one place.

You can test out the outputs of the function by adding some variable text to your app, and then selecting the variable from the Widget tab of the Context Pane.

In this case, we have a variable called Order Details that stores an object with 5 fields:

  • orderPlaced
  • quantity
  • address1
  • address2
  • address3

As soon as you select the object from the Variables search box, you will see all 5 fields populate in your app with labels based on the names of the properties. You may need to expand the variable text field to see all of them at once.

Displaying Objects

If your object has multiple properties, you may want to show all of them at once in one step of your app. This is easier than creating new variable text for each individual property.

To reorder/remove individual properties from the object, click the x or the grid symbol on the property in the Context Pane.

To change the number of columns, use the Columns option in the Context Pane.

To change the display of the labels and values, adjust the color and font size in the Context Pane.

To see how this data will be shown the operator, run the app in the Player, and you will be able to see the whole object. Values will be included if you first run the Connector function that gathers the values.

Table Records

If you want to visualize an individual record from one of your tables, you must first load the record into the app. Then, choose the "Table Record" option under the Text widget in the Widget Bar to visualize all fields of the loaded record.

Arrays

Only two parts of Tulip can automatically create an array: 

  1. A SQL connector that returns multiple rows will automatically create an array with each SQL row stored in an object.
  2. The value of a "Multiselect" form widget.

You can create and manipulate arrays through the Trigger Editor. In a “Then” statement, click “Add new action” and then choose the “Arrays” option.

In the next dropdown, you will see a variety of array methods. These align with the array methods in JavaScript, so check out this guide to array methods if you need further explanation.

The available array methods include:

  1. Clear array
  2. Concatenate arrays
  3. Get from index in array
  4. Get length of array
  5. Pop from array
  6. Push onto array
  7. Set index in array

Depending on your selection in this dropdown, the rest of the fields will give options on what array you would like to manipulate, which index you would like to change, and the new value you are setting.

  • "Arrays" "Set Index in Array" data: "Static Value" "number" "90" array: "test_a" index: "Static Value" "integer" "0"

In the example above, you are changing the value at index 0 in an array called “test_a” to a value of 90.

  • "Arrays" "Get from index in Array" array: "Variable" "test_a" index: "Static Value" "integer" "0" store in variable: "test_vari"

And in the example above, you are accessing the value at the 0 index of an array called “test_a” and storing it in a variable called “test_vari”.

Based on everything covered so far, it would be very difficult to get the output of some types of connector functions into an array. To solve this problem, you can use split string.

If you want to prepare your connector function output to be stored in an array, you need to add a common character between each piece of data. Common examples include:

  • Semicolon (;)
  • Comma (,)
  • New line character (“\n”)

Searching Through Arrays

Let's say you want to use a multiselect widget to allow an operator to input multiple types of defects about a single product. Then, depending on which defects they input, you would like to send them to a specific set of rework steps.

A multiselect form automatically saves values in an array. So, you will need to search this array for a specific value, and then send the operator to a specific step.

You can use the "Join To String" Trigger action to accomplish this. This will combine all elements in an array into a single string, and store it in a separate variable. Then, in a separate Trigger, you can use an "If" statement to see if this string contains a specific value.

The array elements can be separated by any string that you choose. Most Tulip users prefer a comma (,).

Here's an example of joining all elements in an array into a string:

  • "Arrays" "Join To String" join: "defect types"
  • with delimiter: "Static Value" "text" ","
  • store in: "defect_types_joined"

Here is the second trigger that you would use to search this new string for a specific value:

IF

  • "Variable" "defect_types_joined" "Contains" "Static Value" "text" "chip"

Split String

Let’s say that you have a series of data points that you want to store in an array. In your SQL query or HTTP GET request, you will first want to combine them into one string, if they are not already stored in an object.

Here is an example:

7989;43f3;3e3;f34;f;34;3

The common delimiter is a semicolon.

In the Trigger Editor, you will want to use the “Split String” option to convert this string into an array.

First select the variable you would like to split. In this case, it is called “q”.

Then, add the delimiter.

Finally, choose the variable where you would like to store the array. 

  • "Split String" split: "Variable" "q" by: "Static Value" "text" ";" store in: "w" 

If you want to make sure this is working, add some variable text to a step. Then, choose the variable that stores the array.

Finally, open up the Tulip Player, and see if all the items in the array appear as a bulleted list. You may need to expand the text box in order to account for the number of items in the array.

Displaying Arrays

When you return an array of objects from a SQL connector function, a bulleted list will not be an ideal display. 

Instead, when you add variable text to a step and run the step in the Tulip Player, the array of objects will be automatically transformed into a table with one object per row. The headers will be labelled as the keys from each of the objects.

So, let's say this is your array of objects:

[
  {name: 'part1', weight: 10, priority: 1},
  {name: 'part2', weight: 50, priority: 1},
  {name: 'part3', weight: 30, priority: 2}
]

Here is how it would be displayed:

Further Reading

Did this answer your question?