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

<a id="section_N10021_N1001E_N10001"></a>
Displays a list of values on a card.

Define the card in a Page Configuration Card. See [Add Page Configuration Cards](/wcp_docs/GUID-77bab23d-5938-4ffe-92e2-2dd96a72444a-enHYPHENus.html).

In the Page Configuration Card, specify `listCard` as the `body` type. By default, the fields display in a single column. If you specify `secondaryValue` in the `template`, the value displays in a second column.

<b>Note:</b> You can't use an image in a two-column list.

## <a id="section_m2b_nvl_rtb"></a>Usage

## <a id="section_xss_mqh_ttb"></a>One-Column List

In this sample <i>oneColumnList</i> Page Configuration Card, the `body` type is `listCard`. By default, the data displays in a single column.

```
{
"id": "oneColumnList",
"parameters": [ "title", "dataSet" ],
"body": {
 "type": "listCard",
 "title": "<% title %>",
 "on": "<% dataSet %>",
 "as": "worker",
 "template": {
   "label": "<% worker.worker.descriptor %>",
   "value": "<% worker.jobTitle %>",
   "image": {
     "endPoint": {
       "name": "workerProfilePhoto",
       "baseUrlType": "workday-workerPhoto",
       "url": "<% '/' + worker.photo.id %>",
       "authType": "sso"
     },
     "profile": true
   }
 }
}
}
```

This sample `card` tag passes worker data to the <i>oneColumnList</i> Page Configuration Card:

```
{
  "type": "card",
  "cardId": "oneColumnList",
  "parameters": "<% {
    'title': 'Team Photos',
    'dataSet': workers.data
  } %>"
}
```

This sample `cardContainer` references the <i>oneColumnList</i> Page Configuration Card and passes data to it.

```
{
  "type": "cardContainer",
  "layout": "grid",
  "cards": [            
    {
      "type": "card",
      "cardId": "oneColumnList",
      "parameters": "<% {
         'title': 'Team Photos',
         'dataSet': workers.data
      } %>"
    }
  ]
}
```

The PMD uses these sample endpoints:

```
{
  "name": "workers",
  "baseUrlType": "workday-WQL",
  "authType": "sso",
  "url": "<%
       var query = 'SELECT worker, jobTitle, location, photo FROM workersForHCMReporting(dataSourceFilter = allEmployees) WHERE supervisoryOrganization = e02485f863ec48d39a082bb95cc4abe4';
       return '/data?query=' + query.urlEncode() %>"
}
```

The sample data providers in the AMD:

```
{
  "key": "workday-WQL",
  "value": "https://api.workday.com/wql/v1"
},
{
  "key": "workday-workerPhoto",
  "value": "https://api.workday.com/common/v1/workerRawPhotoData"
}
```

The `workday-workerPhoto` endpoint is from the `workerPhotos/href` property in the response of this request:

```
GET https://api.workday.com/common/v1/workers?view=workerPhotoWIDView
```

## <a id="section_q1v_lqh_ttb"></a>Two-Column List

In this sample <i>twoColumnList</i> Page Configuration Card, the `body` type is also `listCard`. The `secondaryValue` attribute in the `template` displays the descriptor values in a second column.

```
{
  "id": "twoColumnList",
  "parameters": ["title", "subtitle", "dataSet"],
  "body": {
    "type": "listCard",
    "title": "<% title %>",
    "subtitle": "<% subtitle %>",
    "on": "<% dataSet %>",
    "as": "worker",
    "secondaryValueWidth": "MEDIUM",
    "template": {
      "label": "<% worker.worker.descriptor %>",
      "value": "<% worker.businessTitle %>",
      "secondaryValue": "<% worker.location.descriptor %>"
    }
  }
}
```

This sample `cardContainer` references the <i>twoColumnList</i> Page Configuration Card and passes data to it.

```
{
  "type": "cardContainer",
  "layout": "grid",
  "cards": [                
    {
      "type": "card",
      "cardId": "twoColumnList",
      "parameters": "<% {
         'title': organization.descriptor,
         'subtitle': 'Team Roster',
         'dataSet': workers.data
      } %>"
    }
  ]
}
```

The PMD uses these sample endpoints:

```
{
  "name": "workers",
  "baseUrlType": "workday-staffing",
  "authType": "sso",
  "url": "/supervisoryOrganizations/e02485f863ec48d39a082bb95cc4abe4/members"
},
{
  "name": "organization",
  "baseUrlType": "workday-staffing",
  "authType": "sso",
  "url": "/supervisoryOrganizations/e02485f863ec48d39a082bb95cc4abe4"
}
```

The sample data provider in the AMD:

```
{
  "key": "workday-staffing",
  "value": "https://api.workday.com/staffing/v3"
}
```

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

Android, iOS

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

-   <b>id</b>

    Data type: string

    (Required) Unique identifier used to reference the card in PMDs. The `id` must match the card file name.

-   <b>parameters</b>

    Data type: string array

    Contains parameter names used for passing variable data to the card. Because different PMDs can call the same card in various contexts, use `parameters` to pass dynamic values to the card.

-   <b>header</b>

    Data type: object

    Contains these attributes:

    -   <b>title</b>

        Data type: stringScript

        Bold text that displays at the top of the card.

    -   <b>subtitle</b>

        Data type: stringScript

        Additional text that displays below the `title`.

    -   <a id="d25e411"></a><b>icon</b>

        Data type: string

        The name of the icon that displays on the left of the `title` and `subtitle`. For valid values, see the icons prefixed with `wd-accent` in [Reference: Icons](/wcp_docs/pyw1636491346913.html).

    -   <a id="d25e435"></a><b>indicator</b>

        Data type: object

        A small text element that you can use to convey the status of a card.

        Contains these attributes:

        -   <b>label</b>

            Data type: stringScript

            The text of the indicator.

        -   <b>color</b>

            Data type: stringScript

            The color of the indicator. Valid values:

            -   `blue`
            -   `gray`
            -   `green`
            -   `orange`
            -   `red`
            -   `transparent`



-   <b>body</b>

    Data type: object

    (Required) The body of the card.

    Contains these attributes:

    -   <b>type</b>

        Data type: string

        (Required) The card type. For list cards, set `type` as "listCard".

    -   <b>title</b>

        Data type: stringScript

        Large title that displays in the center of the card.

    -   <b>subtitle</b>

        Data type: stringScript

        Additional text that displays below the body `title`. You can't have a body `subtitle` without a body `title`.

    -   <b>on</b>

        Data type: listScript

        The list of values to iterate over.

    -   <b>as</b>

        Data type: string

        A string that references the current iteration in the list provided by the `on` attribute.

        You must use the `on`, `as` and `template` attributes together.

    -   <b>template</b>

        Data type: object

        Defines the fields that display for each list item.

        Contains these attributes:

        -   <b>label</b>

            Data type: stringScript

            The main field to display for each list item. Displays in bold text on the left side of the card.

        -   <b>value</b>

            Data type: stringScript

            A field that displays under `label` for each list item.

        -   <b>secondaryValue</b>

            Data type: stringScript

            A secondary field to display for each list item. Displays on the right side of the card, on the same line as `label`.

            <b>Note:</b> The `secondaryValue` and `image` attributes are mutually exclusive.

        -   <a id="d25e687"></a><b>secondaryValueWidth</b>

            Data type: enum

            Determines the relative width of the `secondaryValue` on the card. This attribute only applies when you define a `secondaryValue`.

            Valid values:

            -   `medium` - `secondaryValue` takes half the horizontal space on the card.
            -   `small` - `secondaryValue` takes one-third of the horizontal space on the card.

        -   <b>image</b>

            Data type: image

            An image to display for each list item. Displays to the left of `label`.

            <b>Note:</b> The `secondaryValue` and `image` attributes are mutually exclusive.

            Contains these attributes:

            -   <a id="d25e763"></a><b>endPoint</b>

                Data type: `endPoint`

                A REST endpoint that returns and displays an image.

                Example:

                ```
                {
                "endPoint": {
                "name": "charities",
                "url": "<% 'charityImages/' + charity.image.id %>",
                "baseUrlType": "app",
                "authType": "sso"
                }
                ```

                <b>Note:</b> The `endPoint` and `url` attributes for `image` are mutually exclusive. You must define either `endPoint` or `url`, but not both.

                For a complete list of `endPoint` attributes, see the <i>Attributes</i> section in [endPoints](/wcp_docs/ujr1530565661647.html).

            -   <b>profile</b>

                Data type: booleanScript

                If true, the image renders in a smaller scale in a circle. Otherwise, the image renders in a larger scale in a rounded rectangle. The default is false.

            -   <a id="d25e830"></a><b>url</b>

                Data type: stringScript

                URL of the image you want to display. You can specify either:

                -   An absolute url.
                -   A base64-encoded image string.

                If you use the `url` attribute with a base64-encoded image string, the PMD becomes non-functional if the serialized PMD exceeds the limit. Instead of using a base64-encoded image string, Workday recommends that you upload the image asset on a server and point to it using the `url` attribute.

                <b>Note:</b> The `endPoint` and `url` attributes for `image` are mutually exclusive. You must define either `endPoint` or `url`, but not both.


        -   <b>indicator</b>

            Data type: object

            A small text element that you can use to convey the status of a list item.

            Contains these attributes:

            -   <b>label</b>

                Data type: stringScript

                The text of the indicator.

            -   <b>color</b>

                Data type: stringScript

                The color of the indicator. Valid values:

                -   `blue`
                -   `gray`
                -   `green`
                -   `orange`
                -   `red`
                -   `transparent`



    -   <b>limit</b>

        Data type: integer

        The maximum number of items the card displays.


-   <b>footer</b>

    Data type: TaskButton array

    A list of links at the bottom of each card. You can include up to 5 links in the footer.

    Each link object contains these attributes:

    -   <b>label</b>

        Data type: stringScript

        (Required) The text of the link.

    -   <a id="d25e1288"></a><b>taskReference</b>

        Data type: `taskReference`

        The page to navigate to when a user clicks the link. Specify the [taskReference](/wcp_docs/cgt1531499518059.html#) tag.

        You must specify either `taskReference`, `url`, or `workdayTaskReference`. `taskReference`, `url` and `workdayTaskReference` are mutually exclusive.

        Example:

        ```
        "footer": [
          {
            "label": "Home",
            "taskReference": {
            "taskId": "home"
            }
          }
        ```

        ]

    -   <a id="d25e1334"></a><b>workdayTaskReference</b>

        Data type: workdayTaskReference object

        Contains the `wid` of a Workday-delivered task or report to navigate to.

        To determine the `wid` value, get the Integration ID of the Workday-delivered task or report. For details, see [Navigate to Workday Tasks and Reports](/wcp_docs/GUID-65dc8eb6-a52b-4bf5-b05a-32160abb1f08-enHYPHENus.html)

        You must specify either `taskReference`, `url`, or `workdayTaskReference`. `taskReference`, `url` and `workdayTaskReference` are mutually exclusive.

        This sample `footer` navigates to the <b>My Timesheets</b> report in Workday:

        ```
        "footer": [
          {
            "label": "My Timesheets",
            "workdayTaskReference": {
              "wid": "c4936fdad7d110001d9c005c57510000"
            }
          }
        ]
        ```

    -   <b>url</b>

        Data type: dynamicBinding-String

        The destination URL for an external link.

        You must specify either `taskReference`, `url`, or `workdayTaskReference`. `taskReference`, `url` and `workdayTaskReference` are mutually exclusive.

        Example:

        ```
        "footer": [
          {
            "label": "External Link",
            "url": "https://www.example.com"
          }
        ]
        ```




### Related Information

[cardContainer](/wcp_docs/iyt1652393015539.html)