Adding Conditional Logic
Conditional logic provides additional format flexibility and can increase the utility and readability of mouseover box information. For example, suppose you are creating a supply chain Flaremap and only want to show the re-order costs when the current supply is less than 500 units. This can be done using a simple conditional statement. It is also possible to define more complex IF – THEN – ELSE statements.
Both the cell mouseover box and group mouseover box can have conditional logic added to individual elements. Conditional logic can be used on any HTML element. When conditional logic is used, the HTML element will display ONLY when the logic statement specified is true.
Conditional logic can be added in two steps:
-
Add ONE of the following classes to the HTML element:
-
flaremap-if Use this class to create simple IF statements.
- An HTML element with the class flaremap-if will execute independent of any other conditional logic present in the mouseover box.
-
flaremap-else Use this class to create IF – THEN – ELSE statements.
- An HTML element with the class flaremap-else will look for a preceding HTML element that contains the class flaremap-if OR flaremap-else.
- Any flaremap-else element that follows an element with the class flaremap-if OR flaremap-else will only execute its logic statement if the preceding element’s logic statement returned false.
- An HTML element with the class flaremap-if will always begin a new logic statement.
- An HTML element with the class flaremap-if is required to begin a new logic statement.
- If only HTML elements with the class flaremap-else are used all of the flaremap-else elements will be hidden.
-
-
Add the following new attribute to the HTML element:
if="{value_name}|{operation}|{operation_values}"
| {value_name} | Any attribute from “CSV_DataTypes.cells” | Specifies the attribute that will be used in the logic statement. |
|---|---|---|
| {operation} | See table below for list of operations | Specifies the logical operator that will be used against {value_name} |
| {operation_values} | See table below for how different operations require different values | Specifies what values the operation will use to determine if the logic statement is true or false. |
Table of operations and operation values
| Description | {operation} | {operation_values} |
|---|---|---|
| equals | EQ | Any number or string. Will only return results that exactly match the value. Use HASTEXT for more granular text searching. |
| not equals | NEQ | Any number or string. Will only return results that exactly match the value. Use HASTEXT for more granular text searching. |
| less than | LT | Any number |
| less than or equals | LTE | Any number |
| greater than | GT | Any number |
| greater than or equals | GTE | Any number |
| set membership (in a set) | SET | Any pipe separated list of numbers or strings. Will only return results that exactly match the value. Use HASTEXT for more granular text searching. Values within SET have an OR relationship. |
| from (inclusive)... to (inclusive) | [] | Any two pipe separated numbers (the second should be larger than the first) |
| from (not inclusive)... to (inclusive) | (] | Any two pipe separated numbers (the second should be larger than the first) |
| from (inclusive)... to (not inclusive) | [) | Any two pipe separated numbers (the second should be larger than the first) |
| from (not inclusive)... to (not inclusive) | () | Any two pipe separated numbers (the second should be larger than the first) |
| text search | HASTEXT | Any pipe separated list of numbers or strings. Will return any results that match the value, including partial matches. For example “Dan” will return: “Dan”, “Daniel”, and “Dan Smith”. |
| current option – checks if {value_name} is currently used as the SIZE or COLOR option | CURRENT_OPTION | Three possible values: SIZE, COLOR, or SIZE|COLOR |
| adding an exclamation point immediately before any of the operations above will negate the filter rule | ! | n/a |
Examples:
Example 1: Display the phrase “North Region” when hovered over a cell with a region that contains the word “North”.
Example 1 code:
<div class="flaremap-if" if="Sales_Region|HASTEXT|North">North Region</div>
Example 2: Display the phrase “North Region” when hovered over a cell with a region that contains the word “North”. Display the phrase “South Region” when hovered over a cell with a region that contains the word “South”.
Example 2 code:
<div class="flaremap-if" if="Sales_Region|HASTEXT|North">North Region</div>
<div class="flaremap-if" if="Sales_Region|HASTEXT|South">South Region</div>
Example 3: Display the phrase “North Region” when hovered over a cell with a region that contains the word “North”. Display the phrase “North Region Over $500k” when hovered over a cell with a region that contains the word “North” AND has total sales greater than or equal to 500,000.
Example 3 code:
<div class="flaremap-if" if="Sales_Region|HASTEXT|North">
</div>
Example 4: Display the phrase “Above Quota” when hovered over a cell with a quota greater than or equal to 100. Display the phrase “Below Quota” in red lettering when hovered over a cell with a quota less than 100. Otherwise display the phrase “No Quota Data Provided”.
Example 4 code:
<div class="flaremap-if" if="Quota_Percent|GTE|100">Above Quota</div>
<div class="flaremap-else" if="Quota_Percent|LT|100" style="color:red">Under Quota</div>
<div class="flaremap-else">No Quota Data Provided</div>