---
keyword: [Extend, Presentation Components, widgets, tags, UI components]
nav: wcp_docs
parent_url: /wcp_docs/
title: >- 
  Concept: Multilevel Lists
layout: subsection
---

A multilevel `instanceList` enables a user to drill down a folder-like list of values and select values at the last level (leaf nodes). You can define a multilevel list using one of these mutually exclusive attributes:

-   `monikerLevels`
-   `dynamicMonikerLevels`


Use `monikerLevels` when the leaf nodes of a multilevel list are all at the same level. Example:

```
root
│
├── sublevel 1
│   │
│   └── leaf node 1
│      
└── sublevel 1
    │
    └── leaf node 2
```

Use `dynamicMonikerLevels` when the leaf nodes of a multilevel list are at different levels. Example:

```
root
│
├── sublevel 1
│   │
│   └── leaf node 1
│      
└── sublevel 1
    │
    └── sublevel 2
        │
        └── leaf node 2
```

The values of the `instanceList` display as the root level values, and the values specified in the `monikerLevels` or `dynamicMonikerLevels` attribute display as the sublevel values.

## <a id="section_1"></a>Defining a Multilevel List with monikerLevels

To create a multilevel list using `monikerLevels`, specify:

-   Root level values on the `instanceList`.
-   Sublevel values in the `monikerLevels` attribute of the `instanceList`.

    For each level, add a `monikerLevel` tag with these attributes:

    -   `levelValues` - The data collection from a deferred endpoint or a list of values containing the `id` and `descriptor` fields.
    -   `endPoint` - The deferred endpoint that returns the data specified in `levelValues`. If the `levelValues` attribute doesn't use an endpoint, you can omit `endPoint`.

-   Inbound endpoints in `endPoints[]` that provide the values at each level.

    The endpoints that return sublevel data typically depend on the value selected at the preceding level. The `promptSelections[]` property of an `instanceList` is a list containing the `id` of the selected value at each level. Example: `promptSelections[0]` contains the `id` of the selected value at the root level. `promptSelections[1]` contains the `id` of the selected value at the second level, and so on.



This sample `instanceList` has 2 levels: supervisory organizations and their members.

```
{
  "type": "instanceList",
  "label": "Select an organization, then a member.",
  "id": "organizationsInstanceList",
  "values": "<% supervisoryOrganizations.data %>",
  "monikerLevels": [
    {
      "type": "monikerLevel",
      "levelValues": "<% organizationMembers.data %>",
      "endPoint": "<% endpoints.organizationMembers %>"
    }
  ]
}
```

The `supervisoryOrganizations` endpoint returns the root level values on the `instanceList`. The `organizationMembers` endpoint is a deferred endpoint that returns the second level values, which are the leaf nodes of the list.

```
"endPoints" : [
  {
   "baseUrlType": "workday-staffing",
   "name": "supervisoryOrganizations",
   "authType": "sso",
   "url": "/supervisoryOrganizations"
  },
  {
   "name": "organizationMembers",
   "baseUrlType": "workday-staffing",
   "authType": "sso",
   "url": "<% '/supervisoryOrganizations/' + organizationsInstanceList.promptSelections[0] + '/members' %>",
   "deferred":"true"
  },
  . . .
]
```

The deferred endpoint uses `organizationsInstanceList.promptSelections[0]` as a URL path parameter to return the sublevel values. `promptSelections[0]` contains the root-level value that the user selects on `organizationsInstanceList`.

See also [monikerLevel](/wcp_docs/dfg1530238095693.html).

## <a id="section_2"></a>Defining a Multilevel List with dynamicMonikerLevels

Consider a data collection with the following structure:

```
root
│
├── My Favorites
│   ├── Org 1
│   └── ...
│
├── My Organizations
│   ├── Org 1
│   └── ...
│      
└── Supervisory Organizations by Manager
    ├── Manager 1
    │   ├── Org 1
    │   └── ...
    ├── Manager 2
    │   ├── Org 1
    │   └── ...
    └── ... 
```

This sample PMD snippet uses `dynamicMonikerLevels` to populate an `instanceList` with the preceding data. In this sample:

-   `values`  returns 3 instances at the root level: <i>My Favorites</i>, <i>My Organizations</i>, and <i>Supervisory Organizations by Manager</i>.
-   For each root level selection, the script calls a deferred endpoint that populates the sublevel data.
-   The `selections.size()` uses the `promptSelections` property to indicate what level of the `instanceList` the selected value is at. Example: `selections.size()` of 1 indicates that the selected value is at the root level, while a `selections.size()` of 2 indicates that the selected value is at the second level, and so on.


```
{
  "type": "instanceList",
  "id": "dynamicMonikerLevelsList",
  "label": "Supervisory Organizations",
  "values": "<% supervisoryOrganizationLimit3.data %>",
  "dynamicMonikerLevels": "<%
    const selections = self.promptSelections;
    if (selections.size() == 1) {
      if (selections[0] == supervisoryOrganization.data[0].id) {
        return [myFavorites.invoke().data, false]
      }
      else if (selections[0] == supervisoryOrganization.data[1].id) {
        return [myOrgs.invoke().data, false]
      }
      else if (selections[0] == supervisoryOrganization.data[2].id) {
        return [supOrgByManager.invoke().data, true]
      }
    }
    else if (selections.size() == 2) {
      const manager = selections[1];
      const supOrgsManagedList = supOrgsManaged.invoke({'worker': manager}).data;
      return [supOrgsManagedList, false]
    }
  %>"
}
```

The sample endpoints referenced in `dynamicMonikerLevels`:

```
"endPoints": [
  {
    "baseUrlType": "workday-staffing",
    "name": "supervisoryOrganization",
    "authType": "sso",
    "url": "/v6/values/jobChangesGroup/supervisoryOrganization/"
  },
  {
    "baseUrlType": "workday-staffing",
    "name": "supervisoryOrganizationLimit3",
    "authType": "sso",
    "url": "/v6/values/jobChangesGroup/supervisoryOrganization/?limit=3"
  },
  {
    "baseUrlType": "workday-staffing",
    "name": "myFavorites",
    "authType": "sso",
    "url": "<% supervisoryOrganization.data[0].href %>",
    "deferred": true
  },
  {
    "baseUrlType": "workday-staffing",
    "name": "myOrgs",
    "authType": "sso",
    "url": "<% supervisoryOrganization.data[1].href %>",
    "deferred": true
  },
  {
    "baseUrlType": "workday-staffing",
    "name": "supOrgByManager",
    "authType": "sso",
    "url": "<% supervisoryOrganization.data[2].href %>",
    "deferred": true
  },
  {
    "baseUrlType": "workday-common",
    "name": "supOrgsManaged",
    "authType": "sso",
    "url": "<% '/v1/workers/' + worker + '/supervisoryOrganizationsManaged' %>",
    "deferred": true
  }
]
```

In this sample `endPoints[]`:

-   `supervisoryOrganizationLimit3` returns the root level options.
-   `myFavorites` returns the options for <i>My Favorites</i>.
-   `myOrgs` returns the options for <i>My Organizations</i>.
-   `supOrgByManager` returns a list of managers.
-   `supOrgsManaged` returns the supervisory organizations for each manager.