--- 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: panelList layout: subsection wd_wcptag: panelList --- Displays a list of panels or editable panels. Use the children attribute to define what data populates each panel. Use `panelList` on: - An edit page to enable users to edit content within a panel. - A view page to display a list of panels. ## Example This sample `panelList` displays a set of panels, each with an expense item. This sample `panelList` displays these buttons: - Add - If the `doNotAdd` attribute is false (default), the `panelList` displays the Add button at the bottom. - Remove - If the `doNotRemove` attribute is false (default), the `panelList` displays the Remove button on each panel. - Details - The `inlineButton` attribute adds a `button` on each panel that navigates to a page. You can also use a `dropDownButton` instead of a `button`. This `panelList` also displays a button that navigates to another page. ``` { "type": "panelList", "label": "Expense Items", "panels": "<% expenseEntries.data %>", "deleteEndPoint": "deleteExpense", "panelName": "expenseItem", "indexVariableName": "i", "inlineButton": { "type": "button", "action": "AUXILIARY", "label": "Details", "taskReference": { "taskId": "expenseDetails" } }, "children": [ { "type": "text", "label": "<% i + ': ' + expenseItem.descriptor %>", "value": "<% expenseItem.memo %>" } ] } ``` The sample `panelList`: ![](GUID-99ec2a31-5faf-4d56-a595-4c879a5a2af1-enHYPHENus.png) The sample `expenseEntries` endpoint: ``` { "name": "expenseEntries", "authType": "sso", "url": "<% '/entries?fromDate=2021-03-15' %>", "baseUrlType": "workday-expenses" } ``` The sample `deleteExpense` outbound endpoint: ``` { "name" : "deleteExpense", "httpMethod" : "DELETE", "authType" : "sso", "url" : "<% '/entries/' + expenseItemId.value %>", "baseUrlType" : "workday-expenses" } ``` ## Mobile Support Android, iOS ## Attributes - children Data type: list of tags An array of tags that display data on each panel. - deleteEndPoint Data type: string The name of the endpoint to use for deleting an item from the list. - displayAsGroup Data type: binding-Boolean Determines whether the panels display as a list of 1 group on the same view page. - displayAsSlider Data type: binding-Boolean (Mobile only) Determines whether the panels display horizontally. - doNotAdd Data type: dynamicBinding-Boolean If true, users can't add panels to the `panelList`. If false, the `panelList` displays an Add button. The default is false. - doNotPutInTab Data type: boolean If false, the page displays this panelList in a tab on the bottom of the page. The default is true (by default, a panelList doesn't display in a tab). The tabbed tags display in the order that they appear in the PMD. Notes: - Do not use the `doNotPutInTab` attribute with pages that use `tabs[ ]`. - The tabs appear when: - There are multiple tabbed tags (such as grids or panelLists with `doNotPutInTab` as false). - There is at least 1 non-tabbed tag. - doNotRemove Data type: dynamicBinding-Boolean If true, users can't delete any panel from the `panelList`. If false, each panel in the `panelList` displays a Remove button. The default is false. - enabled Data type: dynamicBinding-Boolean If true, users can enter values on the widget. If false, users can only view the widget. - helpText Data type: binding-String Text that displays when a user hovers their cursor over the widget. Note: The Chrome browser truncates the tooltip to 1400 characters. - id Data type: binding-String Unique identifier used to reference this widget from other tags. Notes: - The `id` must start with a letter. - The `id` must be unique per page. - To enable other widgets to reference this widget `id`, place this widget before the other widgets on the PMD. The PMD validation returns an "Undefined variable" error if it doesn't find a previously defined `id` in the PMD. - Workday recommends that you include the `id` in your tag definitions for debugging purposes. - indexVariableName Data type: string A variable name used as an index for looping over the panels in the list. Consider these guidelines: - The `indexVariableName` is helpful when using `panelList` on a view page. The `indexVariableName` doesn't reflect the panel index when panels are removed. - If you need to reference a panel when you use `panelList` on an edit page, you can configure a `hidden` tag in the panel with some value. When needed, you can look up the panel that contains the specific hidden value. Example: Assume the `hidden` tag is the first child in the panel: ``` myPanelList.panels.find(panel => panel.children[0].value == 'someValue') ``` - initializeFirstPanel Data type: binding-Boolean Determines whether or not a first panel automatically adds to a panelList. - inlineButton Data type: `button` Displays an inline button on the right side of each panel of a `panelList`. Specify either a `button` or `dropDownButton` tag. This sample `panelList` uses a `dropDownButton` for the `inlineButton`: ``` { "type": "panelList", "panels": "<% sampleData.items %>", "panelName": "instance2", "inlineButton": { "type": "dropDownButton", "label": "Title Options", "action": "AUXILIARY", "values": [ { "label": "Edit Title", "taskReference": { "taskId": "editTitle" } }, { "label": "Remove Title", "taskReference": { "taskId": "removeTitle" } } ] }, "children": [ { "type": "text", "label": "<% instance2.name %>", "value": "<% instance2.descriptor %>" } ] } ``` - isArrayOutBinding Data type: binding-Boolean Determines whether the entire list of panels sends together for persistence. When false, individual panels send separately. - label Data type: dynamicBinding-String Text that displays beside or above most widgets. Often used in simple widgets that include inputs. The maximum number of characters is 255. - minimumRows Data type: binding-Integer The minimum number of rows users can add to the panel. - panelId Data type: string Unique identifier used to reference the panel from other panels. Typically used with ``` list:indexOf() ``` - panelName Data type: string Name used to reference the children panels in the panel. - panels Data type: binding-List An array containing the data that populates each panel. The `children` attribute defines the children tags that populate the display for each panel. - progressiveRowDisplay Data type: binding-Boolean Determines whether or not the panelList displays a Show More button. - render Data type: binding-Boolean If true, this tag renders as a widget on the page. If false, the loaded page doesn't add this tag or its children. The default is true. Unlike the `visible` attribute, when `render` is false, other tags on the page can't reference this tag or widget on edit pages. On view pages, a tag can't reference other tags regardless of the `render` attribute value. - required Data type: dynamicBinding-Boolean If true, the user must enter a value on the widget before submitting the page. - selectedValues Data type: dynamicBinding-List List of IDs that specify the default, pre-selected values on the widget. The IDs must be a subset of the IDs in either the `values` or `instanceList` attribute. Use `selectedValues` only on edit pages. - title Data type: binding-String Title that displays for a group of panels in the panelList. - visible Data type: dynamicBinding-Boolean If true, the widget generated by this tag is visible. If false, this tag and its children tags aren't visible. This tag provides the ability to display or hide the widget dynamically based on user interactions on the page. The default is true. Unlike the `render` attribute, the generated widget persists on the page even when `visible` is false. Notes: - When the widget or field you’re hiding changes on the page, you must include it inside a `fieldSet`. - When the `visible` attribute is false for this widget on an edit page, the outbound endpoint doesn't include the `valueOutBinding` or `valuesOut` data of the widget in the payload. To include the `valueOutBinding` or `valuesOut` data in the payload, use the `onSend` event handler. ## PMD Scripting Methods - Panel List Widget Methods - addPanel(int index) Return type: `void` Description: Adds a panel at the specified index position. The index must be between 0 and the `panelList` size. The `addPanel` method ignores the `doNotAdd` attribute on the `panelList`. - anyUpdated() Return type: `boolean` Description: If true, any descendant in this container widget is updated. - getChildren() Return type: `List` Description: Returns a list containing all children of this container widget. - getDoNotAdd() Return type: `boolean` Description: If true, a user can't add a panel to the `panelList`. - getDoNotRemove() Return type: `boolean` Description: If true, a user can't remove a panel from the `panelList`. - getPanels() Return type: `List` Description: Returns all panels of this panel list as a list of panel objects. Same as getChildren(). - isVisible() Return type: `boolean` Description: If true, this widget is visible. - removePanel(int index) Return type: `void` Description: Removes a panel at the specified index position. The index must be between 0 and the `panelList` size. The `removePanel` method ignores the `doNotRemove` attribute on the `panelList`. - setDoNotAdd(boolean doNotAdd) Return type: `boolean` Description: If true, a user can't add a panel to the `panelList`. - setVisible(boolean visible) Return type: `void` Description: Enables or disables the ability to add panels to the `panelList`. If you need to change the visibility of a `panelList`, ensure that it's inside a `fieldSet`. - Panel Widget Methods - anyUpdated() Return type: `boolean` Description: If true, any descendant in this container widget is updated. - getChildren() Return type: `List` Description: Returns a list containing all children of this container widget. - isVisible() Return type: `boolean` Description: If true, this widget is visible. - setVisible(boolean visible) Return type: `void` Description: Displays or hides this widget. If you need to change the visibility of a widget, ensure that it's inside a `fieldSet`. ## PMD Scripting Events - onPanelAdd Triggers when the user adds a panel to the `panelList`. - onPanelRemove Triggers when the user removes a panel from the `panelList`.