---
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: >- 
  Concept: dynamicSection
layout: subsection
---

## <a id="section_hnb_tnq_ywb"></a>Dynamically Update Chart Data

You can place a chart tag within a `dynamicSection` to dynamically update the chart data based on user interaction.

Example: The `dropdown` selection determines what data the `dynamicSection` passes to the `clusteredBarChart2`.

When the `onChange` event triggers, the `dropdown` selection assigns a list to the `data` attribute of `dynamicSection`.

```
{
  "type" : "dropdown",
  "id" : "dynamicSectionTrigger",
  "label" : "Select Dataset",
  "instanceList" : [ 
    {
      "id" : "ds1",
      "descriptor" : "Dataset 1"
    }, {
      "id" : "ds2",
      "descriptor" : "Dataset 2"
    } 
  ],
  "onChange" : "<%
    if (self.selectedEntries[0].id == 'ds1') {
      ds.data = chartData.getChartData();
    }
    else if (self.selectedEntries[0].id == 'ds2') {
      ds.data = chartData2.getChartData();
    }
  %>"
}
```

The sample `dynamicSection` and `clusteredBarChart2` tags:

```
{
  "type" : "dynamicSection",
  "id" : "ds",
  "data" : "<% [] %>",
  "dataVariableName" : "dynamicData",
  "children" : [ 
    {
      "type": "clusteredBarChart2",
      "id": "clusteredBarChartExample1",
      "data": "<% dynamicData ?: [] %>",
      "dataVariableName": "data",
      "measurementDataSets": [
        {
          "name": "Finance",
          "value": "<% data.recruits.finance %>"
        },
        {
          "name": "Sales",
          "value": "<% data.recruits.sales %>"
        },
        {
          "name": "Support",
          "value": "<% data.recruits.support %>"
        }
      ],
      "categoryDataSet": {
        "name": "Recruiter",
        "value": "<% data.recruiter %>"
      },
      "measurementAxisOptions": {
        "axisTitle": "Recruits"
      }
    }
  ]
}
```

The PMD references these sample scripts:

```
"include" : [ "chartData.script", "chartData2.script" ],
```

This example uses modified data from [Reference: Sample Data for Chart 2.0 Examples](/wcp_docs/jmr1634444223025.html).

## <a id="section_tfv_g4q_ywb"></a>Dynamically Update Grid Data

You can place a `grid` tag within a `dynamicSection` to dynamically update the grid data based on user interaction.

Example: The `dropdown` selection determines what endpoint data the `dynamicSection` passes to the `grid`.

When the `onChange` event triggers, the `dropdown` selection assigns a map to the `data` attribute of `dynamicSection`.

```
{
  "type" : "dropdown",
  "id" : "dynamicSectionTrigger",
  "label" : "Select Dataset",
  "instanceList" : [ 
    {
      "id" : "dataSet1",
      "descriptor" : "Open Positions by Location"
    }, 
    {
      "id" : "dataSet2",
      "descriptor" : "Open Positions by Quarter"
    } 
  ],
  "onChange" : "<% 
    if (self.selectedEntries[0].id == 'dataSet1') {
      ds.data = {
        'gridData' : openPositionsByLocation.data, 
        'label': self.selectedEntries[0].descriptor,
        'type': 'A'
      };
    }
    else if (self.selectedEntries[0].id == 'dataSet2') {
      ds.data = {
        'gridData': openPositionsByQuarter.data, 
        'label': self.selectedEntries[0].descriptor,
        'type': 'B'
      };
    }
  %>"
}
```

Each `column` in the `grid` only renders if the user selects the relevant data set from the `dropdown`.

```
{
  "type": "dynamicSection",
  "id": "ds",
  "data": "<% { : } %>",
  "dataVariableName": "dynamicData",
  "children": [
    {
      "type": "grid",
      "label": "<% dynamicData.label ?: 'Dynamic Grid' %>",
      "id": "dynamicGrid",
      "rows": "<% dynamicData.gridData ?: [] %>",
      "rowVariableName": "thisRow",
      "columns": [
        {
          "type": "column",
          "columnId": "col1",
          "label": "Location",
          "render": "<% dynamicData.type == 'A' %>",
          "cellTemplate": {
            "type": "text",
            "value": "<% thisRow.location.descriptor %>"
          }
        },
        {
          "type": "column",
          "columnId": "col2",
          "label": "IT",
          "render": "<% dynamicData.type == 'A' %>",
          "cellTemplate": {
            "type": "text",
            "value": "<% thisRow.positionsIT %>"
          }
        },
        {
          "type": "column",
          "columnId": "col3",
          "label": "Operations",
          "render": "<% dynamicData.type == 'A' %>",
          "cellTemplate": {
            "type": "text",
            "value": "<% thisRow.positionsOperations %>"
          }
        },
        {
          "type": "column",
          "columnId": "col4",
          "label": "Executive Group",
          "render": "<% dynamicData.type == 'B' %>",
          "cellTemplate": {
            "type": "text",
            "value": "<% thisRow.executiveGroup.descriptor %>"
          }
        },
        {
          "type": "column",
          "columnId": "col5",
          "label": "Previous Quarter",
          "render": "<% dynamicData.type == 'B' %>",
          "cellTemplate": {
            "type": "text",
            "value": "<% thisRow.previousQuarter %>"
          }
        },
        {
          "type": "column",
          "columnId": "col6",
          "label": "Current Quarter",
          "render": "<% dynamicData.type == 'B' %>",
          "cellTemplate": {
            "type": "text",
            "value": "<% thisRow.currentQuarter %>"
          }
        },
        {
          "type": "column",
          "columnId": "col7",
          "label": "Next Quarter",
          "render": "<% dynamicData.type == 'B' %>",
          "cellTemplate": {
            "type": "text",
            "value": "<% thisRow.nextQuarter %>"
          }
        }
      ]
    }
  ]
}
```

The PMD uses these sample endpoints:

```
{
  "baseUrlType" : "workday-WQL",
  "name" : "openPositionsByLocation",
  "authType" : "sso",
  "url" : "<%
    var query = 'SELECT location, sum(cf_OpenPositionCount_IT) as positionsIT, 
      sum(cf_OpenPositionCount_Operations) as positionsOperations FROM allPositions 
      WHERE supervisoryOrganization is not empty AND worker is empty 
      GROUP BY location ORDER BY location ASC'; 
    return '/data?query=' + query.pathEncode(); %>"
},
{
  "baseUrlType" : "workday-WQL",
  "name" : "openPositionsByQuarter",
  "authType" : "sso",
  "url" : "<%
    var query = 'SELECT cf_ExecutiveGroup1 as executiveGroup, 
      sum(cf_OpenPositionCountAtEndOfLastQuarter) as previousQuarter, 
      sum(cf_PositionCount_AvailableCQ) as currentQuarter, sum(cf_PositionCount_AvailableCQ1) as nextQuarter 
      FROM allPositions WHERE supervisoryOrganization is not empty AND cf_ExecutiveGroup1 is not empty 
      AND worker is empty GROUP BY cf_ExecutiveGroup1 ORDER BY cf_ExecutiveGroup1 ASC'; 
    return '/data?query=' + query.pathEncode(); %>"
}
```

The sample data provider in the AMD:

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

## <a id="section_myh_jcr_ywb"></a>Dynamically Update Loop Data

You can use `dynamicSection` as a container for a `loop` tag to dynamically generate the `loop` child tags based on user interaction.

In this example, the user selection from the `dropdown` widget determines how many `text` tags the `loop` tag generates.

```
{
  "type" : "dropdown",
  "id" : "dynamicSectionTrigger",
  "label" : "Select Dataset",
  "instanceList" : [ {
    "id" : "dataSet1",
    "descriptor" : "DataSet 1"
  }, {
    "id" : "dataSet2",
    "descriptor" : "DataSet 2"
  } ],
  "onChange" : "<%
    ds.data = {
      'loop': empty self.value ? [] : (self.value[0] == 'dataSet1' ? [1, 2, 3] : [4, 5, 6, 7])
    };
  %>"
}, 
{
  "type" : "dynamicSection",
  "id" : "ds",
  "data" : "<% { : } %>",
  "dataVariableName" : "data",
  "children" : [ 
    {
      "type" : "loop",
      "id" : "dynamicLoop",
      "on" : "<% data.loop ?: [] %>",
      "as" : "item",
      "children" : [ 
        {
          "type" : "text",
          "label" : "<% 'Loop Child Label ' + item %>"
        } 
      ]
    } 
  ]
}
```

## <a id="section_d2z_f4q_ywb"></a>Dynamically Update Button Task Parameters

When you use a `button` tag within a `dynamicSection`, you can dynamically update its `taskReference.parameterBindings`.

In this example, the user selection from the `radioGroup` widget updates the `parameterBindings` of the `button`.

```
{
  "type": "radioGroup",
  "id": "reviewRadioGroup",
  "label": "Update Query Parameter",
  "hideDisplayOption": "true",
  "instanceList": [
    {
      "id": "queryParameter1",
      "descriptor": "Query parameter 1"
    },
    {
      "id": "queryParameter2",
      "descriptor": "Query parameter 2"
    }
  ],
  "onChange": "<%
    ds.data = { 'queryParameter': self.selectedEntries[0].descriptor }
  %>"
},
{
  "type" : "dynamicSection",
  "id" : "ds",
  "data" : "<% { : } %>",
  "dataVariableName" : "dynamicData",
  "children" : [
    {
      "type": "button",
      "action": "AUXILIARY",
      "label": "<% dynamicData.queryParameter ?: 'No query parameter' %>",
      "taskReference": {
        "taskId": "home",
        "parameterBindings": {
          "sampleQueryParameter": "<% dynamicData.queryParameter.urlEncode() %>"
        }
      }
    }
  ]
}
```

## <a id="section_ejf_f4q_ywb"></a>Dynamically Update pageActionButton Label

You can use `dynamicSection` as a container for a `pageActionButton` to dynamically update the button label.

In this example, the user input in the `text` widget updates the `label` of the `pageActionButton`.

```
{
  "type": "text",
  "id": "newLabel",
  "label": "Enter new label for action button:",
  "onChange": "<% dynamicButtonLabel.data = self.value %>"
},
{
  "type": "dynamicSection",
  "id": "dynamicButtonLabel",
  "data": "<% '' %>",
  "dataVariableName": "buttonLabel",
  "children": [
    {
      "type": "pageActionButton",
      "id": "dynamicButton",
      "label": "<% buttonLabel ?: 'Action Button' %>",
      "onClick": "<%  %>"
    }
  ]
}
```

Here's another example of a `dynamicSection` that dynamically changes the label of a button:

```
{
  "type": "dynamicSection",
  "id": "dsButton",
  "data": "<% 'Default Label' %>",
  "dataVariableName": "dynamicData",
  "children": [
    {
      "type": "pageActionButton",
      "id": "paButton",
      "label": "<% dynamicData %>",
      "onClick": "<%
        dsButton.data =  'New Label' %>"
    }
  ]
}
```

### Related Information

[dynamicSection](/wcp_docs/czx1680025291689.html)