---
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, Extend Cards]
nav: wcp_docs
parent_url: /wcp_docs/
title: List Card Type in Extend Cards
layout: subsection
---

Displays a list card in the body of a [Card](/wcp_docs/GUID-776e1cfd-762e-4422-a7da-45c2b349d24c-enHYPHENus.html) component.

Card components are used as [Extend Cards](/wcp_docs/GUID-98b25b80-3fd3-487f-9bd3-7f9816551fe2-enHYPHENus.html) in the Workday tenant.

## <a id="section_3"></a>Example in Visual Mode

This table contains sample values of the <b>List Card</b> attributes in the <b>Body</b> of a Card.

<table><thead><tr><th>Body Attribute</th><th>Example Value</th></tr></thead><tbody><tr><td>Card Type</td><td>List Card</td></tr><tr><td>Title</td><td>Team Photos</td></tr><tr><td>On</td><td><% workers.data %> <p><b>Note:</b> Assume that the <b>Card Load</b> tab defines the <i>workers</i> endpoint.</p></td></tr><tr><td>As</td><td>worker</td></tr><tr><td><b>Template:</b></td><td> </td></tr><tr><td>Label</td><td><% worker.worker.descriptor %></td></tr><tr><td>Value</td><td><% worker.jobTitle %></td></tr><tr><td><b>Image End Point:</b></td><td> </td></tr><tr><td>Auth Type</td><td>sso</td></tr><tr><td>Base URL Type</td><td>workday-workerPhoto</td></tr><tr><td>Name</td><td>workerProfilePhoto</td></tr><tr><td>URL</td><td><% '/' + worker.photo.id %></td></tr><tr><td>Profile</td><td>true</td></tr></tbody></table><br/>

<b>Note:</b> Assume that the dataProviders in App Metadata includes:

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

## <a id="section_2"></a>Example in Code Mode

This snippet displays the `body` of an Extend Card that uses a `listCard`.

```
"body": {
  "type": "listCard",
  "title": "Team Photos",
  "as": "worker",
  "on": "<% workers.data %>",
  "template": {
    "label": "<% worker.worker.descriptor %>",
    "value": "<% worker.jobTitle %>",
    "image": {
      "endPoint": {
        "allowEmptyValue": false,
        "authType": "sso",
        "baseUrlType": "workday-workerPhoto",
        "name": "workerProfilePhoto",
        "url": "<% '/' + worker.photo.id %>"
      },
      "profile": true
    }
  }
}
 
```

This snippet displays the `endPoints` in the sample Extend Card.

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

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

-   <b>type</b>

    Data type: string

    (Required) The card type. Must be `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.



### Related Information

[Card](/wcp_docs/GUID-776e1cfd-762e-4422-a7da-45c2b349d24c-enHYPHENus.html)