---
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: Presentation Components
layout: subsection
---

## <a id="section_kws_pjd_tdb"></a>Key Features

-   <b>Built on Workday user interface</b>

    Using Presentation Components, your custom app can display custom pages within Workday that integrate your tenant data with external data sources. Your custom pages automatically provide consistent and customer-friendly Workday user experience while providing personalized and context-aware data.

    Presentation Components avail of the same engines used by the Workday UI. This feature enables your custom app to use the familiar Workday UI widgets. Additionally, your custom app can run in the Workday mobile app.

-   <b>Access to RESTful data sources</b>

    Presentation Components interact with data sources using REST API endpoints. Your custom pages can access the Workday REST APIs and any external web service using their JSON-based REST APIs.

    If an app uses third-party data providers, ensure that the external web services permit connections from Workday IP addresses to your site. To view the list of IP addresses, see <b>Allow List IP Addresses for Third-Party REST APIs</b> in [Reference: Workday Extend Basic Setup](/wcp_docs/oas1626117162588.html).

-   <b>JSON-based pages</b>

    Much like writing pages in HTML, create pages with Presentation Components by writing mark-up pages. The markup language is JavaScript Object Notation (JSON). A page defines UI widgets as JSON tags. Unlike static HTML, PMD files are aware of your sources of data. PMD files use that knowledge to produce rich pages that are as dynamic as your APIs.

    <b>Note:</b> PMD files and all presentation component files have a size limitation of 100 KB.

-   <b>Authentication Options</b>

    You can specify authentication options on each page of your custom app. Presentation Components support these types of authentication:

    -   No authentication - You can create public pages or sites that don't require authentication.
    -   Workday Single Sign-On (SSO) authentication - Your users can access your app pages by signing in to Workday.
    -   OAuth2 - Your app can invoke external API endpoints that require OAuth2 authentication.
    -   Integration System User (ISU) - You can use the Workday ISU to authenticate your app users.
    -   Amazon Web Services - Your app can access AWS data sources that require AWS authentication.



## <a id="section_applicationComponents"></a>Presentation Components

The presentation components are metadata files that define the custom app UI. Note that all presentation component files have a size limitation of 100 KB.

-   <a id="dlentry_amd"></a><b>App Metadata (AMD)</b>

    The AMD is an `.amd` file that contains these app-level declarations:

    -   Custom app properties.
    -   Data providers.
    -   Page flow definitions.
    -   URI route patterns to task pages.
    -   Universal footer pod reference.

    The various app components can reference the AMD properties.

-   <a id="dlentry_smd"></a><b>Site Metadata (SMD)</b>

    The SMD is an `.smd` file that contains these site declarations:

    -   Authentication types.
    -   Custom error page definitions.

    The various app components can reference the SMD properties.

-   <a id="dlentry_pmd"></a><b>Page (PMD)</b>

    A PMD file defines the presentation layout with UI widgets on a page. The PMD file also defines the API endpoint invocations for inbound and outbound data accessed by a page. Your app can have multiple pages.

    You can customize the widget behavior by setting its tag attributes, calling its methods, and handling events with PMD scripts.

-   <a id="dlentry_script"></a><b>Scripts</b>

    A script module defines reusable PMD scripting logic for easier app code development and maintenance. An app can have multiple scripts (`.script` files).

-   <a id="dlentry_pod"></a><b>Pods</b>

    A pod defines reusable page widgets for easier app code development and maintenance. An app can have multiple pods (`.pod` files).

-   <a id="dlentry_error"></a><b>Error pages</b>

    An error page displays a custom error message that overrides a standard HTTP error message. An app can have multiple error pages (PMD files).



## <a id="section_applicationLanguages"></a>Languages and Constructs

Use these languages and constructs to build your custom app components:

-   <a id="dlentry_json"></a><b>JavaScript Object Notation (JSON)</b>

    All custom app components use JSON schemas, each with a set of properties and subschemas.

    In a PMD file, define UI widgets using PMD tags within the `presentation` subschema.

    ![](GUID-c6fc7580-1080-4c18-a7e7-7a16a91a821b-enHYPHENus.png)

    A PMD tag uses this JSON structure:

    ```
    {
    "type" : "aTagType",
    "id" : "aUniqueTagId",
    "attribute1" : "attributeValue1",
    "attribute2" : "attributeValue2",
    "attributeN" : "attributeValueN",
    "someEvent" : "<% someEventHandlerScript %>"
    }
    ```

    The `type` attribute specifies the name of the tag that defines the widget. Each tag provides attributes that enable you to control the widget appearance and behavior. An attribute value can contain either a static value, a PMD script, a child tag, or an array of children tags. Examples:

    -   Static value

        The `value` attribute of this sample `text` tag uses a static value:

        ```
        {
             "type" : "text",
             "id" : "hello",
             "label" : "Hello World!",
             "value" : "Welcome to Workday!"
        ```

    -   PMD script

        The `value` attribute of this sample `number` tag uses a PMD script that performs a calculation, which includes a call to a custom function. This snippet is from a PMD that uses a `script` tag containing the `getRegistrationFee` function declaration.

        ```
        {
        "type": "number",
        "id": "freq",
        "label": "Total amount due today : ",
        "value": "<% getRegistrationFee() + (12 * flowVariables.monthlyRateFlowValue) %>"
        }
        ```

    -   Child tag

        The `taskReference` attribute of this sample `button` tag is a child `taskReference` tag:

        ```
        {
         "type": "button",
         "id": "btnHome",
         "label": "Home",
         "taskReference": {
             "type" : "taskReference",
             "taskId": "root"
         },
         "action" : "LINK",
         "commandHttpMethod" : "GET"
        }
        ```

    -   An array of tags

        The `children` attribute of this sample `section` tag is an array of tags:

        ```
        {
        "type": "section",
        "horizontal": true,
        "children": [
         {
           "type": "button",
           "action": "PRIMARY",
           "label": "My Charitable Donations",
           "taskReference": {
             "taskId": "manageMyDonations"
           }
         },
         {
           "type": "button",
           "action": "AUXILIARY",
           "label": "<% 'Return to' + site.appProperties.appName %>",
           "taskReference": {
             "taskId": "home"
           }
         }
        ]
        }
        ```


    On the tag definition, you can also specify an event with an event handler using PMD Scripting. For more information, see Event Handling in [Concept: PMD Scripting](/wcp_docs/oli1581402304020.html).

-   <a id="dlentry_apiCalls"></a><b>REST API calls</b>

    Your app can invoke Workday Extend and third-party REST API services that return JSON data. The REST API services can provide either inbound endpoints that fetch data or outbound endpoints that persist data.

    If you have multiple REST API endpoints that share the same base URL, declare them as data providers in the AMD. Declaring the data providers once in the AMD enables multiple endpoints across your pages to reference the base URL as necessary. Example:

    ```
    "dataProviders": [
     {
       "key": "workday-staffing",
       "value": "https://api.workday.com/staffing/v1/"
     },
     {
       "key": "workday-payroll",
       "value": "https://api.workday.com/payroll/v1/"
     },
     . . .
    ],
    ```

    The `endPoints` array in the page contains inbound endpoints that fetch data. When the page loads, it invokes the HTTP GET method of the inbound endpoints. You can bind the API response data to the widgets on the page. Example:

    ```
    "endPoints" : [
    {
       "name": "payInput",
       "baseUrlType": "workday-payroll",
       "url": "<% 'payrollInputs/' + queryParams.donationId %>",
       "authType": "sso"
    }
    ],
    ```

    The `outboundEndPoints` array in the page contains outbound endpoints that add to, modify, or delete from the data source. You can bind the page widgets to outbound variables containing user input data. When a user submits the page, it invokes the outbound endpoint with the request data from the page widgets. The default HTTP method is POST. Specify the HTTP method to override the default POST method. Example:

    ```
    "outboundData": {
     "outboundEndPoints" : [
       {
         "name": "updatePayInput",
         "baseUrlType": "workday-payroll",
         "url": "<% 'payrollInputs/' + queryParams.donationId %>",
         "httpMethod": "PATCH",
         "authType": "sso",
         "exclude": "<% !payInput.usedInCompletedResult %>",
         "_comment": "If the donation has triggered a deduction, we will update the payInput with a new endDate."
       },
       . . .
    ]
    },
    ```

    If your custom app uses external, third-party REST APIs, ensure that the external API services permit connections from Workday IP addresses to your site. To view the list of IP addresses, see <b>Allow List IP Addresses for Third-Party REST APIs</b> in [Reference: Workday Extend Basic Setup](/wcp_docs/oas1626117162588.html).

-   <a id="dlentry_pmdScripting"></a><b>PMD Scripting</b>

    PMD Scripting enables you to author and embed multiline scripts on the page. Use this notation to specify a PMD script:

    ```
    <% insert-script-here %>
    ```

    On a page, you can declare a script block containing custom functions that the widgets on the same page can call. You can also create script modules containing shared functions that multiple pages can call.

    Within a PMD script, you can call:

    -   PMD functions.
    -   Custom functions that you declared in a PMD script block or script module.
    -   Widget methods.
    -   Endpoint methods.
    -   Event handlers.
    -   Console methods for logging.

    The PMD Scripting syntax uses a familiar, Java-based expression language that supports object-oriented API calls. You can create your own functions within a script, and call your custom functions within the widgets on the page.

    This sample `date` tag uses an `onChange` event handler, `calculateByBusinessDays`:

    ```
    {
    "type": "date",
    "id": "startDateW",
    "label": "Start Date",
    "datePrecision": "DAY",
    "value": "<% date:getTodaysDate(date:getDateTimeZone('America/Los_Angeles')) %>",
    "onChange": "<% calculateByBusinessDays(); %>"
    }
    ```

    The page of the sample `startDateW` has a `script` block that contains the `calculateByBusinessDays` function definition:

    ```
    // Calculates the end date by providing a start date and an increment value
    var calculateByBusinessDays = function() {
    if( !(empty startDateW.value) && !(empty incrementW.value)) {
     var endDate = addBusinessDays(startDateW.value, incrementW.value[0]);
     endDateW.value = date:format(endDate, 'MM/dd/yyyy');
     businessDaysW.value = getDaysBetween(startDateW.value, endDate);
    }
    }
    ```

    For more information and examples of PMD Scripting, see [Concept: PMD Scripting](/wcp_docs/oli1581402304020.html).

-   <a id="dlentry_functions"></a><b>PMD functions</b>

    PMD functions are specialized functions that you can call in your page. You can call PMD functions for string manipulations, comparisons, data transformations, validations, file management, and others.

    The sample `calculateByBusinessDays` script uses the `date:format` PMD function.

    ```
    // Calculates the end date by providing a start date and an increment value
    var calculateByBusinessDays = function() {
    if( !(empty startDateW.value) && !(empty incrementW.value)) {
     var endDate = addBusinessDays(startDateW.value, incrementW.value[0]);
     endDateW.value = date:format(endDate, 'MM/dd/yyyy');
     businessDaysW.value = getDaysBetween(startDateW.value, endDate);
    }
    }
    ```

    You can call PMD functions either as instance methods or namespace functions. If a PMD function doesn't have an instance method equivalent, you can only call it as a namespace function.

-   <a id="dlentry_variables"></a><b>App variables</b>

    Presentation Components provide predefined variables that are available in the AMD, SMD, and pages at various contexts.

    This sample `title` uses the `site.appProperties` app variable to display the `appName` custom variable in the AMD:

    ```
    "presentation": {
     "title": {
       "type": "title",
       "label": "<% site.appProperties.appName %>"
     },
     . . .
    }
    ```



## <a id="section_pgj_kzg_r4b"></a>Sample Apps

See the Charitable Donations and PMD Scripting sample apps in the Apps Catalog.

### Related Information

[Add Pages to an App](/wcp_docs/got1677267309928.html)

[Reference: Extend App Metadata](/wcp_docs/btj1547749859781.html)

[Reference: PMD Tags](/wcp_docs/dyg1528862158582.html)

[PMD Scripting](/wcp_docs/jab1582081565510.html)

[Reference: Site Metadata](/wcp_docs/mwr1528410641805.html)

[Reference: Workday Extend API Gateways and Authorization Base URLs](/wcp_docs/dlh1653340161856.html)

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

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

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

[Tutorial: Extend Orchestrations Learning Program](https://wd5.myworkday.com/workday/learning/program/2af63f82610f100094e53307d8c40001?type=2d29754fdb8e100008b50ff6bc94003b)