# If ❺🧪

Current;

* Display elements conditionally depending on an eval expression
* Provide the data needed for the eval in the context of the IF wrapper element
* Work with collections lists 
* Works inside of components 

Future;

* ? Conditional styling and classes
* ? Conditional IX2 
* Functional evals 
* ? Implicit eval vars
  * Current lang
  * Time
  * Geo
  * etc. 

{% hint style="danger" %}
This feature is not yet available to the public. 
{% endhint %}

## Use Cases

Hide or show elements conditionally.

Show one of several elements, depending on the IF input params. 

{% hint style="success" %}
This supports CMS-driven use cases also. Both the parameter inputs for evaluation, and the evaluations themselves, can be stored in the CMS and attribute-bound. 
{% endhint %}

## Usage Notes

### Define your dynamic elements

To the elements you want to dynamically show and hide, add these attributes;

#### `wfu-logic-if`

Place this on the outer element that contains your elements to be evaluated for conditional display.

#### `wfu-logic-param-*` = ( value )

Place this on the same element that has `wfu-logic-if`. 

These parameters define the "inputs" that you can use in your evaluation statements. The `*` represents the name. 

e.g. `wfu-logic-param-startweek` here the param is named `startweek`. 

e.g. `wfu-logic-param-end_week` here the param is named `end_week`.  

{% hint style="warning" %}
**IMPORTANT**\
The param name portion must be all lowercase, but may contain underscores.  `startweek` and `start_week` are OK, `startWeek` is not. 
{% endhint %}

{% hint style="info" %}
Typically you will bind this attribute to a CMS field or component property, so that the data is dynamic. 
{% endhint %}

#### `wfu-logic-if-display` = ( eval statement )

Here's the magic. You can use simple JS evaluation statements to control display.

For example, suppose you have two params defined, `startweek` and `endweek`. You have four elements that you want to conditionally display...

* One if both `startweek` and `endweek` have values
* One if both `startweek` and `endweek` are blank
* One if `startweek` is defined, but `endweek` is blank
* One if `startweek` is blank, but `endweek` is defined

In a component, there is no conditional visibility built in, so this make it possible to create a similar capability using JS. 

On each of those four elements, you can define the eval rule that defined when it should be displayed, to wit; 

* One if both `startweek` and `endweek` have values
  * `wfu-logic-if-display` = `startweek && endweek`
* One if both `startweek` and `endweek` are blank
  * `wfu-logic-if-display` = `!startweek && !endweek`
* One if `startweek` is defined, but `endweek` is blank
  * `wfu-logic-if-display` = `startweek && !endweek`
* One if `startweek` is blank, but `endweek` is defined
  * `wfu-logic-if-display` = `!startweek && endweek`

### Evaluation Statement Syntax 

You can combine standard formula symbology such as parenthesis, not ( ! ), and ( && ) and or ( || ). For example; 

* price >= 10000
* product\_name = 'sale'

## Advanced Usage Notes

Any JS eval function will work, which means you can likely use window variables and other conditions beyond the data set ( untested ). 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-logic/if.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.