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