Sitecore Send Iterations: Complex Data Structures in Transactional Emails

Sitecore Send keeps improving and adding new features to enhance the Send experience. Their latest addition extends Transactional Campaigns: now, Iterations can be used in Transactional Campaigns.

Iterations

Initially, only a simple string key-value structure was allowed in the Substitutions body. Now, you can pass complex data objects in the API payload:

{
    ...
    "Personalizations": [
        {
            "To": ...,
            "Substitutions": {
                "complexObject": {
                    "list": [
                        {
                            "name": "List Item 1",
                            "review": {
                                "rating": 5,
                                "amountOfReviews": 193
                            },
                            "tags": [
                                "sitecore",
                                "send",
                                "transactional"
                            ]
                        },
                        ...
                    ]
                }
            }
        }
    ]
}

And use the following syntax to iterate through complex data objects:

{{#each complexObject.list}}
{{this.name}} : (Rating: {{this.review.rating}})
<ul>
    {{#each this.tags}}
    <li>{{this}}</li>
    {{/each this.tags}}
</ul>
{{/each complexObject.list}}

Example

To generate an email like this:

The Transactional Email design looks like this:

And the code for Iterations is inserted into the HTML Item:

As you can see, the iteration token can be combined with standard string token syntax.

The HTML code used for Iteration:

<div class="container">
    <div>
        {{#each content.articles}}
            <a href="{{this.href}}">
                <img src="{{this.image}}" alt="{{this.title}}" style="float: left;width: 50px;margin-right: 15px;border-radius: 50%;">
                <h2>{{this.title}}</h2>
            </a>
            <p style="margin-bottom: 10px">{{this.description}}</p>
            {{#each this.tags}}
                <span style="background-color: lightblue; padding: 2px 5px; margin-right: 5px;">{{this}}</span>
            {{/each this.tags}}
            <hr style="margin-bottom: 10px;"/>
        {{/each content.articles}}
    </div>
</div>

See the full code and example here: Gist. Use this link to get the campaign JSON file (which can be imported) and to see the full request body.

Use in Code

Use the latest SitecoreSend.SDK NuGet package (v0.1.12). Then, in your code:

var request = EmailRequestBuilder.Start(campaign)
    .AddPersonalization(new Personalization(testEmail, "Igor Zharikov")
    {
        Substitutions = new Dictionary<string, object>()
        {
            {"orderNumber", "123456"},
            {"paymentMethod", "PayTest"},
            {"total", "123.00 USD"},
            {"complex", new
            {
                items = new List<string>() {"item1", "item2"},
            }},
        },
    })
    ...
    .Build();

var result = await _send.Transactional.Send(request);

Conclusion

It’s great to see continuous updates and new features in Sitecore Send. The support for complex data structures in transactional emails opens the door to highly dynamic and personalized email experiences.

If you have any questions or suggestions, feel free to reach out to me.