To use WEMScript and WEM Fields in a custom html-script element, you need to use specific hooks <? ... ?>. Combined with a few keywords (see below), this allows for WEM-fields and expressions/statements (if..then..else and choose when..then.. constructions) to be inserted into custom html/css/javascript blocks.
To output values, there are some options for specific situations:
| <? ... ?> |
: |
indicate a block of WEM-script within a custom script (or widget code)
in between these hooks, WEM-expressions and Fields can be placed. |
| <?= |
: |
output the value standard as a string; |
| <?js |
: |
output the value for safe use in a piece of javascript; |
| <?html |
: |
output the value as html encoded text (escaping html-specific characters); |
| <?attr |
: |
output the value as html-attribute (value as attribute inside an html tag); |
| <?raw |
: |
output the value literally without any formatting change; |
To give an example for a block with a calculated background color (and an expression to decide whether to use a span or a div and which field, just to show some combinations):
<? if some expression then ?>
<div style="background-color: <?attr [CalculatedColorField] ?>;">
<?= [data_field] ?>
</div>
<? else ?>
<span style="background-color: <?attr [CalculatedColorField] ?>;">
<?= [other_data_field] ?>
</span>
<? end ?>
Where [CalculatedColorField] is a calculated field with an expression to specify a color-value like:
choose
when condition 1 then "#f0f0f0"
when condition 2 then "#ffa500"
when condition 3 then "yellow"
when condition 4 then "blue"
....
default "#a0a0a0"
end
But in this case I use a Calculated Field to make the content for the custom script more readable (and the calculation re-usable) ... the whole expression can also directly be placed after the attr.
Ralph - WEM Xpert since 2011
"I speak to machines with the voice of humanity"
-- Marillion, Man of a thousand faces --