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.
The features here are meant to be very flexible, but here are a few common use cases we see often;
- 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.
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
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
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>
Currently this primarily refers to Collection List based data sources.
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.
Here are some popular data sources you can bind to-
- Query string params
- Url & url parts
- Collection list data
- User Info
- Cookies & Web Storage
NOT YET RELEASED: Coming soon
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['datastoreLoaded',
(ds) => {
console.log("DATASTORE LOADED", ds);
}]);
</script>
Last modified 1mo ago