User Tools

Site Tools

Translations of this page?:


Javascript code in Variables

Sometimes, it's not convenient to let the user set all the canvas configuration. Also, the value of a variable may result in a specific value set to a property, but with a specific value not linked to the original variable (a width depending on the value of a Checkbox, for instance).

The JS Code Variable is there for this kind of manipulation. It's an advanced way to make templates, but with this, you can achieve truly amazing interactive cards.

How to declare a JS Code Variable

For a variable to be used as a JS Code Variable, it needs to be encapsulated by double brackets. Inside those brackets, you can then put any kind of Javascript code. The goal of this code is to put a value inside a variable name value. The content of this variable will be then put inside the property :

"canvasFields": [
    { "type": "rect", "width": "{{if (true) { value = 30; } else { value = 10; }}}" }

This example is of course useless, because it will always put 30 to the value variable. But, keep reading.

How to use other fields

The interest of such a variable is to use the content of other variables. For example, the user can have a Dropdown List fields to select a type of card : leader or follower. This field is named cardType.

By using card[cardType] as a JS variable in the code, you can access the value of the cardType variable. Each variable generated by an editable field can then be accessed this way. And you can, in our example, set the background color of a rectangle this way :

"canvasFields": [
    { "type": "rect", "backgroundColor": "{{if (card[cardType] == 'leader') { value = "#FF0000"; } else { value = "#00FF00"; }}}" }

Of course, you're not limited to the use of one variable, and can mix with as many variables as you need.

What can I do with this kind of variable

Well, you can make anything you want as long as it is valid in Javascript. That covers a large spectrum of actions. But be reminded that you need the value of the variable value in order for the canvas property to be filled.

Don't use the return keyword in this code, it will not work and could break the display. This function could still evolve, to use things such as functions, constants, and other things. Any idea ? Any need ? Write an Issue about it !

en/template/code_variables.txt · Last modified: 2016/08/11 09:51 by Nicolas Ronvel