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.

Preparing the Dictionary

1. Load data from an external data source. Here we’re using a Google Sheet with calculated fields.

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 and Value.

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.

Example JSON content

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.

Applying the Dictionary

Option 1: Tagged Elements

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

Option 2: Macro Expansion

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.