Data makes your website interesting.
Webflow’s CMS and Collection Lists offer some great capabilities but they also have limitations-
- Inability to display data in a table
- Limitations on nesting colleciton lists
- Inability to populate an element’s custom attributes with data from a Collection List
WFU enables new ways for you to access and integrate data into your Webflow site- both from the Webflow CMS, and from external sources such as public APIs.
Capabilities are divided into two groups-
Creating JSON data sources;
- Turning a Webflow CollectionList into a usable Data source
- Turning a remote JSON or CSV resource into a usable Data source
Data-binding Webflow elements to those sources;
- Binding lists to FORM Dropdown elements, as select options
- Binding lists to FORM Text elements, as autocomplete options
What can you do?
- Display the count of items in a datasource
How it Works
WFU data sources are simple JSON arrays built from Collection Lists that you prepare. These are stored in a Map collection that I refer database, which enables you to retrieve multiple data sources
Data Shapes
WFU utilizes 3 types of JSON simple structural patterns which I refer to as data shapes;
- Table. A JSON array in which each element contains the same set of keys. Typically this is constructed from a tabular source such as a Webflow Collection List, or a CSV file.
- List. A Table with only one or two fields per element. Lists are primarily used for data-binding to FORM controls.
- Dictionary. A List, which has a
key
field and avalue
field. The key field content is expected to be unique. Dictionaries are used for lookups in template processing.