--- 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: section layout: subsection wd_wcptag: section --- A vertical or horizontal group of related widgets. Use `section` on view and edit pages. If you want to create a section with a title, use `fieldSet`. Jump to: - [Mobile Support](/wcp_docs/wjy1524108289078.html#section-mobile-support) - [Attributes](/wcp_docs/wjy1524108289078.html#section-attributes) - [PMD Scripting Methods](/wcp_docs/wjy1524108289078.html#section-pmd-scripting-methods) ## Usage ## Creating a Horizontal Layout To display horizontal widgets in a `section`, set the `horizontal` attribute to true. The `section` tag enables you to adjust the column width ratios across the widgets by setting the `columnWidthRatios` array. For each widget in the horizontal section, specify a decimal number. The total of the numbers in the array should equal 1. If the total doesn't equal 1, the page adjusts the width accordingly. To ensure the proper display of the column width ratios, wrap each horizontal widget within a nested section. You can control the horizontal display and form aesthetics of a section by using the `layout` attribute. Its properties include: - `alignment`: Horizontal positioning. - `density`: Vertical spacing. - `horizontalSizing`: Widget stretching. - `labelPosition`: Label placement relative to the widget. Nested sections or fieldSets inherit or override corresponding `layout` properties in the parent section. - If the `layout` attribute or individual `layout` properties are not specified, the section displays the standard layout and default properties. - A nested section inherits the `layout` properties of its parent container. - A `layout` property in a nested section overrides its corresponding `layout` property in the parent section, if specified. This sample page contains a section with 2 nested sections, horizontally displayed using the specified column width ratios. The dashed lines illustrate the form containers. ![](GUID-b98be4b3-579e-4442-bfff-4781f47b0c75.png) The parent section for this example specifies the `layout` attribute containing these properties: - density: low. - alignment: left. - horizontalSizing: fixed. - labelPosition: side_align_right. The layout of the 2 nested sample sections inherit the parent layout properties, except for the contactSection layout properties that override the labelPosition and horizontalSizing properties. Here’s the sample PMD page. Notice the `layout` attribute in parentSection and contactSection: Example: ``` { "id": "twoColumnsInSection", "endPoints": [ ], "presentation": { "pageType": "edit", "title": { "type": "title", "label": "Layout Properties Within a Two-Column Section" }, "body": { "type": "section", "id": “parentSection", "horizontal": true, "columnWidthRatios": [ 0.4, 0.6 ], "layout": { "density": "low", "alignment": "left", "horizontalSizing": "fixed", "labelPosition": "side_align_right" }, "children": [ { "type": "section", "id": "workerSection", "title": "Worker Employment", "children": [ { "type": "text", "id": "leftName", "label": "Name", "value": "<% 'John Doe' %>" }, { "type": "date", "id": "leftDate", "dateDisplayPattern": "MM-dd-yyyy", "label": "Hire Date", "value": "<% '2026-04-20' %>" }, { "type": "number", "id": "leftNumber", "label": "Job Level", "fractionDigits": 0, "value": "3" } ] }, { "type": "section", "id": "contactSection", "title": "Contact", "layout": { "labelPosition": "top", "horizontalSizing": "stretch" }, "children": [ { "type": "instanceList", "id": "middleContactMethod", "label": "Contact Method", "selectedValues": "<% ['email'] %>", "instanceList": [ { "id": "email", "descriptor": "Email" }, { "id": "phone", "descriptor": "Phone" } ] }, { "type": "text", "id": "middleContact", "label": "Contact Information", "value": "<% 'john.doe@email.com' %>" }, { "type": "checkBox", "id": "middlePrimary", "label": "Primary Contact", "value": true } ] } ] } } } ``` For details, see `layout` in the Attributes section. ## Creating Tabs To create tabbed sections on a page, add a `tabs[]` array under `presentation`, and specify a `section` tag for each tabbed section. For each tabbed section, specify: - `label` - The tab title. - `children` - An array containing the widgets on the tab. This sample `presentation` tag contains 2 tabbed sections: ``` "presentation": { "tabs": [ { "type": "section", "label": "Tab 1", "children": [ { "type": "text", "id": "workerText", "label": "Simple Text", "value": "<% workersEndpoint.data[0].descriptor %>" } ] }, { "type": "section", "label": "Tab 2", "children": [ { "type": "grid", "id": "workerGrid", "label": "Simple Grid", "rows": "<% workersEndpoint.data %>", "rowVariableName": "thisRow", "columns": [ { "type": "column", "columnId": "col1", "label": "Worker", "cellTemplate": { "type": "text", "value": "<% thisRow.descriptor %>" } }, { "type": "column", "columnId": "col2", "label": "Supervisory Organization", "cellTemplate": { "type": "text", "value": "<% thisRow.primaryJob.supervisoryOrganization.descriptor %>" } } ] } ] } ], "body": { "type": "section", "horizontal": false, "children": [ { "type": "text", "id": "hello", "label": "Hello World!", "value": "Welcome from Workday!" } ] } } ``` Guidelines and considerations: - Specify at least 2 `section`s in `tabs[]`. If you only have 1 `section`, it displays as an untabbed section. - You still need to specify the `body` tag in `presentation` with at least 1 tag. If the `body` doesn't contain a widget, the sections display as untabbed sections. The `body` displays at the top of the tabbed sections, regardless of the placement of `tabs` in the PMD. - Presentation Components don't support `tabs` in the Workday mobile app. - Some PMD pages might not be compatible with profile groups. Example: Nested tabs on Extend pages might not render correctly inside profile groups. ## Mobile Support Android, iOS ## Attributes - children Data type: list of tags An array of tags that belong to this parent tag. - columnWidthRatios Data type: number array An array of decimal ratios that specify the column widths of a horizontal section. The sum of the ratios should equal 1. Example: `"columnWidthRatios": [0.3, 0.7]`. If you use `columnWidthRatios`, you must set `horizontal` to true. - horizontal Data type: boolean If true, the children `section` or `fieldSet` tags display horizontally. - 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. - label Data type: dynamicBinding-String The tab label for a tab section. A tab `section` requires the `label` attribute. Note: The `label` only appears when the `section` is a tab. - layout Data type: `layout` object Contains properties that control the display of the widgets within the `section`. - Default: If `layout` is not specified, `section` displays the standard layout. - Inheritance: A nested `section` or `fieldSet` inherits the `layout` attributes of its parent section. - Overrides: A `layout` attribute in a nested `section` or `fieldSet` overrides any specified `layout` attribute in the parent section. The `layout` object contains these attributes: - alignment Data type: string Controls the horizontal alignment of the widgets in the section. Right-alignment is not available. Valid values: - `center` - The widgets are centered within the `section`. - `left` - (Default) The widgets display on the left side of the `section`. - density Data type: string Controls how tightly the tags are vertically displayed in the `section`. Valid values: - `low` - Least compact, with maximum vertical spacing between widgets. - `medium` - (Default) Medium vertical spacing between widgets. - `high` - Very compact, with minimal vertical spacing between widgets. - horizontalSizing Data type: string Controls how widgets are horizontally stretched across the `section`. Valid values: - `fixed` - (Default) The widgets horizontally display in a fixed width. - `stretch` - The widgets are fully stretched across the `section`. - labelPosition Data type: string Controls the position of the widget label. Valid values: - `top` - (Default) Displays on top of the widget. - `side_align_left` - Left-aligns the label on the left side of the widget. - `side_align_right` - Right-aligns the label on the left side of the widget. - 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. - sorted Data type: boolean If true, the `sortOrder` attributes in the child tags determine the sorted placement of this widget. Note that `sorted` doesn't apply to sorting data on the widget. `sorted` only applies to the placement order of the widgets within the parent widget. - sortOrder Data type: binding-String When you set `sorted` to true on the `section` or `fieldSet` parent of this widget, the `sortOrder` attribute determines the order of this widget within its parent. The sort order is relative to the siblings of the widget. Typical values are "a", "b", "c", and so on. Example: The widget with `"sortOrder": "a"` displays before the widget with `"sortOrder": "b"`. Note: The `sortOrder` doesn't apply to sorting data on the widget. `sortOrder` only applies to the placement order of the widgets within the parent widget. - 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 - anyUpdated() Return type: `boolean` Description: Determines if any descendant in this container widget is updated. - get(String childId) Return type: `Widget` Description: Returns the child widget with the specified tag `id` inside this container. The `get(childId)` method enables you to directly access the children of the `section` widget. Different ways to call the `get(childId)` method: - container.childId Example ``` mySection.textField.value = self.value; ``` - container['childId '] Example ``` mySection['textField'].value = self.value; ``` - container.get('childId ') Example ``` mySection.get('textField').value = self.value; ``` - getChildren() Return type: `List` Description: Returns all children of this container widget as a list. - getChildrenMap() Return type: `Map` Description: Returns a map containing all children of this container widget. The keys in the map are the ids of the children tags. - isVisible() Return type: `boolean` Description: Returns true if 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 `section`, ensure that it's inside a `fieldSet`. ### Related Information [Reference: When to Use section vs fieldSet](/wcp_docs/GUID-efbc531b-fac9-4e5a-a012-4b638453b34b-enHYPHENus.html)