User Tools
en:template:advanced_string_variables
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
en:template:advanced_string_variables [2016/08/11 09:44] Nicolas Ronvel created |
en:template:advanced_string_variables [2017/06/22 11:20] (current) Nicolas Ronvel [Color Picker Field] |
||
|---|---|---|---|
| Line 25: | Line 25: | ||
| The following editable fields generate an **advanced string variable** : | The following editable fields generate an **advanced string variable** : | ||
| - | * [[Text Input|Input Text]] (get the text set in the field) | + | * [[Text Input|Input Text]] (get the text set in the field) |
| - | * [[Multiline Text Input|Multiline Text]] (get the text set in the field) | + | * [[Multiline Text Input|Multiline Text]] (get the text set in the field) |
| - | * [[Choice Input|Dropdown Menu]] (get the text displayed for the selected item) | + | * [[Choice Input|Dropdown Menu]] (get the text displayed for the selected item) |
| - | * [[Rich Text Field|Rich Text Field]] (get the displayed text, without the formatting) | + | * [[Rich Text Field|Rich Text Field]] (get the displayed text, without the formatting) |
| + | * [[color_picker|Color Picker]] (get the RGB color, and manipulate the color) | ||
| + | * [[en:template:numeric_input_field|Numeric Input]] (get the numeric as a string) | ||
| + | ===== Formatting ===== | ||
| + | |||
| + | Sometimes, you could want to display some values inside a text in **bold** or //italic//. You could use a [[en:template:rich_text_field|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 : | ||
| + | |||
| + | <code javascript> | ||
| + | "canvasFields": [ | ||
| + | { "type": "textbox", "text": "My $text$ is bold or italic", "styles": "££My $text$ is **bold** or //italic//" } | ||
| + | ] | ||
| + | </code> | ||
| + | |||
| + | 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. | ||
| ===== Special values ===== | ===== Special values ===== | ||
| Line 41: | Line 59: | ||
| 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. | 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 ==== | ||
| + | |||
| + | 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 case | ||
| + | * ''lower'' is the text displayed in the field, in lower case | ||
| + | |||
| + | ==== Multiline Text Input ==== | ||
| + | |||
| + | Multiline 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 case | ||
| + | * ''lower'' is the text displayed in the field, in lower case | ||
| ==== Dropdown Menu ==== | ==== Dropdown Menu ==== | ||
| - | Dropdown Menus have 4 special values : | + | Dropdown Menus have 6 special values : |
| * ''text'' is the text displayed in the field, that the user selected | * ''text'' is the text displayed in the field, that the user selected | ||
| + | * ''upper'' is the text displayed in the field, in upper case | ||
| + | * ''lower'' is the text displayed in the field, in lower case | ||
| * ''value'' is the value of the selected option, that can be more of a constant, with less information. | * ''value'' 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''. | * ''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''. | ||
| Line 61: | Line 97: | ||
| Color Picker Fields have several special values. See the [[Color_Picker#special_values|main page]] of this type of field. | Color Picker Fields have several special values. See the [[Color_Picker#special_values|main page]] of this type of field. | ||
| + | |||
| + | ==== Numeric Input 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. | ||
en/template/advanced_string_variables.1470901447.txt.gz · Last modified: 2016/08/11 09:44 by Nicolas Ronvel
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
