---
keyword: Extend
nav: wcp_docs
parent_url: /wcp_docs/
title: Add Script Modules
layout: subsection
---

### Prerequisites

<a id="prereq_N10021_N1001E_N10001"></a>
-   [Create Extend Apps Using App Builder](/wcp_docs/xer1651695264256.html)
-   Analysis of your PMD scripts to identify duplicate scripts in multiple PMDs.


### Context

<a id="context_N10032_N1001E_N10001"></a>
A script module contains PMD scripts that you can call from multiple PMDs of your Extend app. A script module is a `.script` file in the <b>Page Configurations</b> &gt; <b>Scripts</b> section of an app.

Consider these guidelines:

-   The `.script` file has a maximum file size of 100 KB.
-   Don't use the predefined app variables listed in [Reference: Predefined App Variables](/wcp_docs/urd1528494500512.html). The predefined variables are only available in PMDs but not in script modules. Predefined variables are reserved keywords that you can't use within a script module. However, PMDs can pass predefined variables as input parameters to a script of a script module. If a PMD passes a predefined variable to a script, its function declaration within the script module must use a different input parameter name.


### Steps

1.  <a id="step_N10070_N1006D_N10028_N10001"></a>In App Builder, add a <b>Script</b> component.
2.  <a id="step_N10061_N10038_N1001E_N10001"></a>Enter a unique script module name.

    The script module name must start with a letter, and must contain only letters, numbers, and underscores.

    For best practice, use a meaningful name and a naming convention that aligns with the data model or script functionality. Example: If a script module contains functions working with employeeImages, use employeeImages as part of the script module name.

3.  <a id="step_N100B9_N10041_N1001E_N10001"></a>In the script module editor, add the PMD scripts.

    <b>Note:</b> Don't use the `<% %>` notation in a script module. Only use the `<% %>` notation with scripts in PMDs or pods.

    Example: This sample `greeting.script` contains a simple script:

    ```
    var myGreeting = 'Hello';
    
    var getGreeting = function (aName) {
        myGreeting + ' ' + aName;
    }
    ```

4.  <a id="step_N100DB_N10041_N1001E_N10001"></a>Determine the variables and functions you intend to export to the PMDs in the custom app.
5.  <a id="step_N100E4_N10041_N1001E_N10001"></a>On the last line of the script module, add a map containing properties that export the variables and functions of the script module.

    Include properties that map to static variables and function declarations of the script module.

    Example:

    ```
    var myGreeting = 'Hello';
    
    var getGreeting = function (aName) {
        myGreeting + ' ' + aName;
    }
    
    /* Add this map that exports the getGreeting function as a map property. */
    {
        "welcome": getGreeting
    }
    ```

6.  <a id="step_N100FD_N10041_N1001E_N10001"></a>Open the PMD that will invoke the exported script of the script module.
7.  <a id="step_N10106_N10041_N1001E_N10001"></a>Insert the root-level `include` property, and specify the script module.

    Example:

    ```
    "include": [
      "greeting.script"
    ]
    ```

8.  <a id="step_N100F9_N10041_N1001E_N10001"></a>Modify the PMD to invoke the exported script, as appropriate.

    To invoke an exported script of a script module, specify `{scriptModuleName}.{exportedProperty}`.

    Example: This sample `text` tag on an edit page uses an `onChange` event handler that invokes the exported `welcome` property, which invokes `getGreeting`. The event handler displays the returned value in the second `text` tag.

    ```
    {
      "type": "text",
      "id": "name",
      "label": "Enter a name.",
      "onChange": "<% intro.value = greeting.welcome(self.value); %>"
    },
    {
      "type": "text",
      "id": "intro",
      "label": "Greeting",
      "enabled": "false"
    }
    ```

9.  <a id="step_N10122_N10041_N1001E_N10001"></a>Validate the custom app.
10. <a id="step_N1012B_N10041_N1001E_N10001"></a>Deploy the custom app to the Development tenant to test.


### Next Steps

<a id="postreq_N1007B_N1001E_N10001"></a>
Modify other PMDs to use the same script, as appropriate.

If you have duplicate code across multiple script modules, consider creating a nested script module that stores the duplicate code and that other script modules can call. To create a script module dependency, specify `script.include("someNestedScriptModule.script")` at the top of the calling script module.

### Related Information

[Concept: Script Modules](/wcp_docs/vvg1604530023020.html)

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

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

[Reference: PMD Scripting Examples](/wcp_docs/mdp1582058758619.html)

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