Core Studio: Variable Arrays / Introduction


Here's a brief tutorial for Variable Arrays

Note: Supported in Core >= 2.6.4 Studio 


Array Variables 

The "Variables" node in the palette now allows creation of numeric or string arrays:

 

 

Enter the array element values separated by a comma in the properties view, for example:

 

(this will change, we'll show a list of the values for a better user experience)

 

 To access array elements use square brackets and 0-based index. For example when pressed this button will increase the volume level of the first array element (at index 0). The volume level will be displayed as a button text at the same time:

 

 

 To modify an array element through a variable action, you need to specify the array index. For example:

 

 

Alternatively, you can use JavaScript to iterate through the volume levels array and update its elements like this:

 

 

To track changes in the array elements, you can use the _i service variable that contains the index of the array element that changed. For example:

 

 

 Template Variables

To elevate the usefulness of array variables, we've introduced template variables. A template variable is simply a placeholder that can be used inside a template in the UI as a real variable. Later, when you actually use the template inside a page in your Control Panel, you need to specify a variable (or value) the template variable maps to. You can have as many template variables as you want.

 Here's the previous example, but using templates. We've created a template "volumeControl" with two template variables - volumeLevel and title. Template variables are accessed in the property page for a template object:

 

Those two variables are used throughout the template:

 

 

When the template is placed in the control panel page, the template variables can be mapped to real variables or values in the properties view:

 

In this example, we've added the template four times, for each volumeLevel array element. Each time we've specified a different array index - from volumeLevels[0] to volumeLevels[3] to handle the corresponding variable.


Variable Array Project Sample: array-test.acs