---
keyword: Extend
nav: wcp_docs
parent_url: /wcp_docs/
title: Add Script Modules to an App in IntelliJ
layout: subsection
---

### Prerequisites

<a id="prereq_N10021_N1001E_N10001"></a>
-   Workday Extend Plugin for IntelliJ version 3.11.5 or higher.
-   Analysis of your PMD scripts to identify duplicate scripts in multiple PMDs.


### Context

<a id="context_N10032_N1001E_N10001"></a>
A script module is a `.script` file located in the `presentation/scripts` folder of a custom app, and contains PMD Scripting variables, functions, and statements. You can define your common PMD scripts in a script module and invoke them from multiple PMDs of your custom 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_N1003B_N10038_N1001E_N10001"></a>Open your app in IntelliJ.
2.  <a id="step_N1004D_N10041_N1001E_N10001"></a>If your app doesn't contain a `scripts` folder yet, create the `scripts` folder.
    1.  Right-click the `presentation` folder of the custom app.
    2.  Select <b>New</b> &gt; <b>Directory</b>.
    3.  Enter `scripts` as the new directory name, which is case-sensitive.

3.  <a id="step_N10044_N10038_N1001E_N10001"></a>Right-click the `scripts` folder, and select <b>New</b> &gt; <b>Presentation Component</b> &gt; <b>Script File</b>.
4.  <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.

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

6.  <a id="step_N100DB_N10041_N1001E_N10001"></a>Determine the variables and functions you intend to export to the PMDs in the custom app.
7.  <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
    }
    ```

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

    Example:

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

10. <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"
    }
    ```

11. <a id="step_N10122_N10041_N1001E_N10001"></a>Validate the custom app.
12. <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.