To get the value of a text field on the card, we can use the simple Text Variable. But sometimes, a more complex value is needed. For example, concatenating two strings.
Some fields also propose different types of values, such as the Dropdown Menu, who has a selected value, and a selected text. Which one to display ?
The Advanced String Variables exist for these situations.
An Advanced String Variable can be used by setting a canvas' field to a string that contains the token $myVariable$
. Unlike normal text variables, this variable can be set anywhere in the string :
"text": "My Name is $name$"
You can even have multiple variables in the same string :
"text" : "My Name is $name$ and I'm $age$ years old"
And that's it !
The following editable fields generate an advanced string variable :
Sometimes, you could want to display some values inside a text in bold or italic. You could use a Rich Text Field to achieve this, but what if your text is built from different strings ?
Well, you just have to specifiy the formatting. Define your built-in string as normal, attached to the text
property of a textbox
. Note that a simple text
element will not support formatting.
Then, add the styles
property to your textbox
. This property will get a string value that starts with ££
(in order to specify it's a styles array), and followed by your built-in string. Then, add special characters to indicate your bold or italic text :
"canvasFields": [ { "type": "textbox", "text": "My $text$ is bold or italic", "styles": "££My $text$ is **bold** or //italic//" } ]
As you can see, you repeat twice your built-in string. In text
, you have the string as it will be displayed on the card. Then, in styles
, you specify that it's a styles array with '££'. And then, you encapsulate your bold text by the characters **
, and your italic text by //
. You can encapsulate variables (**$myVariable$**
)but don't forget to close the encapsulation.
Some fields have special values accessible from the advanced string variables. If nothing is specified, then only the classic use will work.
A special value is used in the same way as a normal advanced string variable, but requires the use of an attribute :
"text" : "My Name is $name$ and I'm $age.value$ years old"
As you can see, we have added the value
attribute to the age
variable by using a dot between the variable & the attribute. The existing attributes are listed below.
Text Input fields have 3 special values :
text
is the text displayed in the field, that the user selected (default value if none is indicated)upper
is the text displayed in the field, in upper caselower
is the text displayed in the field, in lower caseMultiline Text Input fields have 3 special values :
text
is the text displayed in the field, that the user selected (default value if none is indicated)upper
is the text displayed in the field, in upper caselower
is the text displayed in the field, in lower caseDropdown Menus have 6 special values :
text
is the text displayed in the field, that the user selectedupper
is the text displayed in the field, in upper caselower
is the text displayed in the field, in lower casevalue
is the value of the selected option, that can be more of a constant, with less information.image
is the url / data-url of the image
property of the selected option, or of the miniature
property if there is no image
, or an empty string if there is no image
and no miniature
.miniature
is the url / data-url of the miniature
property of the selected option, or of the image
property if there is no miniature
, or an empty string if there is no miniature
and no image
.Rich Text Fields have two special values :
text
is the text entered in the field, without the formatting (bold, italic). html
is the html version of the text (with tags <strong>
for bold, <em>
for italic, <br/>
for linebreaks, …Color Picker Fields have several special values. See the main page of this type of field.
The Numeric Input fields return the numeric value as a string when getting it with an advanced string variable. It can be useful to display a value through a textbox on the canvas.