---
category: [Administration & Integrations, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions, Platform and Product Extensions/Workday Extend, Platform and Product Extensions/Integration]
keyword: [Extend, Presentation Components, widgets, tags, UI components]
nav: wcp_docs
parent_url: /wcp_docs/
title: cardContainer
layout: subsection
wd_wcptag: cardContainer
---

<a id="section_k24_l42_ntb"></a>
Container for a group of cards that display on a page.

A `cardContainer` can contain static and dynamic sets of cards, each presenting easily consumable snapshots of data and links to tasks in a small container. Multiple cards in a `cardContainer` can create a dashboard-like experience on a page.

A `card` inside a `cardContainer`:

-   Must reference a [Page Configuration Card](/wcp_docs/GUID-c066f111-6fd4-4b72-9567-8fedf220ad9f-enHYPHENus.html), which defines the template card.

    Page Configuration Cards are located in the <b>Page Configurations</b> &gt; <b>Cards</b> section in the <b>Components</b> panel of App Builder.

-   Can pass parameters to the Page Configuration Card for dynamic content.

    Parameters enable you to reuse a Page Configuration Card across multiple pages with different contexts.

-   Is different from an Extend Card.

    Workday administrators can add Extend Cards to several entry points in Workday, such as the Home page, Workday-delivered Hubs, Search, and Journey. Extend Cards are located in the <b>Cards</b> section in the <b>Components</b> panel of App Builder.



You can only add `card` tags inside a `cardContainer` in a PMD.

Use `cardContainer` on view and edit pages.

## <a id="section_usage"></a>Displaying Static Cards

The `cards` attribute in a `cardContainer` is a static collection of cards, each referencing a Page Configuration Card.

This sample `cardContainer` contains a card that references a Page Configuration Card whose `id` is <i>simpleStatusCard</i>

```
{
  "type": "cardContainer",
  "layout": "grid",
  "cards": [
    {
      "type": "card",
      "cardId": "simpleStatusCard",
      "parameters": "<% {
          'title': 'Good news!',
          'subtitle': date:getTodaysDate(date:getDateTimeZone(userTimeZone)),
          'icon': 'wd-accent-fun',
          'indicatorLabel': 'Success',
          'indicatorColor': 'Green',
          'body': 'You have successfully submitted a reimbursement request.'
      }%>"
    }
  ]
}
```

## <a id="section_1"></a>Displaying Dynamic Cards

You can add a dynamic set of cards to a `cardContainer`. The `cardContainer` renders a dynamic set of cards by iterating over a data list with a template card. To display a dynamic set of cards, add the `dynamicCards` attribute of `cardContainer`. You'll need:

-   A script or endpoint that returns the list of data to iterate.
-   A Page Configuration Card that defines the template card.

    Ensure that:

    -   The `id` of the Page Configuration Card matches the template `cardId`.
    -   The `parameters` in the Page Configuration Card correspond to fields you can pass from the data list.



This sample `cardContainer` uses `dynamicCards`, which loops over help case data and renders each item using a simple card template.

```
{
 "type": "cardContainer",
 "layout": "grid",
 "dynamicCards": {
   "on": "<% helpCases.data %>",
   "as": "item",
   "template": {
     "cardId": "caseCard",
     "parameters": "<% {
       'title': item.title,
       'subtitle': item.caseID,
       'icon': 'wd-accent-clipboard-checklist',
       'indicator': {
         'label': item.status.descriptor
       },
       'body': item.detailedMessage,
       'id': item.id
     } %>"
   }
 }
}
```

The sample <i>helpCases</i> endpoint:

```
{
 "name": "helpCases",
 "baseUrlType": "workday-helpCase",
 "url": "/cases?openCases=true&desc=true&limit=5",
 "authType": "sso"
}
```

The sample <i>caseCard</i> Page Configuration Card:

```
{
   "id": "caseCard",
   "parameters": ["title", "subtitle", "icon", "indicator", "body", "id"],
   "header": {
       "title": "<% title %>",
       "subtitle": "<% subtitle %>",
       "icon": "<% icon ?: null %>",
       "indicator": {
           "label": "<% indicator.label ?: null %>",
           "color": "<% indicator.color ?: null %>"
       }
   },
   "body": {
       "type": "simpleCard",
       "value": "<% string:toString(body) %>"
   },
   "footer": [
       {
           "label": "Case Details",
           "taskReference": {
               "taskId": "caseDetails",
               "parameterBindings": {
                   "caseWid": "<% id %>"
               }
           }
       }
   ]
}
```

You can combine dynamic cards with static cards. Note that the `cardContainer` always displays static cards above dynamic cards.

This sample `cardContainer` displays both static and dynamic cards. The `cardId` in the sample template is dynamic. Assume that each cardId in the sample data list corresponds to a card definitions with the same cardId.

```
{
 "type": "cardContainer",
 "layout": "grid",
 "cards": [
   {
     "type": "card",
     "cardId": "simpleCard1",
     "parameters": "<% {
       'title': 'A Static Card',
       'subtitle': 'Simple card',
       'indicator': {
         'label': 'Informational',
         'color': 'green'
       },
       'body': 'This static card always displays at the top.'
     } %>"
   }
 ],
 "dynamicCards": {
   "on": "<% sampleData.data %>",
   "as": "item",
   "template": {
     "cardId": "<% item.cardId %>",
     "parameters": "<% {
       'title': item.title,
       'subtitle': item.subtitle,
       'icon': item.icon,
       'body': item.body
     } %>"
   }
 }
}
```

The sample data:

```
"data": [
 {
   "cardId": "simpleCard1",
   "title": "Data 1 Title",
   "subtitle": "Subtitle 1",
   "icon": "wd-accent-fun",
   "body": "Message 1"
 },
 {
   "cardId": "simpleCard2",
   "title": "Data 2 Title",
   "subtitle": "Subtitle 2",
   "icon": "wd-accent-award-medal",
   "body": "Message 2"
 }
]
```

## <a id="section-mobile-support"></a>Mobile Support

Android, iOS

## <a id="section_wsk_2cd_ntb"></a>Attributes

-   <b>cards</b>

    Data type: `card` array

    A static collection of `card` widgets. The order of the card tags in the array determines how the cards display on the page.

    Each `card` contains:

    -   <a id="d25e91"></a><b>cardId</b>

        Data type: string

        (Required) The ID of the card you want to reference, as defined in the `id` attribute of the Page Configuration Card.

    -   <a id="d25e106"></a><b>parameters</b>

        Data type: mapScript

        A map containing the card parameters. The PMD sends the parameters to the card file referenced by `cardId`. `parameters` only supports these data types:

        -   boolean
        -   date
        -   list
        -   map
        -   number
        -   set
        -   string

        The card definition declares the `parameters` and specifies their usage.

    -   <a id="d25e155"></a><b>render</b>

        Data type: binding-Boolean

        Indicates whether or not this tag turns into a widget. If true, this tag renders as a widget on the page. If false, the page doesn't add this tag or its children. The default is true.

        Unlike the `visible` attribute, if `render` is false, other tags on the page can't reference this tag or widget on edit pages. On view pages, a tag cannot reference other tags, regardless of the `render` attribute value.


-   <b>layout</b>

    Data type: string

    Determines how cards are arranged on a page. Possible values:

    -   `grid` - Default layout. Cards display in rows of equal height.
    -   `masonry` - Cards display in columns, with the content of each card determining card height.

-   <b>dynamicCards</b>

    Data type: Nested object

    Contains these attributes:

    -   <b>on</b>

        Data type: listScript

        (Required) A PMD script or endpoint that returns a data list whose items will render based on the template card.

    -   <b>as</b>

        Data type: string

        (Required) The variable name that references objects in the list returned by the `on` script. Specify only alphanumeric and underscore characters.

    -   <b>template</b>

        Data type: Nested object

        (Required) The card template and its parameters.

        -   <b>cardId</b>

            Data type: stringScript

            (Required) The ID of the card to be used as the template. The `cardId` can be static or dynamic. Ensure that the `cardId` matches a valid `id` of a defined card component.

        -   <b>parameters</b>

            Data type: mapScript

            A map containing the card parameters. Required if the card definition contains parameters. The PMD sends the parameters to the card referenced by `cardId`. `parameters` only supports these data types:

            -   boolean
            -   date
            -   list
            -   map
            -   number
            -   set
            -   string

            The card definition declares the `parameters` and specifies their usage.



-   <b>id</b>

    Data type: binding-String

    Unique identifier used to reference this widget from other tags.

    Notes:

    -   The `id` must start with a letter.
    -   The `id` must be unique per page.
    -   To enable other widgets to reference this widget `id`, place this widget before the other widgets on the PMD. The PMD validation returns an "Undefined variable" error if it doesn't find a previously defined `id` in the PMD.
    -   Workday recommends that you include the `id` in your tag definitions for debugging purposes.

-   <b>render</b>

    Data type: binding-Boolean

    Indicates whether or not this tag turns into a widget. If true, this tag renders as a widget on the page. If false, the page doesn't add this tag or its children. The default is true.

    Unlike the `visible` attribute, if `render` is false, other tags on the page can't reference this tag or widget on edit pages. On view pages, a tag cannot reference other tags, regardless of the `render` attribute value.