---
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 to an App in IntelliJ
layout: subsection
---

### Context

<a id="context_N10035_N1001E_N10001"></a>
Use the Workday Extend Plugin for IntelliJ to add pages to an app.

A page is a PMD file located in the `presentation` folder of a custom app, and 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 app, consider these page elements:

-   Data providers, endpoint URLs, and their authentication types for data access. Declare the data providers in the App Metadata (AMD), and the authentication types in the Site Metadata (SMD). See [Reference: App Metadata](/wcp_docs/btj1547749859781.html) and [Reference: Site Metadata](/wcp_docs/mwr1528410641805.html).
-   Page types, layout, and user interface design. See [Reference: PMD Tags](/wcp_docs/dyg1528862158582.html).
-   Page interactions. See [Reference: PMD Scripting](/wcp_docs/jab1582081565510.html).


### Steps

1.  <a id="step_N1003F_N1003C_N1001E_N10001x"></a>Open your app in IntelliJ.
2.  <a id="step_N10059_N1003C_N1001E_N10001"></a>Right-click the `presentation` folder, and select <b>New</b> &gt; <b>Presentation Component</b> &gt; <b>Pmd File</b>.
3.  <a id="step_N1006E_N1003C_N1001E_N10001"></a>Enter a unique name for your page.

    The name is the page `id`.

4.  <a id="step_N1008E_N10053_N1001E_N10001"></a>Select either <b>View Pmd</b> or <b>Edit Pmd</b>.

    The Workday Extend Plugin for IntelliJ 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.

5.  <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); %>"
        }
        ```




### 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.  In IntelliJ, right-click the PMD file, and select <b>Refactor > 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.