# Macro Expansion

{% hint style="danger" %}
OUTDATED SA4 DOCS
{% endhint %}

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 <a href="#preparing-the-dictionary" id="preparing-the-dictionary"></a>

1. Load data from an external data source. Here we’re using a [Google Sheet](https://docs.google.com/spreadsheets/d/16lPOiFz5Ow-FTro5SWS-m00fNhRjgsiyeSBdme3gKX0/edit#gid=118669749) 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 <a href="#example-json-content" id="example-json-content"></a>

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 <a href="#applying-the-dictionary" id="applying-the-dictionary"></a>

#### Option 1: Tagged Elements <a href="#option-1-tagged-elements" id="option-1-tagged-elements"></a>

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 <a href="#option-2-macro-expansion" id="option-2-macro-expansion"></a>

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.

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-data/binding-data/macro-expansion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.