---
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: areaLayout
layout: subsection
wd_wcptag: areaLayout
---

Wraps a group of related widgets in a container with a border.

You can only use `areaLayout` as the top-level tag within the `body` tag.

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

This sample `areaLayout` divides content into 2 areas.

![](GUID-d4e6e157-e609-4559-9786-012f001c7b2a-enHYPHENus.png)

```

{
  "type": "areaLayout",
  "layout": "left",
  "primaryArea": [
    {
      "type": "text",
      "id": "primary",
      "label": "Primary Area",
      "value": "This widget is in the primary area."
    }
  ],
  "secondaryArea": [
    {
      "type": "text",
      "id": "secondary",
      "label": "Secondary Area",
      "value": "This widget is in the secondary area."
    }
  ]
}
```

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

Android, iOS

## <a id="section_2"></a>Attributes

-   <b>id</b>

    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.

-   <b>primaryArea</b>

    Data type: list of tags

    (Required) An array of tags in the main content area of the page.

-   <b>secondaryArea</b>

    Data type: list of tags

    An array of tags in the secondary content area of the page. If you don't define `secondaryArea`, `primaryArea` takes up the entire width of the page.

-   <b>layout</b>

    Data type: string

    Determines the location and width of `primaryArea` on the page. Valid values:

    -   `left` (default) - `primaryArea` renders on the left side of the page and takes up 2/3 of the horizontal space.
    -   `right` - `primaryArea` renders on the right side of the page and takes up 2/3 of the horizontal space.
    -   `even` - `primaryArea` renders on the left side of the page and takes up half of the horizontal space.