Macro Expansion
OUTDATED SA4 DOCS
WFU macro expansion allows you to populate specific values in your Webflow pages, from a remote data source.
Insert text strings, numeric values, or calculated spreadsheet results anywhere you like.
Values are stored in a dictionary-style JSON array.
- 1.
- 2.The data source must have 2 identified columns - a unique Key column, and Value column. In a Google Sheet source, those are unique column header names. In this demo we are using
Name
andValue
. - 3.Construct a dictionary structure with those key-value pairs. This is a javascript
Map
element. - 4.Find all HTML elements tagged to a specific Key, and load that Value.
This is the Google Sheet content, after it has been converted to JSON. Note the
Key
and Value
column names become field keys in the JSON.[
{
"Name": "Countries",
"Value": "241"
},
{
"Name": "Europe",
"Value": "52"
},
{
"Name": "Population",
"Value": "7,780,381,869"
},
{
"Name": "SizeBillion",
"Value": "2"
},
{
"Name": "Size100Million",
"Value": "14"
}
]
Once the dictionary is created, you can use it.
Identify elements in which you want data loaded where, using the
wfu-map-dict
custom attribute.e.g.
<span wfu-map-dict="Countries"></span>
Each of the bolded values in this list are loaded dynamically from the Google Sheet.
- Countries: 241
- Europe: 52
- Population: 7,780,381,869
- Size > 1 Billion: 2
- Size > 100 Million: 14
WFU also provides for macro expansion. In your text, use the construction
{{ Key Name }}
to identify where you want values inserted. This is particularly of use in Rich Text Elements.Text or Rich Text element itself must be tagged with the custom attribute
wfu-data-macros="datasourceName"
.Global population is growing!
Currently, there are {{ Countries }} countries in the world,
of which {{ Europe }} are in Europe.
Of a total global population of {{ Population }},
{{ Size100Million }} of our contries are over 100 million population,
with {{ SizeBillion }} over 1 billion.
Here’s an example of tag-expanded content.
Global population is growing!
Currently, there are 241 countries in the world, of which 52 are in Europe.
Of a total global population of 7,780,381,869, 14 of our countries are over 100 million population, with 2 over 1 billion.
Last modified 1mo ago