Concepts Primer – Using Javascript in Workflow Forms

The first exposure I had to implementing javascript actions in Workflow processes was when claus66 posted a solution in this post on Symantec Connect.  The question that was posed was, how is the “Enter” keystroke captured and used to automatically click a specific button?  The answer in that post:

if (event.keyCode == 13){
event.returnValue=false;
event.cancel = true;
btnEnter.click();
}

At the time, I had no idea how it worked, just that it did.  Afterwards, I looked for opportunities to test other ways I could use javascript to enhance the user experience for my forms.

While some of the examples of javascript functionality would be better served using CSS pseudo classes such as :hover, :active, and :focus, these javascript-based events will help demonstrate how to use javascript with Workflow forms.

Let’s start with something simple.  I have a button and an otherwise blank canvas.
2014-11-01_11-16-10
I’m going to give it an onmouseover event, and then an onmouseout event.

2014-11-01_11-27-31onmouseover

And the code:

onmouseover

this.value = 'No, Wait!!';

onmouseout

this.value = "I's just foolin'.";

It’s easy to have a component affect itself. But what if we want an element to have an effect on another element on the form? We will use the Control Id of that element after we set it.

Symantec Workflow Form Element Control ID
Setting the Control ID allows for calls to that specific element by ID. This works for both javascript and CSS.

Now that we’ve set the control ID on a button, let’s set up a TextBox to prove the javascript method.

2014-11-01_17-06-33

The javascript event plays out like so:

javascriptgetelement

And, the code:

var formButton = document.getElementById('FormButton');
formButton.value = 'Submit ' + this.value;

Another example, using an ASCIIMergeLabel instead.

javascriptinnerhtml

The label requires a slightly different approach, as there is no value to set.

onblur:

var formLabel = document.getElementById('FormMergeLabel');
formLabel.innerHTML = 'This box reads: ' + this.value;

If an event needs to occur when the form loads instead of on some user interface interaction, we are able to utilize the Form’s body onload event.

Symantec Workflow Form Behavior
Right-click any blank area of the form canvas and click “Edit Form” to find the “Behavior” tab.

Note as well that if you need to get clever with your javascript actions, you’re able to use variables from the datastream in your scripts.

If you want to set up functions for use by the elements on the page, that can be done at the bottom of the “Behavior” tab, seen in the illustration above, in the “Script” section.

Additional Reading

Form Elements – Javascript onchange

Adding Javascript Placeholder Text to Input Elements

Form Element Javascript Confirmation Popup

5 thoughts on “Concepts Primer – Using Javascript in Workflow Forms

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s