---
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, widgets, tags, UI components]
nav: wcp_docs
parent_url: /wcp_docs/
title: listDetailHub
layout: subsection
wd_wcptag: listDetailHub
---

<a id="section_N10021_N1001E_N10001"></a>
A container widget that displays a navigation pane with dynamic links on the left and task pages on the right. Similar to the `hub` widget, the `listDetailHub` widget enables you to create a centralized area with navigation links to contextual tasks and related information. However, unlike the `hub` widget, the `listDetailHub` widget:

-   Dynamically builds the list of task navigation links and their corresponding detail pages based on a template.
-   Can't have grouped links.


Use `listDetailHub` only on view pages. The navigation template must also be a view page. The `listDetailHub` widget currently doesn't support edit pages.

<a id="section_N10076_N10042_N10001"></a>
Jump to:

-   [Attributes](/wcp_docs/fki1636492536198.html#section-attributes)


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

The `listDetailHub` tag is the only tag in the presentation `body` of a view page. To construct a `listDetailHub`, specify these main attributes:

-   `label` - The hub title, which displays at the top of the left navigation pane.
-   `icon` - The icon next to the hub title.
-   `items` - A script binding to the list of data used to generate the navigation links and task pages.
-   `itemVariableName` - The variable name for referencing the data element in the `navigationTemplate`.
-   `navigationTemplate` - The template for a navigation item. A navigation item is a link that displays a task page on the right pane. You can optionally specify an icon for the template navigation item.

    The number of generated navigation items equals the number of items returned by the `items` script binding. All navigation items display the same task page on the right. The `navigationTemplate` can send parameters to the task page to display dynamic data.

-   `additionalLinks` - An optional section at the bottom of the left navigation pane that contains links to either external sites or other tasks that open outside the hub.


Consider these guidelines:

-   Ensure that you've defined all task pages in the AMD.
-   Ensure that the `queryParams` variables you use in the task page match the parameters you send from the hub.
-   You can use a task page only within 1 hub. You can't use the same `taskId` across multiple `hub` or `listDetailHub` widgets in multiple PMDs.
-   Ensure that the `items` list returns data.
-   `items` can have a maximum of 20 items.
-   `additionalLinks` can have a maximum of 20 links.
-   Workday doesn't support embedding the `listDetailHub` widget within a profile group and dashboard.


## <a id="section_vff_nqf_4rb"></a>Example

This sample `listDetailHub` displays navigation links for a list of requisitions.

![](GUID-40cbcee9-7bea-4eb6-9e61-15fef95a43b5-enHYPHENus.png)

The sample PMD with the `listDetailHub` tag:

```
{
 "id": "hubRequisitions",
 "presentation": {
   "body": {
     "type": "listDetailHub",
     "label": "<% requisitions.data[0].requester.descriptor + ' Requisitions Hub' %>",
     "icon": "wd-accent-clipboard-checklist",
     "items": "<% requisitions.data %>",
     "itemVariableName": "myItems",
     "navigationTemplate": {
       "task": {
         "taskId": "hubViewRequisition",
         "parameters": {
           "descriptor": "<% myItems.descriptor %>",
           "company": "<% myItems.company.descriptor %>",
           "requisitionDate": "<% myItems.requisitionDate %>",
           "status": "<% myItems.status.descriptor %>",
           "formattedAmount": "<% myItems.formattedAmount %>",
           "requisitionId": "<% myItems.id %>"
         }
       },
       "label": "<% myItems.descriptor %>",
       "icon": "<% 'wd-icon-checkboxes' %>"
     }
   }
 },
 "endPoints": [
   {
     "name": "requisitions",
     "baseUrlType": "workday-requisitions",
     "url": "<% '/requisitions?limit=20&requester=' + queryParams.requesterId
         + '&fromDate=' + queryParams.fromDate
         + '&toDate=' + queryParams.toDate %>",
     "authType": "sso"
   }
 ]
}
```

The `navigationTemplate` uses the <i>hubViewRequisition</i> task page. The sample task page uses the passed `queryParams` variables to display the requisition details. The task page for the first navigation item displays as the task landing page.

The sample <i>hubViewRequisition.pmd</i> task page:

```
{
 "id": "hubViewRequisition",
 "endPoints": [
   {
     "name": "requisitionLines",
     "baseUrlType": "workday-requisitions",
     "url": "<% '/requisitions/' + queryParams.requisitionId + '/requisitionLines' %>",
     "authType": "sso",
     "bestEffort": true
   }
 ],
 "presentation": {
   "title": {
     "type": "title",
     "label": "<% 'Requisition: ' + queryParams.descriptor %>"
   },
   "body": {
     "type": "section",
     "horizontal": true,
     "columnWidthRatios": [
         0.1,
         0.9
     ],
     "children": [
       {
         "type": "section",
         "children": [
           {
             "type": "text",
             "id": "company",
             "label": "Company",
             "value": "<% queryParams.label1 %>"
           },
           {
             "type": "text",
             "id": "requisitionDate",
             "label": "Requisition Date",
             "value": "<% queryParams.requisitionDate %>"
           },
           {
             "type": "text",
             "id": "descriptor",
             "label": "Status",
             "value": "<% queryParams.status %>"
           },
           {
             "type": "text",
             "id": "amount",
             "label": "Amount",
             "value": "<% queryParams.formattedAmount %>"
           }
         ]
       },
       {
         "type": "section",
         "children": [
           {
             "type": "stackedBarChart2",
             "id": "stackedBarChartSingleCategory",
             "data": "<% requisitionLines.data %>",
             "dataVariableName": "chartData",
             "measurementDataSets": [
               {
                 "name": "Amount",
                 "value": "<% chartData.extendedAmount.value %>"
               }
             ],
             "categoryDataSet": {
               "name": "Spend Category",
               "value": "<% chartData.spendCategory.descriptor %>"
             }
           }
         ]
       }
     ]
   }
 }
}
```

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

Android, iOS

## <a id="section-attributes"></a>Attributes

-   <b>items</b>

    Data type: listScript

    (Required) A list of data elements for generating the navigation links. You can use a script that returns a list. The maximum number of items in the list is 20.

-   <b>itemVariableName</b>

    Data type: string

    (Required) The variable name used to reference `items` data in the generated navigation links.

-   <b>navigationTemplate</b>

    Data type: HubNavigationItem map

    (Required) The template configuration for the list of links on the left navigation pane. All navigation links display the same task page containing parameterized data on the right pane.

    The HubNavigationItem map contains these attributes:

    -   <b>label</b>

        Data type: stringScript

        (Required) The link text.

    -   <b>task</b>

        Data type: object

        (Required) The task for the navigation link.

        Contains these attributes:

        -   <b>taskId</b>

            Data type: string

            (Required) The `taskId` that corresponds to a page to display on the right pane. Ensure that you've defined the `taskId` in the AMD.

        -   <b>parameters</b>

            Data type: Map<String, StringScript>

            A map containing task parameters sent to the specified `taskId` page. Note that the parameter value supports PMD Scripting. The page can reference these parameters using the `queryParams` variable.


    -   <b>icon</b>

        Data type: string

        The name of the icon that displays on the left of the link. If you don't specify an icon, the item uses a default icon. For valid values, see the icons prefixed with `wd-icon` in <i>Navigation Link Icons</i> in [Reference: Icons](/wcp_docs/pyw1636491346913.html).

    -   <b>render</b>

        Data type: booleanScript

        If true, this item renders as a link on the hub navigation. If false, the hub navigation doesn't add this link. The default is true.


-   <b>additionalLinks</b>

    Data type: AdditionalHubLink map

    Contains additional navigation links at the bottom of the navigation pane. A line displays at the top of the additional links section. The maximum number of links in `additionalLinks` is 20.

    An AdditionalHubLink map contains these attributes:

    -   <b>title</b>

        Data type: stringScript

        The title of the additional links section.

    -   <b>links</b>

        Data type: AdditionalHubNavigationLink array

        The list of additional links. A link can either be an `external` or `task` tag:

        -   `external` - The link opens an external URL outside the hub. Specify the required `label` and `url` attributes. Example:

            ```
            {
            "type": "external",
            "label": "<% 'Go to Workday' %>",
            "url": "<% 'https://www.workday.com' %>"
            }
            ```

        -   `task` - The link opens a task page outside the hub. Specify the required `label` and `task` attributes. Example:

            ```
            {
            "type": "task",
            "label": "<% 'Go to External Task' %>",
            "task": {
              "taskId": "anotherTask",
              "parameters": {
                   "workerId": "<% currentWorker.id %>"
              }
            }
            }
            ```



-   <b>icon</b>

    Data type: string

    The name of the icon that displays at the top of the left navigation pane. For valid values, see the icons prefixed with `wd-accent` in <i>Hub Title Icons</i> in [Reference: Icons](/wcp_docs/pyw1636491346913.html).

    The default icon is a task clipboard icon.

-   <b>label</b>

    Data type: stringScript

    The text that displays at the top of the left navigation pane.