Actions

An SA5 Action is an action that is be performed when an SA5 Event occurs.

Example Actions include;

• Simulate a click on an element

• Navigate to another URL

• Call a webhook

• Submit a form

• Switch a tab

• etc.

Types of Actions

Broadly, there are two types of SA5 Actions...

• Element Actions. An element-specific action such as clicking a button or submitting a form. These are generally configured directly on the target element, using custom attributes.

• Page Actions. These are actions that occur in the context of the page, but are not tied to any specific element. We generally configure these using a special SA5 script action block.

Modal Actions

Element Actions

Tab Element Actions
Slider Element Actions

Element-Level Actions

These actions are generally defined using custom attributes.

Action	Detail	Applies to	Description	Notes
Click wfu-action-click		Any element	Fire a click event from script to trigger an element
Interaction				wfu-action-click, with the element also configured as a click trigger for a Webflow interaction.
Script wfu-action-script		? Special SA5 block element	Invoke a script, or function
Function wfu-action-function				Invoke a function
Scroll Into View		Any Element		Offset?
Submit		Form
Popup	Optional scope	SA5 Popup
Add Class wfu-action-class-add	Class name		Adds a class
Remove Class wfu-action-class-remove	Class name		Removes a class
Toggle Class wfu-action-class-toggle	Class name		Toggles the presence/absence of a class
Hide / Show Elements

Mode

Hide/show certain elements

Class adder, etc

Based on localStorage / cookie / sessionStorage

Video Element

Play

Pause

Seek sec or %

Fullscreen

Lottie & Rive Elements

Play

Pause

The underlying link approach has proven very useful. We want to expand the capabilities to handle other use cases;

• Trigger interactions ( via a button trigger )

• Trigger chatbots

• Trigger Gista with a query

• Trigger custom JS, JS-based modals, etc.

And also possibly;

• Trigger GTM datalayer and events

Page-Level Actions

These actions are generally defined by an SA5 Configuration Block;

Action
Navigate
Script	nvoke a script, or function
OnLoad
OnScroll%
Exit Intent
Timer

SA5 block 

Event Detail

In some cases, we want to pass detail;

• Context or scope so that the event is more specific, e.g. invoke a specific pop-up from a CMS-driven collection list of popups.

• Class names or other key data needed by the Action handler.

Ideally we want to support multiple detail pieces in the future, and to allow for multiple non-conflicting Actions on the same element.

To support this, I'm considering details as a suffix on the event, e.g.;

Suffix	Notes
*:class	Might indicate a specific class name to apply in the case of class add / remove / toggle
*:item	Limit to a specific item
*:offset	Used to offset a scroll-to-element position

Triggering an Event w/ Details

Detail

<div wfu-trigger-click="popup" wfu-trigger-click:item="potato"> ... </div> 

More verbose, but better for data-binding in a collection list.

<div wfu-trigger-class-add="event1" wfu-trigger-click:class="red-text"> ... </div> 

Abbreviated Events w/ Details

In some Triggers & Actions it may be useful to offer a simplified syntax for convenience when no custom attribute data-binding is needed;

For example, this click trigger-

<div wfu-trigger-click="popup#potato"> ... </div> 

• Is triggered by a click

• Invokes the Event popup on elements where item is potato.

Meanwhile this

Or;

<div wfu-action-class-add="event1#foo"> ... </div> 

Finds all elements tagged with Triggers a click Action on all elements tagged with the popup event, where the item is potato.

Putting it Together

Here's an example from SA5;

Constructing event detail;

<div wfu-trigger-click="popup">
  <p>
    <a href="##potato"></a>    
  </p> 
</div> 

<div>
  <div> <!-- interactions popup -->  
    <button wfu-action-click="popup" wfu-action-click:item="potato">Invoke popup</button> 
    ...
  </div> 
</div>

Receiving event detail;

Trigger Source Gating

UNDER CONSIDERATION.

Certain Actions can be restricted to certain trigger sources.

We may distinguish between different Trigger sources, such as user-invoked triggers, v. system-invoked triggers.

Trigger type	User sourced	System sourced
Click	Yes, user clicks on an item	Yes, script-generated click, or system-generated click from another SA5 Event
Timer	No	Yes, always
etc.

This differentiation may be useful for;

• Handling different action sources differently

• Preventing loops by system-generated events

System-triggers

This could be specified by a prefix to the event name.

For example, wfu-action-click = event-name

	Invoked by
event-name	Any trigger source, standard convention
$event-name	Only
&event-name
event-name#event-detail

Defined a timer as a trigger

<script type="application/sa+json" handler="Action.Script">
{
  "@context": "https://attr.sygnal.com",
  "@type": "ScriptAction",
  "@version": "0.1",
  "timer": "60", 
  "timerRepeat": "120",
  "event": "my-event" 
}
</script>

Technical Notes

Categories of Actions

We have...

• Element Actions. An element-specific action such as clicking a button of submitting a form. These are generally configured directly on the target element.

• Script Actions. An action that is defined by a special SA5 script action block.

Timer example;

<script type="application/sa+json" handler="Action.Script" event="my-event">
{
  "@context": "https://attr.sygnal.com",
  "@type": "TimerAction", 
  "@version": "0.1",
  "timer": "60", 
  "timerRepeat": "120"
}
</script>

Navigation example;

<script type="application/sa+json" handler="Action.Script" event="event1">
{
  "@context": "https://attr.sygnal.com",
  "@type": "NavigationAction", 
  "@version": "0.1",
  "url": "https://something.com",
  "target": "_blank" 
}
</script>