Data Sources & Data-Binding ❺

Creatively data into your Webflow sites

SA5's Data features have two facets-

Data Sources refer to the ability to assemble, store, and retrieve data from Collection Lists, remote sources, the querystring, webStorage, cookies, and more. The data is collected and organized into a Datastore.
Data Binding uses these sources to pull data into your page, text element, rich text templates, form fields, and more. It lets you easily display data from these sources using simple markup.

The Data Source & Data Binding portions of Sygnal Attributes comprise probably the largest and most complex part of our libraries. They're used by themselves, but are also relied on by our other libraries. We'll be migrating and adding new capabilities as we go.

Use Cases

The features here are meant to be very flexible, but here are a few common use cases we see often;

Populate form fields from querystring params ( see demo )
Populate form fields to include the current URL or path ( see demo )
Populate form fields from webStorage or cookies, as part of a referral tracking system ( see demo )
Populate form fields with current user data, such as the user's email & name
Perform "mad libs" style text replacements in rich text content, mixed from Collection List fields and other sources ( see demo )

In combination, these can be used to move data easily through your site, and to pass information back to your server in hidden fields as users submit forms.

Features Coming Soon

We'll be rebuilding and adding these features soon;

Pulling external data from Google Sheets and Google Docs
Pulling external data from custom public ( unsecured ) APIs
Support for custom data source registrations, such as adding your own objects for databinding purposes
Display the count of items in a data source

Key Points

SA5 Data Sources & Data-Binding are;

Inbound-only. Our data & data-binding features are one-way. They're designed to integrate information into your site from various sources - but not to update external data stores. If you are looking for round-trip capabilities, it's likely you need an application platform like Wized + Xano.
Versatile. Mix and match static and dynamic data at will.
Extensible. Add your own data sources.

Data Sources include;

Collection-lists, which are prepared to allow
Arbitrary, static data-sets
Query string params
The current URL & URL parts
LocalStorage items
SessionStorage items
Cookies

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

Getting Started ( NOCODE )

STEP 1 - Add the Library

Install this code in before HEAD, site-wide or on the specific pages you want the script to affect.

<!-- Sygnal Attributes 5 | Data --> 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/css/webflow-data.css">
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/nocode/webflow-data.js"></script>

STEP 2 - Setup any custom data sources you want

Currently this primarily refers to Collection List based data sources.

Collection List Data Source 📝

STEP 3 - Setup your data-binding attributes

Apply your data-binding attributes to the elements you want, and create the templates you want. The specifics depend on the elemnts you are binding, and the data sources you are using.

See the Binding Data section for details.

Here are some popular data sources you can bind to-

Query string params
Url & url parts
Collection list data
User Info
Cookies & Web Storage

STEP 4 - ( Optional ) Add a callback that executes custom code once data is loaded

NOT YET RELEASED: Coming soon

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['datastoreLoaded', 
  (ds) => {
    console.log("DATASTORE LOADED", ds); 
  }]); 
</script>

Last updated 11 months ago