Variables and JavaScript

Variables

There are currently five variable types in Active CSS.

• DOM attributes and properties {@...} and {@@...}
• Dollar variables
• Component drawing variables {|...}
• Inner HTML reference variables {#...}
• Special Active CSS variables

Special Active CSS variables are currently:

• {$RAND} = Return a random 8 digit number. To return more than that you can do stuff like this: {$RANDSTR12} to return a 12 character random 0-9a-zA-Z string. {$RANDHEX6} to return a 6 character random 0-9A-F string, {$RAND0-255} to return a random number between 0 and 255 (notice the hyphen). The numbers used in the RAND variable name can be whatever you like, but they must be integers (whole numbers).
• {$STRING} = This is used to output ajax response that has been returned to the front-end as a string containing HTML after an ajax call - ie. not JSON. is never validated for dangerous HTML tags, so make sure that you trust all string data coming from the server. Any validation actions that you take must occur on the server. This variable can only be used when rendering. No Active CSS variables contained in these {$STRING}-type variables will get evaluated when rendered. But if these {$STRING} variables are re-assigned to another variable, then variable evaluation will occur on render. See {$HTML_NOVARS} below for a solution to this.
• {$HTML} = This is a version of {$STRING} that is available in a specific component variable scope. Multiple components on the page may each call ajax commands returning separate strings for display purposes, and each component would have its own {$HTML} variable available in the afterAjax event. But it must be a text string - not a JSON string. Use this when you want to display HTML as proper HTML on the page. It can be re-assigned to another variable as needed.
• {$HTML_NOVARS} = This is a version of {$HTML} that stops Active CSS variables in a text string from being evaluated when rendering. It is needed when assigning the return string to another variable and for escaping variables for use as regular text in the assigned variable. It escapes the opening and closing curlies, and puts them back in just before rendering. It will leave HTML intact as HTML. This is available in a specific component scope. It can be re-assigned to another variable as needed.
• {$HTML_ESCAPED} = This is a version of {$HTML} that escapes HTML so it can be rendered correctly within attributes or displayed as text. It turns the following characters into HTML entities: '&', '<', '>', '/', '{', '}'. Use this when you want to display HTML tags as text. This is available in a specific component scope. It can be re-assigned to another variable as needed.
• $JSON = This can be used after an ajax call that had a JSON result. This is a variable that contains the contents of the JSON string, converted back into its object or array form. It can be helpful to reassign this to another variable if you are using multiple ajax calls in a sequence to grab a lot of variables from the server (using the var command). Note that variables that return from the server will always automatically get converted into variables. $JSON allows all these returned variables to be grouped together under a parent variable on return from the server. So this is a helper variable that will contain them all. It follows component scoping rules. It is NOT a constant - ie. you can change it.

CSS Variables

From version 2.4.2, CSS variables are supported in Active CSS. They are not Active CSS variables and have nothing to do with the rules of Active CSS variables. To see how you can use them dynamically with events, go to the CSS Variables page in the Concept Examples section.

 

XSS mitigation

Variables containing HTML

See the helper functions, escapeHTML and unEscapeHtml.

 

JavaScript

There are several ways to used JavaScript with the config.

• By using a JavaScript expression
• By creating a custom Active CSS action using create-command
• By creating a custom Active CSS conditional using create-conditional
• By calling a regular JavaScript function as an action command (written in a JavaScript file) using the func command
• By calling a regular JavaScript function as an conditional function (written in a JavaScript file) using the if-func command
• By using run
• By using eval

What version of JavaScript can I use?

Because Active CSS works in runtime on the front-end, it will work with the versions of JavaScript that your target browsers support.

Babel is not supported for any JavaScript that is contained within Active CSS config.