If ❺🧪

Dynamically show and hide elements on your page based on user actions

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.

This feature is not yet available to the public.

Use Cases

Hide or show elements conditionally.

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

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.

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.

IMPORTANT The param name portion must be all lowercase, but may contain underscores. startweek and start_week are OK, startWeek is not.

Typically you will bind this attribute to a CMS field or component property, so that the data is dynamic.

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 ).