Skip to main content
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
New List Block

New List Block

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.
RENDERED OUTPUTThe rendered output of the list block is a table element. For more list customization options, you can use a template block with helpers.
Simple List Block

Simple List Block

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

List Block 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 transparent.
List Block Background Color

List Block Background Color

Rendered Bulleted List

Rendered Bulleted List

​
List With Children

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

​
List With Images

INFOAvailable for email channels only. Other channels display as list with children.
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
List Block Configuration Details

List Block Configuration Details