---
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: Card
layout: subsection
wd_wcptag: card
---

A Card component (known as [Extend Cards](/wcp_docs/GUID-98b25b80-3fd3-487f-9bd3-7f9816551fe2-enHYPHENus.html) in the Workday tenant) displays in these supported entry points in Workday:

-   Workday Home Page.
-   Workday-delivered Hubs.
-   Workday Search.
-   Workday Journeys.


Define a Card in the <b>Cards</b> section of your app, then specify the Card’s route in a <b>Card Tenant Setting</b>. To enable users to see the Card in Workday, add the Card Tenant Setting to any of the supported entry points in Workday.

Consider these guidelines:

-   You can configure a maximum of 2 inbound [endPoints](/wcp_docs/ujr1530565661647.html) on your Card.
-   <b>Card</b> components are different from [Page Configuration Card](/wcp_docs/GUID-c066f111-6fd4-4b72-9567-8fedf220ad9f-enHYPHENus.html) components:

    -   <b>Cards</b> - Display directly in the Workday tenant, such as in the Home Page, Workday-delivered Hubs, Search, and Journeys.
    -   <b>Page Configuration Cards</b> - Display in the pages of an Extend app.

-   The Extend Plugin for IntelliJ provides read-only support for Cards.
-   See [Card Best Practices and Considerations](/wcp_docs/GUID-cd502561-963d-4dc9-83ef-cc12d51db157-enHYPHENus.html).


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

<b>Presentation</b> tab:

<table><thead><tr><th>Header Attribute</th><th>Example Value</th></tr></thead><tbody><tr><td>Icon</td><td>Globe Earth</td></tr><tr><td>Title</td><td>Work From Almost Anywhere</td></tr><tr><td>Subtitle</td><td><% "Primary Location: " + worker.primaryJob.location.descriptor %></td></tr><tr><td>Indicator</td><td><ul><li>Label: "New App!"
</li><li>Color: Green
</li></ul></td></tr></tbody></table><br/>

<table><thead><tr><th>Body Attribute</th><th>Example Value</th></tr></thead><tbody><tr><td>Card Type</td><td>Simple Card</td></tr><tr><td>Value</td><td>Request to work remotely, review your remote work calendar and manage your remote work requests.</td></tr></tbody></table><br/>

<table><thead><tr><th>Footer Attribute</th><th>Example Value</th></tr></thead><tbody><tr><td>Label</td><td>Request Remote Work</td></tr><tr><td>Task Reference</td><td>createRequest <p><b>Note:</b> Assume the app contains the <i>createRequest</i> page in the<b>Pages</b> section.</p></td></tr></tbody></table><br/>



<b>Card Load</b> tab:

<table><thead><tr><th>Inbound Endpoint Attribute</th><th>Example Value</th></tr></thead><tbody><tr><td>REST Endpoint name</td><td>worker</td></tr><tr><td>HTTP Method</td><td>Get</td></tr><tr><td>Base URL Type</td><td>workday-staffing</td></tr><tr><td>URL</td><td>/workers/me</td></tr></tbody></table><br/>

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

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

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

```
{
  "id": "HomePageCard",
  "presentation": {
  "type": "inlineCard",
  "header": {
    "type": "cardHeader",
    "title": "Work From Almost Anywhere",
    "subtitle": "<% \"Primary Location: \" + worker.primaryJob.location.descriptor %>",
    "indicator": {
      "label": "New App!",
      "color": "GREEN"
    },
    "icon": "wd-accent-globe-earth"
  },
  "body": {
    "type": "simpleCard",
    "id": "newCard",
    "value": "Request to work remotely, review your remote work calendar and manage your remote work requests."
},
  "footer": [
     {
       "label": "Request Remote Work",
       "taskReference": {
         "taskId": "createRequest"
       }
     }
  ]
},
"endPoints": [
  {
    "baseUrlType": "workday-staffing",
    "url": "/workers/me",
    "authType": "sso",
    "name": "worker"
  }
]
}
```

## <a id="section_2"></a>Mobile Support

Android, iOS

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

-   <b>id</b>

    Data type: string

    (Required) Unique identifier used to reference the card in the `tasks[]` section of the App Metadata. The `id` must match the name of the Card component.

-   <b>presentation</b>

    Data type: object

    (Required) The presentation subschema of the Card describes the Card display and user interaction.

    The `presentation` subschema contains:

    -   <b>type</b>

        (Required) Only supported type: `inlineCard`.

    -   <b>header</b>

        Data type: object

        Contains these attributes:

        -   <b>icon</b>

            Data type: string

            There are 2 types of icons:

            -   Workday-delivered icons: For valid values, see the icons prefixed with wd-accent in [Reference: Icons](/wcp_docs/pyw1636491346913.html). Example: `"icon": "wd-accent-globe-earth"`.
            -   Custom icons: The name of the image file in the <b>Assets</b> section of your app. See [Images](/wcp_docs/GUID-0d2eb1ca-7ab3-4c03-ac7d-c9c6d53f81ef-enHYPHENus.html). Example: `"icon": "myImage.png"`.

        -   <b>title</b>

            Data type: stringScript

            Bold text that displays at the top of the card.

        -   <a id="dlentry_cardfile_header_indicator"></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. Valid values:

            -   `listCard`

                See the attributes in [List Card Type in Extend Cards](/wcp_docs/GUID-db290a9c-8762-4d82-af35-1a56975c2c06-enHYPHENus.html).

            -   `simpleCard`

                See the attributes in [Simple Card Type in Extend Cards](/wcp_docs/GUID-d57311d3-651b-4755-84a0-fd5c3a5c91f0-enHYPHENus.html).




-   <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"
          }
        ]
        ```


-   <b>endPoints</b>

    Data type: endPoints array

    When loading a card, it calls all inbound endpoints defined in `endPoints[]`. To define an inbound endpoint, specify these required attributes:

    -   `name` - The endpoint alias for referencing its data in the card.
    -   `baseUrlType` - The base URL of the endpoint. Specify the data provider `key` in `dataProviders[]` in the App Metadata (AMD).
    -   `url` - The relative endpoint URL. The full endpoint URL consists of the `baseUrlType` and `url` values. You can include path and query parameter bindings in the `url`.
    -   `authType` - The endpoint authentication scheme. Specify the authType `id`, which is defined in `authTypes[]` in the Site Metadata (SMD). Workday REST APIs use `SSO`, which is the default authentication type.

    A Card can have a maximum of 2 inbound endpoints.

    Example:

    ```
    "endPoints": [
      {
        "name": "worker",
        "baseUrlType": "workday-staffing",
        "url": "/workers/me",
        "authType" : "sso"
      }
    ]
     
    ```

-   <b>include</b>

    A list of script modules to load with the Card. A script module is a Script component in the app and contains scripts using the PMD Scripting syntax that the Card can call. For more information, see [Concept: PMD Scripting](/wcp_docs/oli1581402304020.html).

    When the Card loads an included script module, its exported static variables and function declarations become accessible to the Card. The Cad can invoke any of the exported scripts from the loaded script modules.

    See [include](/wcp_docs/hrh1604896806152.html) for details.

-   <b>script</b>

    Enables you to declare custom functions that the tags on your card can call. Use the PMD Scripting syntax and API to code logic with the data and user interactions on the page. The functions you declare in the script block are available to all widgets within the same Card. For more information, see [Concept: PMD Scripting](/wcp_docs/oli1581402304020.html) .

-   <b>onLoad</b>

    An event that triggers after all inbound endpoints have finished fetching data and before loading any widget on the page.

    Use the `onLoad`event handler to transform data to a desired format before the widgets consume the data.

    See [onLoad](/wcp_docs/tgy1581495452394.html#section-onload) for details.



### Related Information

[List Card Type in Extend Cards](/wcp_docs/GUID-db290a9c-8762-4d82-af35-1a56975c2c06-enHYPHENus.html)

[Simple Card Type in Extend Cards](/wcp_docs/GUID-d57311d3-651b-4755-84a0-fd5c3a5c91f0-enHYPHENus.html)