---
category: [Administration & Integrations, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions, Platform and Product Extensions/Workday Extend, Platform and Product Extensions/Integration]
keyword: Extend
nav: wcp_docs
parent_url: /wcp_docs/
title: Add Pages
layout: subsection
---

### Prerequisites

<a id="prereq_ydj_hws_pwb"></a>
[Create Extend Apps Using App Builder](/wcp_docs/xer1651695264256.html)

### Context

<a id="context_N10035_N1001E_N10001"></a>
A page contains page metadata that defines the page widgets, data endpoints, and page interaction logic.

<b>Note:</b> A PMD file has a maximum file size of 100 KB.

When adding pages to your Extend app, consider these page elements:

<table><thead><tr><th>Page elements</th><th>Related information</th></tr></thead><tbody><tr><td>Page types, layout, and widgets</td><td><a href="/wcp_docs/dyg1528862158582.html">Reference: PMD Tags</a></td></tr><tr><td>Page interactions</td><td><a href="/wcp_docs/jab1582081565510.html">Reference: PMD Scripting</a></td></tr><tr><td>Data providers used by the page endpoints</td><td><a href="/wcp_docs/btj1547749859781.html">Reference: App Metadata</a></td></tr><tr><td>Authentication types used by endpoint authentication</td><td><a href="/wcp_docs/nyw1530545468565.html">Declare Authentication Types in the SMD</a>, <a href="/wcp_docs/yea1530546235609.html">Define Endpoint Authentication in the PMD</a></td></tr></tbody></table><br/>

You can use App Preview to preview and interact with PMDs in App Builder without having to deploy to a tenant. See [Quick View (Beta)](/wcp_docs/xww1669752564537.html).

### Steps

1.  <a id="step_N100CA_N100C6_N10059_N10001"></a>In App Builder, add a <b>Page (PMD)</b> component.
2.  <a id="step_N1006E_N1003C_N1001E_N10001"></a>Enter a unique name for your page.

    The name is the page `id`.

    App Builder creates a default PMD file, and adds a task in the `tasks[]` section in the AMD. The default `routingPattern` is the page `id`. If you need to customize the routing pattern of the page in the app URL, you can override the default `routingPattern` in the AMD.

3.  <a id="step_N10077_N1003C_N1001E_N10001"></a>As you edit the newly created PMD file, consider these main sections:

    -   <b>endPoints</b>

        Add inbound endpoints that retrieve data for page display.

        Example:

        ```
        "endPoints": [
        {
          "name": "charity",
          "baseUrlType": "app",
          "url": "<% 'charities/' + queryParams.charityId %>",
          "authType": "sso"
        }
        ]
        ```

    -   <b>outboundData</b>

        Add outbound endpoints and variables that submit data from an edit page.

        Example:

        ```
        "outboundData": {
          "outboundEndPoints": [
            {
              "name": "updateCharity",
              "baseUrlType": "app",
              "url": "<% 'charities/' + charity.id %>",
              "authType": "sso",
              "httpMethod": "PUT",
              "values": [
                {
                  "outboundPath": "image",
                  "value": "<% charity.image ?: null %>"
                }
              ]
            }
          ],
          "responseErrorDetail": {
            "errorSummary": "<% error %>",
            "errors": "<% errors.map(item => { item.error }); %>"
          }
        }
        ```

    -   <b>presentation</b>

        In the `presentation` > `body` section, add widgets that display data or enable user interaction.

        Example:

        ```
        "presentation": {
          "title": {
            "type": "title",
            "label": "Update Charity"
          },
          "headerSize": "STANDARD",
          "body": {
            "type": "section",
            "horizontal": true,
            "sorted": false,
            "children": [
              {
                "type": "section",
                "children": [
                  {
                    "type": "text",
                    "id": "name",
                    "label": "Name",
                    "required": "<% true %>",
                    "value": "<% charity.name %>",
                    "valueOutBinding": "updateCharity.name"
                  },
                  . . .
                ]
              }
            ]
          }
        }
        ```

        The `value` attribute displays data from the `charity` inbound endpoint. The `valueOutBinding` attribute sends data to the `updateCharity` outbound endpoint.

    -   <b>script</b>

        Add page-level scripts for widget event handlers or common logic for data validations and manipulations.

        Example:

        ```
        "script": "<%
          // Invoke endpoint and pass id as a URL paramater
          var populate = function(id) {
            if( !(empty id)) {
              var workerData = getWorkerbyId.invoke({'id': id[0]});
              descriptor.value = workerData.descriptor;
              primaryWorkEmail.value = workerData.primaryWorkEmail;
              businessTitle.value = workerData.businessTitle;
              dateOfBirth.value = workerData.dateOfBirth;
              isManager.value = workerData.isManager ? 'Yes' : 'No';
              workerDetail.visible = true;
            } else {
              workerDetail.visible = false;
            }
          };
        %>"
        ```

        The sample `populate` function is an `onChange` event handler used by this `instanceList`:

        ```
        {
        "type": "instanceList",
        "id": "instanceListWorkerSearch",
        "label": "Worker",
        "values": "<% workers.data %>",
        "multiSelect": false,
        "onChange": "<% populate(self.value); %>"
        }
        ```


4.  (Optional) To remove unnecessary white space and realign your JSON code for increased readability, right-click in a PMD file and select <b>Format Document</b>.


### Next Steps

<a id="postreq_N10111_N1001E_N10001"></a>
-   Validate the app.
-   Deploy the app to the Development tenant for testing.
-   Optionally create a task that invokes the page.
-   If you have multiple pages, define the page navigation with a flow definition in the AMD.
-   If you need to rename a page:

    1.  Click the related actions menu to the right of the app component name, and select <b>Rename</b>.
    2.  Enter the new name, while keeping the `.pmd` file extension.
    3.  Open the PMD file, and update the page id.
    4.  Open the AMD file, and update the page id in the `tasks[]` array.
    5.  Ensure that you update all other page or task id references in the app.
    6.  Redeploy the app.



### Related Information

[Concept: Presentation Components](/wcp_docs/kfa1528474007875.html)

[Concept: Page Types](/wcp_docs/zrd1553321160092.html)

[Concept: Page Navigation](/wcp_docs/qoc1553369215127.html)

[Concept: PMD Best Practices](/wcp_docs/asx1597867253394.html)

[Concept: PMD Scripting](/wcp_docs/oli1581402304020.html)

[App Catalog: Charitable Donations](/app-catalog/charitableDonations)

[App Catalog: PMD Widget Dictionary](/app-catalog/pmdWidgetDictionary)

[App Catalog: PMD Scripting](/app-catalog/pmdScripting)