List Blocks

List Blocks in Courier provide a powerful way to display complex, layered data across all notification channels. List Blocks allow you to dynamically render arrays of data in your notifications. They’re available across all channels and come in four main types:

1. Simple list
2. List with children
3. List with images (email only)
4. List with children and images (email only)

​

Working With List Blocks

Availability: All channels

The repeatable list block allows you to easily display more complex layered data. This data is passed in the data object as an array during a send. The option to display an image differs by channel.

To switch from a simple list to numbered lists, add a list then open the list details:

​

Types of List Blocks

​

Simple List

Displays a row for each item in the specified array, similar to a text block with variables scoped to the array.

To render a bulleted simple list, the background color for the list block must be set to transaparent.

​

List With Children

Similar to a simple list, but includes child rows for nested array data.

​

List With Images

Includes images alongside list items. Images can be linked and customized using variables.

​

List With Children and Images

Combines features of lists with children and lists with images, allowing for complex, hierarchical data representation with visual elements.

​

Configuring List Blocks

​

Path

Set the JSONPath expression to point to the array you want to display. For example:

{
  "data": {
    "trainers": [ "Ash", "Misty", "Brock"],
    "name": "Ash Ketchum",
    "region": "Kanto",
    "pokemon": [
      {
        "name": "Bulbasaur",
        "image": "https://example.com/001.png",
        "types": [
          { "name": "grass", "image": "https://example.com/grass.png" },
          { "name": "poison", "image": "https://example.com/poison.png" }
        ]
      },
      {
        "name": "Ivysaur",
        "image": "https://example.com/002.png",
        "types": [
          { "name": "grass", "image": "https://example.com/grass.png" },
          { "name": "poison", "image": "https://example.com/poison.png" }
        ]
      },
      {
        "name": "Venusaur",
        "image": "https://example.com/003.png",
        "types": [
          { "name": "grass", "image": "https://example.com/grass.png" },
          { "name": "poison", "image": "https://example.com/poison.png" }
        ]
      }
    ],
  }
}

To list all Pokemon, set the path to pokemon.

​

Data References

• Inside path scope: Use {propertyName} to reference each item in the array
  • e.g. to display the name of the Pokemon, if the path is set to pokemon, you can use the variable {name}.
• Outside path scope: Use {$.data.propertyName} or {propertyName} if there isn’t a property name conflict.
  • e.g. to display the top level name (Ash Ketchum), you can use the variable {$.data.name}.
  • e.g. to display the region, you can use the variable {region}.
• Array of strings: Use {@} to reference each item
  • e.g. to display each trainer in the trainers array, you can use the variable {@}.

​

Styling

• Switch between bulleted and numbered lists in the list details
• Set background color for supported channels using the color picker