SA5 | Sygnal Attributes | Designed for Webflow
Buy Us a Beer!Community ForumMicro-Consulting
  • ➡️Github Repo
  • 👫Sygnal Attributes Community
  • 📘Overview
    • Sygnal Attributes v5
    • How to Add Custom Code
    • What is Sygnal Attributes?
    • Sponsor a Feature ✨
    • What's New?
    • Library Modules
    • Technical Notes & Goals
      • CSS Media Queries
      • Callback Handlers
      • Custom Attributes
    • Documentation
    • Configuration Blocks
      • Configuration Block Specification
    • Preloaders
    • Breakpoints
    • Component Support 🧪
    • Sygnal Attributes ( SA5 ) Support
    • Dev Team Notes
    • GDPR
    • SA6
    • Triggers, Events & Actions
      • Triggers
        • Click Triggers
        • Scroll Into View Trigger
        • Hover Trigger
        • Timer Trigger
        • Form Triggers 🧪
          • Form Submit Trigger 🧪
        • Exit Intent Trigger 🧪
        • ECommerce Triggers 🧪
        • Inactivity Trigger 🧪
        • Page Load Trigger 🧪
        • Url Hash Trigger 🧪
        • Gated Trigger 🧪
        • Link Triggers 🧪
        • Reactiv Triggers 🧪
        • Interaction Trigger 🧪
      • Events
        • Namespacing
        • Event Data
        • Link-Based Triggers 🧪
        • Breakpoints 🧪
        • Persistent Events 🧪
        • Gated Events 🧪
      • Actions
        • Click Actions
        • Alert Action
        • Visibility Actions
        • Scroll Into View Action
        • Video Actions 🧪
        • Audio Action 🧪
        • Class Adder Actions 🧪
        • Tab Element Actions 🧪
        • Interaction Actions 🧪
        • Form Actions 🧪
        • Navigate Actions 🧪
        • Script Actions 🧪
    • SA5 Core
      • Handlers
      • Controllers
      • Core Processing
      • Core Technical Notes
        • Element Tracking
  • 📘sa5-cache
    • 🔍About SA5's Cache Lib
    • Data Caching ❺
      • Cache Setup v4
  • 📘sa5-socialshare
    • 🔍About SA5's Social Share Lib
    • 🚀Quick Start | SA5 Social Share
    • Email Social Share ❺
  • 📘sa5-detect 🧪
    • 🔍About SA5's Detect Lib
    • 🚀Quick Start | SA5 Detect
    • Page
    • User Agent Detection
    • Geolocation Detection 🧪
      • Cache Setup v4
    • Detect Incognito Mode
  • 📘sa5-analytics
    • 🔍About SA5's Analytics Lib
    • 🚀Quick Start | SA5 Analytics
    • A/B and Multivariate Testing
    • UTM Tracking
    • Rel Attributes
    • GA Events
    • GTM Events ❺🧪
      • Important dataLayer Notes
      • Facebook
      • Google Analytics ( GA4 )
      • Future
  • 📘sa5-data
    • 🔍About SA5's Data Lib
    • 🚀Quick Start | SA5 Data & Data-Binding
    • Usage Notes
    • Concepts & Terminology
      • Data Paths
      • Complex Data Sources
      • Developing Concepts 📝
    • Data Sources ( Simple )
      • URL Querystring Data Source
      • URL Part Data Source
      • User Info Data Source
      • Cookies & Web Storage Data Sources 📝
      • Global Data Source 🧪
    • Data Sources ( Complex )
      • RichText Data Source 🧪
      • Defining Custom Data Sources
      • Collection List Data Source 📝
        • Developing Concepts | Collection List Data Sources
    • Data Binding
      • Conditional Visibility
      • Form Elements 📝
      • Templates & Macro Expansion 📝
      • Developing Concepts on Data-Binding 📝
      • Macro Expansion
        • Macro Expansion
        • Count Items
      • Preloaders
    • SA5 Data ( HSON ) ❺🧪
      • SA5 Data BETA Kit
      • JSON Data Variants
    • Advanced Use
    • SA5 Data JS API
    • Future 📝
      • External Data
      • One-Way v. 2-way Bindings
      • Reactive Bindings
      • Data Sources ( External ) 🧪
        • Google Sheets Data Source ⛔
        • GitHub Data Data Source ⛔
  • 📘sa5-forms
    • 🔍About SA5's Forms Lib
      • SA5 Forms Roadmap
    • 🚀Quick Start | SA5 Forms
      • SA5 Forms Future
    • Data-binding Form INPUTs & SELECTs ❺
    • Smart Form Webhook Handler ❺
      • Form Webhook Handler JS API Events
      • n8n Handler
      • ▶️Basin Handler
        • File Uploads
        • Future
      • ▶️Make ( Integromat ) Handler
      • Future
    • Form Data Validation
      • Invalid Field Indicators (Real-Time) 🧪
      • Invalid Field Indicators on Submit Attempt 🧪
      • Email validation
    • Remove Unchecked Checkboxes ✨
    • Preserve Line Breaks
    • Form IP Info ❺
    • File Uploads 📝
    • Custom Form Submit Button
    • File Downloads
    • Form Select Element
    • SA5 Forms API
    • Dynamic Forms
    • Form Success Redirect 🧪
    • Show / Hide Password 🧪
  • 📘sa5-html
    • 🔍About SA5's HTML Lib
      • Webflow Interactions
    • 🚀Quick Start | SA5 HTML
    • Advanced Element Sorting ❺
    • Advanced Element Filtering ❺
      • Useful Filtering Examples
    • Dynamic URLs 🧪
      • Future
    • Dynamic Attributes
      • Future
        • Smart Attributes 🧪
        • Prefix, Postfix, and Formatted Attributes 🧪
    • Scroll to Section
    • Breakpoints ❺
    • Limit Items by Breakpoint ❺
      • Designer CSS Embed
    • Limit Items to Multiple-of ❺
    • Numeric Sequencing ❺
    • Truncate Text w/ Ellipsis ❺
    • Encoded Email
    • Hide Section w/ Empty Collection Lists ❺
    • Decode HTML ❺
    • Markdown ❺
      • Themes
    • Transform ❺🧪
    • Code Formatting ❺🧪
    • CMS Code Injection ❺🧪
    • Responsive Tables ❺🧪
    • Text Formatting ❺🧪
    • Components ❺🧪
      • Component Object Positioning
    • Auto-Size IFRAMEs 🧪
    • Switch Case
    • Lazy Load
    • Gallery 🧪
    • Scroll Anchor
  • 📘sa5-layout
    • 🔍About SA5's Layout Lib
      • Future
    • 🚀Quick Start | SA5 Layout Lib
    • Layout ❺
      • Tabs Layout Handler
      • Slider Layout Handler 🧪
      • Future
    • Element Groups ❺🧪
    • Equal Height Rows ❺🧪
  • 📘sa5-logic 🧪
    • 🔍About SA5's Logic Lib
      • Future
    • 🚀Quick Start | SA5 Logic Lib
    • If ❺🧪
    • Switch ❺🧪
  • 📘sa5-booking
    • 🔍About SA5's Booking Lib
    • 🚀Quick Start | SA5 Booking Lib
    • GetTimely ❺🧪
    • SimplyBook ❺🧪
  • 📘sa5-richtext
    • 🔍About SA5's Rich Text Lib
      • Future
    • 🚀Quick Start | SA5 Rich Text
    • Nested Lists ❺
      • Legacy Feature Notes
    • GitHub Gists ❺
      • ▶️Video Tutorials
      • Why Gist?
      • Technical Notes
      • Future
    • Code Blocks 🧪
      • Wrapping Code Blocks
      • Copy Code to Clipboard
    • Excalidraw ( SVG Embeds )
    • URL Expanders 🧪
    • Annotations 🧪
    • Text SPAN Formatting 🧪
    • Lightboxes 🧪
      • Future
    • Embeddables
    • Richtext ❺🧪
      • CSS Isolation
    • Blockquotes
    • Call-Outs
    • Responsive Inline Images
  • 📘sa5-table
    • HTML Tables
  • 📘sa5-kiosk 🧪
    • 🔍About SA5's Kiosk Lib
    • 🚀Quick Start | SA5 Kiosk
    • Usage Notes
    • Kiosk Hardware & Browser Setup
    • Kiosk Base 🧪
    • Inactivity Timer 🧪
    • Display Mode
    • Technical Notes
    • Future
      • Smart Watch Notes
    • ToDo
  • 📘sa5-hotkeys
    • 🔍About SA5's Hotkeys Lib
    • 🚀Quick Start | SA5 Hotkeys
    • Hotkeys ❺
      • Future
  • 📘sa5-commerce
    • Payment Providers
    • Price in Local Currency 🧪
  • 📘sa5-demo
    • Webflow Preview Link
  • 📘sa5-ui
    • 🔍About SA5's UI Lib
    • 🚀Quick Start | SA5 UI
    • 5-Star Ratings Component ❺
  • 📘sa5-cro
    • 🔍About SA5's CRO Lib
    • 🚀Quick Start | SA5 CRO
    • Conversion Tracking Event
  • 📘sa5-url
    • 🔍About SA5's Url Lib
    • 🚀Quick Start | SA5 Url
    • Query Param Passthrough
      • Future
    • External Link Targeting
    • Relative Link Fixups ⛔
  • 📘sa5-video
    • 🔍About SA5's Webflow Video Lib
    • 🚀Quick Start | SA5 Video
    • Background Video Poster
    • Triggers, Events & Actions
    • YouTube Hide Related Videos [BETA]
      • Styling Options
      • Future
    • Media Pop-Ups 🧪
    • Video Player ( Direct )
    • Video Controller File Format
    • Media Controller
    • Video Player Controller
      • Video Playback Spec 🧪
      • YouTube Video Data 🧪
      • Loom Video Data 🧪
  • 📘sa5-elements
    • 🔍About SA5's Elements Lib
      • Elements Lib Future Plans
    • 🚀Quick Start | SA5 Elements
    • Element Actions 🧪
    • Tabs Element
      • Tabs Future Plans
      • Triggers, Events & Actions 🧪
      • Tabs API
    • Slider Element
      • Triggers, Events & Actions 🧪
      • Slider JS API
      • Slider JS API Events
      • Advanced Slider Use
      • Future
    • Deck Controller Element ⛔
    • Button Element
      • Triggers, Events & Actions 🧪
    • Dropdown Element
      • Triggers, Events & Actions 🧪
      • Future
    • Lightbox Element
      • CMS Lightbox + Groups
      • CMS Lightbox + Captions
        • Popular Lightbox Setups
      • Lightbox JS API
      • Triggers, Events & Actions 🧪
      • SA5 Lightbox Future
    • Radio Button Element 🧪
      • Triggers, Events & Actions 🧪
    • Autocomplete Element
      • Styling
      • Future
    • Accordion Element
      • Accordion Future Plans
      • Triggers, Events & Actions 🧪
      • Accordion API
    • Lottie Element ❺🧪
      • Triggers, Events & Actions 🧪
    • Locale Switcher Element ❺🧪
      • Technical Notes
      • JavaScript API
  • 📘sa5-format
    • 🔍About SA5's Format Lib
    • 🚀Quick Start | SA5 Format
    • Format Numbers & Currencies ❺
    • Format Dates ❺
      • Use Cases
        • Custom Format a Date
        • Localize a Date
        • From and To Relative Timespans
        • Age
      • Future - Date formatting
      • Setup Your Date Field for Good Parsing
  • 📘sa5-user-accounts
    • 🔍About SA5's Webflow User Accounts Lib
    • 🚀Quick Start | SA5 User Accounts
    • Logged-In User Info ❺
      • Custom User Fields
      • Webflow's UserID
      • Access Groups
        • Using Access Groups for Conditional Visibility
        • Using Access Groups for Routing ❺🧪
      • The User object
        • The User Object Lifecycle
      • Tips & Best Practices
      • User Info FAQs
      • Troubleshooting
      • ⏩Future Plans & Ideas
      • BETA testing
      • Technical Notes - Interfaces
      • Future Development
    • Advanced Log-In & Sign-Up Flow ❺
    • Conditional Element Display ❺
    • Expand Login Button ❺
  • 📘sa5-track
    • 🔍About SA5's Tracking Lib
    • 🚀Quick Start | SA5 Tracking
    • Webflow Cookies & Storage Tracking ❺
      • Conditional Element Visibility
      • Tracking Page Visits
      • Tracking Button Clicks
      • Track Query String Params
      • Track Checkbox State
      • Cloneable Demo
    • SA5 Referer Tracking ❺🧪
    • Future Plans
      • Likes & Favorites Tracking ❺🧪
      • Recently Viewed Tracking ❺🧪
  • 📘sa5-modals
    • 🔍About SA5's Webflow Modals & Popups Lib
    • 🚀Quick Start | SA5 Modals & Popups
    • Webflow Popups & Modals
      • Triggers
      • Gating Modals
      • Modal Design & Styling Notes
      • Simple Modals v. Custom Modals
      • Modal JS API
      • Page-Specific Modal Control
      • Common Configurations
      • Pro-Tips
      • SA5 Modals Roadmap & Future
        • Future Attributes
        • Future Triggers
    • Dismissible Elements
    • Triggers, Events & Actions 🧪
    • Webflow Modals & Popups Auto-Open and Auto-Close
    • Side Panels 🧪
  • 📘sa5-selectcustom
    • 🔍About SA5's Custom Form Select Lib
    • 🚀Quick Start | SA5 Custom Form Select
    • Triggers, Events & Actions 🧪
    • Custom Form Select ❺🧪
  • 📘sa5-gallery
    • 🔍About SA5's Gallery Lib
    • 🚀Quick Start | SA5 Gallery
    • Gallery ❺🧪
      • Simple Collage Layout Engine
  • 📘sa5-effects
    • 🔍About SA5's Effects Lib
    • 🚀Quick Start | SA5 Effects
    • Depthmap (Fake 3D) Image ❺🧪
    • Image Zoom
  • 📘sa5-fixup
    • Viewport META
    • Webflow Fixups ❺
  • 📘sa5-countup
    • CountUp Animated Numbers
  • 📘sa5-seo
    • 🔍About SA5's SEO Lib
    • 🚀Quick Start | SA5 SEO
    • Noindex ❺🧪
    • Nofollow ❺🧪
    • JSON-LD ❺🧪
      • JSON-LD Article ❺🧪
      • JSON-LD Video ❺🧪
      • JSON-LD Course Info ❺🧪
      • JSON-LD WebPage
      • JSON-LD Sitelinks Searchbox ❺🧪
  • 📘sa5-core
    • SA5 Core ❺
    • Webflow Designer Support ❺
  • 📘sa5-embeds
    • 🔍About SA5's Embeds Lib
    • 🚀Quick Start | SA5 Embeds
    • Table Embeds ❺
      • Google Doc Table Embeds
        • Styling Table Embeds
      • Google Sheets Table Embeds
      • Future
  • 📘sa5-state
    • 🔍About SA5's State Lib
    • 🚀Quick Start | SA5 State
    • State ❺🧪
      • State Handlers
        • SA5 State Handler
        • MobX
        • Redux
  • 📘sa5-localization
    • 🔍About SA5's Localization Lib
    • 🚀Quick Start | SA5 Localization
    • Localization Functions
    • Locale URLs
    • Sort locales in the order you choose
  • 📘sa5-404
    • 🔍About SA5's 404 Lib
    • 🚀Quick Start | SA5 404
    • 404 Smart Search ❺
  • 📘sa5-calc
    • 🔍About SA5's Calc Lib
      • Future
    • 🚀Quick Start | SA5 Calc
    • Count & Sum Items ❺
      • Source Types
      • Calc Use Cases
  • 📘sa5-trigger ⛔
    • 🔍About SA5's Trigger Lib
    • 🚀Quick Start | SA5 Trigger
    • IX Triggers ( Legacy ) ❺
  • 📘Deprecated Features
    • Repeater ⛔
    • Lipsum Generator ⛔
    • JSON Formatter ⛔
Powered by GitBook
On this page
  • wfu-bind = ( data-path )
  • wfu-bind-content = (data-context)
  • Data Paths
  • SEO Notes
  • Deprecated Notes
  • Dynamic DSD References, using Data-Binding Context

Was this helpful?

  1. sa5-data

Data Binding

How SA5's databinding works

SA5 supports binding data in two ways;

  • Element binding replaces the entire content of the element. It is also element-type-aware, so that for example binding to a text element replaces the inner text content, while binding to a form input element sets the value of that input element.

  • Content binding selectively binds data to the content within an element, using handlebars style macro-expressions of the format {{ data-path }}. This is useful for e.g. rich text elements and descriptive text where you only wish to replace specific words. It is also designed to support CMS content.

Currently, all binding is specific to a Data Item, which always resolves to a text value. In the future, lists, tables, objects and media elements may be added.

Data-Binding is read-only. It's designed to integrate information into your site from various internal and external sources - but not to update those data sources.

wfu-bind = ( data-path )

Apply the wfu-bind attribute to any element which you want to replace the full content of with your data-bound content.

You can place wfu-bind on;

  • Simple content elements;

    • Text elements

    • Paragraph elements

    • Heading elements

  • Form elements, including;

    • INPUT elements

    • SELECT elements - case sensitive

    • TEXTAREA elements

    • CHECKBOX elements

Complex elements, including sliders, tabs, and rich text blocks don't make sense here, since there isn't a clear point for content-binding a simple string value. Some elements such as images and video elements may be supported in the future.

The data-path value can be any valid SA5 data path that identifies a data point.

Examples;

wfu-bind=$query.name

wfu-bind=+events.item.slug

wfu-bind=$local.test

Here's an example of an element that is bound to the current user's custom data, specifically a the custom data you've named link-field.

Setting defaults. The value will only be applied if one is found, therefore you can specify a default value by setting initial content for the element itself. Here we have ... but it can be whatever you prefer.

wfu-bind-content = (data-context)

SA5's contextual binding is used to provide macro expansion support within the content of a plain-text or rich-text template element.

Templates are text marked up with field that contain SA5 data paths, like this;

{{ $user.data.link-field }}

When the template is processed, these are expanded.

For certain data sources such as $db, it's common to specify a data context on the element. This allows the context to change to e.g. a collection list item before the content binding occurs.

Data Paths

At the center of data binding is SA5's data paths, which are formatted strings that specifically identify the data that you want to bind.

A data path is a dot-notated string with several parts;

<data-source type>.<data-source-name>.<object-id>.<field-id>

Path Root
Abbr
Data Source Type
Data Path Examples

$user

@

User object

  • $user.name - The current user's name

  • @data.birthdate - A custom User field named birthdate

$cookie

Cookie

  • $cookie.foo - The cookie named foo

$local

Local storage

  • $local.myval - A Webstorage Local-stored value named myval.

$session

Session storage

  • $session.myval - A WebStorage Session-stored value named myval.

$query

?

Query string

  • $query.foo - The query param named foo.

  • ?foo - The query param named foo.

$db

+

Database

  • $db.my-db.my-record.my-field - Describes a value in an SA5 Datasource.

$global

Site global vars

  • $global.year - The year property of a Global object you've created.

Abbreviations are shorthand for the full datasource type name, so e.g. $user.name and @name are considered identical.

SEO Notes

Bound data may or may not be picked up by search indexing bots. Google is generally good at executing script and indexing the page after modification, however you will need to test this yourself.

Deprecated Notes

Ignore the notes below, we're reviewing and integrating during migration.

Dynamic DSD References, using Data-Binding Context

You can specify fixed reference items using a fully-qualified DSD like this, however if the template is in a dynamic context such as a collection list or collection page, SA5 allows you to set the context for partial DSDs to operate in.

The way this works is to assign these attributes to the parent of your wfu-bind-content tagged element.

  • wfu-bind-dsn = The data source name, e.g. my-data.

  • wfu-bind-item-id = The data source item ID, e.g. row-28.

These context elements can be on the same element as your wfu-bind-content tag, but they can also be on any ancestor element. They also do not need to be on the same element. This gives you different flexibilities

Data Binding can be applied to;

  • Any text element

  • Rich text elements, to {{ expand }} macro content

  • Form input fields, specifically

    • Text fields, to set the current text input

    • Textarea fields, to set the current text input

    • Checkboxes, to set the checked/unchecked state

    • Select fields, to select the current item

Last updated 2 months ago

Was this helpful?

📘