[CS2] Template Variables

Template variables are formatted like this:

{{ variableName }}

But they can also be part of an object. For example, each row in a dataset will be an object like this:

{{ row.color }}

Where "row" is the name of the object, and "color" is an attribute in that object. You can also access attributes like this:

{{ row['color'] }}
{{ row[variable] }}

This allows you to dynamically access an attribute via a variable.

Here's a real world example. Let's say you have a dataset where the name field in your dataset matches the variable name of an image. So you would like to dynamically reference the image using the dataset name. This is how you would do it:

{{ images[row.name].url }}
{{ images.spaceship.url }}

Assuming you row name contained "spaceship" then the two above templates are the same.

Objects

There are some examples of objects above, but that might now make any sense to you without some context. So let's talk about objects.

An object is a variable that holds other variables. An object has a name and properties. And each property has a key and a value. Let's use an every day object to describe it, a car.

car = { make : 'Tesla', model : 'CyberTruck', year : 2023 }

So that object has a name of car, and 3 properties called make, model, and year. So in Component.Studio if we had such an object we could access its properties like this:

{{ car.make }}
{{ car['make'] }}
{{ car[variableContainingTheWordMake] }}

All 3 of those would return a value of "Tesla". The first one is accessing the property called "make" directly by using its key in dot notation. The second one is passing in the string "make" to the car object. The third one is using a variable that contains the word "make" and passing it in just like the second option.

So now let's take this to a more realist example. Let's say you have a dataset where the "name" column of the dataset contains the variable name of an image you've uploaded. So that means we're working with two objects: "row" and "images". To start with lets look at the row object and its property key called "name".

{{ row.name }}
{{ row['name'] }}
{{ row[variableContainingTheWordName] }}

Again, just like the car example, we can access the "name" property by using the key 3 different ways. All three are the same.

Each property in an object has a key and a value. In this case the key is called "name" and the value is an image variable name, let's say that's "spaceship" for our example. So all 3 above would return "spaceship" as their value.

So now we can use the resulting "spaceship" value as the key in another object: images

{{ images.spaceship }}
{{ images['spaceship'] }}
{{ images[row.name] }}

See what we did there? "row.name" is the same thing as "spaceship" so we can just substitute it into the images property key!

However, there's another big twist still to come. I said before that a property is made up of a "key" and a "value". In the car example above, the if key was "make" then the value was "Tesla" or if the key was "model" then the value would be "Cybertruck". The twist is that the value of an object doesn't have to be a string of text, it can also be another object! So in this case with "images" the value of each property will be an object that contains these property keys: "url", "width", and "height". We can access them like so:

{{ images.spaceship.url }}
{{ images.spaceship['url'] }}
{{ images.spaceship[variableThatContainsTheWordUrl] }}

And if we combine that all together we could do

{{ images[row.name][variableThatContainsTheWordUrl] }}

I know that's pretty crazy. The good news is most of the time you'll never need to do anything like that. The most common use case will be something like this:

{{ images[row.name].url }}

If you are lost by all this, don't worry. Help is but a question away in our Facebook group.

Variable Sources

There are many sources of variables in Component.Studio 2.