How To Leverage JavaScript in the Workflow 'Form Builder' Component

This article builds upon the following: https://www-secure.symantec.com/connect/videos/adding-custom-javascript-workflow-web-forms-video

The 1st example shows how to strip HTML tags from a 'Multiline TextBox' component in the ServiceDesk Advanced Form.
The 2nd example implements a strict policy of not using a Seven Dwarf's name in the Description field of the ServiceDesk Simple Form.

Example #1

1) Open the SD.Feeder.TechnicianIncidentForms project.
2) Open the 'Create Incident' Form Builder component.
3) Right-Click in an open area of the Form and select 'Edit Form'.



4) Select the 'Behavior' tab.
5) Paste the following into the 'Script' ellipse and then click 'OK' twice.

function cleanText(x) {
    if (x.value.length > 0) {
       var tmp = document.createElement("DIV");
       tmp.innerHTML = x.value;
       x.value = tmp.textContent || tmp.innerText || "";
    }
}

6) Open the 'Description' Multiline TextBox component.
7) Select the 'Functionality' tab.
8) Set the 'Control ID' field to a unique value. For Example: DescriptionFullOfTags
   More reading: http://www.w3schools.com/tags/att_global_id.asp
9) Add (2) 'Custom Events' using the 'AttributesKeyValuePair' selection.
10) Select 'onmouseout' for the 1st 'Event', and 'onmouseleave' for the 2nd.
11) Paste the following into the respective 'Event Handler' ellipses.

cleanText(this);

12) Save your work and test.


Example #2

1) Open the SD.IncidentManagementSimple.EndUserRequest project.
2) Select: Model[3]: Create Incident
3) Open the 'Create New Incident' Form Builder component.
4) Right-Click in an open area of the Form and select 'Edit Form'.



5) Select the 'Behavior' tab.
6) Paste the following into the 'Script' ellipse and then click 'OK' twice.

function sevenDwarfs(x) {
   var mapDwarf = {
       doc:"1st Dwarf",
       grumpy:"2nd Dwarf",
       happy:"3rd Dwarf",
       sleepy:"4th Dwarf",
       bashful:"5th Dwarf",
       sneezy:"6th Dwarf",
       dopey:"7th Dwarf"   };
   if (x.value.length > 0) {
      var re = new RegExp(Object.keys(mapDwarf).join("|"), "gi");
      x.value = x.value.replace(re, function(matched) {
         return mapDwarf[matched.toLowerCase()];
      });
   }
}

7) Open the 'Details that might help resolve this issue.' Multiline TextBox component.
8) Select the 'Functionality' tab.
9) Set the 'Control ID' field to a unique value. For Example: DescriptionFullOfDwarfs
10) Add (1) 'Custom Events' using the 'AttributesKeyValuePair' selection.
11) Select 'onmouseout' for the 'Event'.
12) Paste the following into the 'Event Handler' ellipse.

sevenDwarfs(this); 

13) Save your work and test.

NOTES:

Example #1
The cleanText() function uses the Browser's built in capabilities.
One could use the function in any Text Box component that implements the 'Functionality' feature.
By adding the function to the 'Behavior' tab of the 'Edit Form' step (3), we have access to the function from anywhere.

Example #2
The sevenDwarfs() function could be easily modified to sensor language used in a form.
The 'var mapDwarf' definition provides the translation. For example: badword:""

Browser compatibility: Anything but Internet Explorer < 10