WEMScript for Custom HTML

The WEM-Specific script language in the Interaction Template Editor

Please read our info on Content Security Policy introduced in 4.2.

WEMScript is a specific script created by WEM to make it possible to use specific WEM Elements (properties, fields, events, functions) available to the Script Editor for Custom Script blocks in the Interaction Template Editor. This is typically the low-code part of WEM. For WEM Widgets additional specific WEMScript functions are available.

To use WEMScript and WEM Fields in a custom script element, you need to use specific hooks: <? ... ?>

Combined with a few keywords, this allows for WEM-fields and expressions/statements like if..then..else and choose when..then.. constructions) to be inserted into custom html/CSS/JavaScript blocks on the Interaction Template.

To render values (fields from the Datamodel or the results of functions) to the page (as output), there are some options for specific situations:

<? ... ?>	indicate a block of WEM-script within a custom script (or widget code). Between these hooks, WEM-expressions and Fields can be placed.
<?=	output the value standard as a text;
<?js	output the value for safe use within a bit 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 a Calculated Field is used to make the content for the custom script more readable (and the calculation re-usable). The whole expression could also be placed directly after the attr.