Script Form Step for External Forms

Overview

The Script Form step was designed to perform additional JavaScript commands before processing an external Form, these are configured in the properties for the step. This article demonstrates the Script Form step by using a simple line of JavaScript that shows the current user email before the XML of the external Form is exposed. The step will attempt to reference a localhost environment, so the PortalBaseURL must be localhost/decisions/Primary for this example. 

Example

1. Navigate to a Designer Folder and select the option to CREATE FLOW from the Action Bar. 
2. Choose the Default template and select CREATE. 
3. Name the Flow, then select CREATE again. 
4. In the Steps tab of the Flow Designer, expand the Forms [Interaction] section and drag a Script Form step into the workspace.
5. Connect the Done path of the Start step to the Script Form step.
6. Select the Script Form step as it appears in the workspace to expose the properties. 
7. Enter a Service Name that will accurately describe what the service is doing, in this example, it will show the current email. 
8. Select the Add New button under Service Outcomes. 
9. When the Add Service Outcomes window appears, enter Done for the name and select OK. If other outcome paths with custom parameters for data values are needed, they can be added from this window. 
10. When the Done path is added, connect it to the End step of the Flow.
11. Locate the Script Source section of the step properties.
12. In the Script Data [NVelocity] panel, enter this simple Javascript line: alert ("Current user email is: ${Email}");
    The default Script Source option used is NVelocity which allows the user to manually write the Script.
    Alternately, users have the option to map the Javascript from Flow data via the Data option.
    
    The alert() method is a Javascript message type that uses NVelocity syntax to create a token for the value defined within ${} (in this example Email), as well as an Input for the step in the Flow Designer. This script allows the data to be mapped dynamically.

    

13. Deselect the Script Form step in the workspace once the Javascript has been configured, then select the step again so that the Email input value is revealed.
14. Use the Select From Flow mapping type and expand the Flow Data section, then select CurrentUserEmail to use as the value for the Email input. This is now assigning the Email value (defined with the custom syntax) to the current user email address, which changes dynamically based on the current user. 
15. At the top of the properties for the Script Form step, locate and select the View Integration Details button.
16. The Integration Details for this step will open in a new tab. Copy the text in the Complete via Get section that contains Javascript for the function of the Script Form step outcome.
17. Back in the Script Data [NVelocity] section of the Properties, go to the next line under the previously added Javascript and paste the GET integration script. 

Debug

1. Select Debug on the top panel of the Flow Designer to test the Script Form step action before showing the XML integration details of the Form. 
2. After launching Debugger, a new tab in the browser opens. The defined javascript is being executed on the default Script Form page showing the Alert message with the current user email. 
3. Select OK. This triggers the rest of the javascript to be executed. Switch back to the Diagram tab in the Debugger to confirm that the Flow ran to the End Step with no errors.