Question

Where and when is javascript executed in forms?

Forms

Updated December 3, 2018

asked on November 29, 2018 • Show version history

I was under the impression that javascript was client side only and executed from the local browser of the user visiting the website.

However recently I have been digging into what appears to be a server side javascript executor in Forms.

If you write

console.log('test');

then this will log to the browser each time your javascript is executed on the browser side. From this perspective everything looks normal.

However if you write

document.getElementByClassName('cf-formwrap')[0].appendChild(someObject);

this will append something to the form, for example a text message.

If you submit the form, and then look at it, you will see that the object was appended once when the form was opened, and then again by some other phantom execution. In other words, your javascript code ran one extra time!

If you log to the console AND append a message to the form. You will find only 1 log to the console, but 2 appended objects. In other words, whatever phantom executed your code an extra time, was not executing in the internet browser.

If you put this code in, at the start of your javascript, it prevents the extra server side execution from running.

  
  //Block javascript from running server side
  if ($('[name=IsLocked]').val() == 'True')
   return;

1 0

Replies

replied on November 29, 2018

To answer the initial question of this post, Javascript is ONLY run when the form is loaded in the browser. It is not run server side at all. I’m not sure why you are seeing two elements appended to your form, but it’s possible you are appending twice in your JS code. The portion of code that you mentioned "Blocks javascript from running server side" stops the execution of anything after it if the statement is true. Could you have an Append before that and another one after that which would only run once with that line inserted?

We tried to reproduce the problem of the JS running twice using just the information given, but only see 1 element appended. We could try again to reproduce the issue if you give the full JS code you used.

Separately, PhantomJS is actually used for generating images of the process designer, not forms. We use a library called wkhtmltopdf to generate images of forms. That said, the image generation library we use shouldn’t affect when or where the JS is run.

1 0

replied on November 30, 2018 • Show version history

Maybe I can provide a more concrete example.

If you configure a form with a single line field, then have that form call a workflow on submission which retrieves the value of that field.

Now enter the following javascript to set the value of the field on form LOAD.

$(document).ready(function() {
$('.myFieldClass input').val('');
});

Now open the form and your function will run, which will clear the already empty field accomplishing essentially nothing. Then put a value in the field like "Test" and submit.

Since the javascript runs again on the backend, the field will be cleared a second time, and you can see from the value in the workflow that is called immediately after, the value you entered is gone.

Now add this code, to prevent a second execution.

$(document).ready(function() {

//Block javascript from running server side 
if ($('[name=IsLocked]').val() == 'True') 
   return;
 
$('.myFieldClass input').val(''); 

});

The field will only be cleared once now, on form load, and any value you enter afterwards will be transferred to workflow

0 0

replied on November 30, 2018

We are still having trouble reproducing the issue you are describing. We created a Forms process and form with the initial JS you provided. The process is a message start event, followed by a user task, followed by a WF service task. The WF simply does a retrieve business process variables and tracks the tokens.

When I ran this process, the initial form came up with nothing in the single line field
- Expected from both the fact that it was the initial form and from the JS
I filled in the single line field with "Test" and submitted
- The submitted form displayed the proper value "Test" on the thank you page
I got the user task in my inbox and loaded up the form
- The field was blank, showing the JS does clear the field on form load
I filled in the field again with the value "Test" and submitted, passing it off to WF
WF retrieved the value "Test" and it showed up in the tokens list.

Since the form wasn't loaded between when I filled in the value the second time and the WF retrieved the variable, "Test" remained.

Does this procedure match what you tried? If not, is there something else you did that could help us reproduce what you are seeing?

0 0

replied on December 3, 2018 • Show version history

I just did a bunch of testing and looks like I was wrong about it running twice by default.

It does appear that the code is only run on the back end IF (and only if) you INCLUDE

if ($('[name=IsLocked]').val() == 'True') { //Code to run on server here }

Edit: Oh and thank you for looking into this, I was sure it was running my code twice on multiple forms but can't seem to reproduce it this morning.

0 0

replied on November 29, 2018

Good catch. I just took a stroll through the files in the Forms bin directory. Sure enough, they've got PhantomJS in there. That's probably how they're rendering the form when it gets saved to the repository.

0 0

replied on November 29, 2018 • Show version history

Crazy, I was just using the word "phantom" as a descriptive word. I didn't know it was actually a product called Phantom.

The problem with randomly running code without authorization, is that it can sometimes break things.

For example, you may want to clear a field value when the user open the task.

So you would write these instructions using javascript

//When the user opens the form
$(document).ready(function() {
 //Clear previous selection
  $('.field').val('');
});

However, if that code was run randomly, instead of on form load, then it would clear values that were not meant to be cleared.

It is important when writing code, to specify when it is executed.

I can't really think of any reason the code should be run outside of when the user is actively using the form. Certainly not by default anyways.

0 0

replied on November 29, 2018 • Show version history

The problem is that a lot of people use JavaScript to modify the appearance of the form, and need that appearance to carry over to the rendered version that gets saved to the repository. Prior to finding PhantomJS, I'd've made certain incorrect assumptions about what code was safe to run.

I'm not sure I know what the answer is at this point.

EDIT: Well, I might have an idea.

1 0

replied on November 29, 2018

Modify the appearance? Using the .attr('style'... method? IE:

.attr('style', 'background-color: #C12200 !important;border: none; color:white;');

This will work for real time visual changes in any browser without any Phantom stuff needed.

I have been doing a lot of research on Javascript based visual changes recently and found that any visual changes made to the form using Javascript will NOT be saved with the archive, they are all removed.

Even if you simply add a class to a field in your javascript, where the style for that class is defined in the CSS, the CSS will not be applied unless the class name was manually added in the forms designer.

Everything is designed to strip away any dynamic changes to the look.

0 0

You are not allowed to follow up in this post.

Question

Question

Where and when is javascript executed in forms?

Replies

Sign in to reply to this post.