Javascript helper functions

Here are a few helper functions that can be use with inline JavaScript and JavaScript blocks as used in the run command.

All the general JavaScript commands are available. These helper functions are in addition to the regular JavaScript functions.

Note that these are specifically for use in variable assignment, @if statements, run, etc. where JavaScript is evaluated, and cannot be used in non-JS config.

 

getVar

Syntax

getVar(an object variable, string containing variable path)

Fetches an ACSS property value from an object based on its string path. This is an alternative syntax to $myObject[$variablePath], but is used where $variablePath is a complex object, like "details.person.name". This is similar to Lodash _get().

an object variable = An object variable containing properties. This can be an ACSS variable.

string containing variable name = The string containing the path of the property to fetch from the object. This can be an ACSS variable.

Example:

button:click {
    $myRow: { details: { name: "Dave" } };
    $variablePath: "details.name";
    $myField: getVar($myRow, $variablePath);
    console-log: $myField;
}

/* Outputs "Dave" in the console. */

 

escapeHTML

Syntax

escapeHTML(string)

Converts key string characters into HTML entities. This is the reverse of unEscapeHTML().

string = An string that may contain raw HTML characters.

This is the conversion table:

& : &
< : &lt;
> : &gt;
/ : &sol;
{ : &#123;
} : &#125;
" : &quot;
' : &#39;
\ : &#92;

Example:

button:click {
    $string: "<p>Hi there</p>";
    render-after-end: "{= escapeHTML($string) =}";
}

/* Renders "&lt;p&gt;Hi there&lt;/p&gt;" on the page as a text string. The string does not display as HTML. */

 

unEscapeHTML

Syntax

unEscapeHTML(string)

Converts a string containing key HTML entities into HTML characters. This is the reverse of escapeHTML().

string = An string that contains HTML entities.

This is the conversion table:

&  : &
&lt;   : <
&gt;   : >
&sol;  : /
&#123; : {
&#125; : }
&quot; : "
&#39;  : '
&#92;  : \

Example:

button:click {
    $string: "<p>Hi there</p>";
    render-after-end: "{= unEscapeHTML($string) =}";
}

/* Renders "<p>Hi there</p>" on the page as proper HTML. */