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

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

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>

Last updated

Was this helpful?