Question

Modern Forms Designer JavaScript

Forms Version 11

Updated February 8

asked on February 8

I've been tasked to find out how much of what we typically do in Classic Forms designer can be done in the Modern Forms Designer, but I'm having so much trouble just attempting to get basic JavaScript functionality out of the New Forms Designer.

What I have:

A Demo form which contains a single-line Field for data lookup and a radio button field to select the type of data provided for a look up, (we have 3 different means of looking up a user, DN, NetId, and UIN.) and a Custom HTML with a button which triggers the Data lookup function, followed by a bunch of fields which are populated with data from the lookup.

The Classic Forms Demo Form uses an external JS file as well as local JavaScript which imports the external file and sets up the data import for the form, so local JavaScript has pull method which determines which method data should be pulled, calls the external JavaScript file's methods to pull the data, then uses the external JS files methods to retrieve the pulled data and put it into the form's fields.

In Classic Designer the first things the local JavaScript does is import the external JavaScript file, which can be done on the external JavaScript tab now, then it sets up the button to call the pull function:

$( document ).ready(function() 
{
  $(document).on('click','.iAmButton', pullDsData);
});

So since New Forms Designer JavaScript doesn't have jQuery, I instead just update the Custom HTML to have an onclick propery instead:

<p><input type="button" value="Query Web Service" onclick="pullDsData();" class="iAmButton"></p>

I convert the pullDsData method to use the new LFForms object, and add that to the "inline" javascript tab. Preview the Form and click the button... and Nothing... Check the Dev tools console and I find this:

Uncaught ReferenceError: pullDsData is not defined
at HTMLInputElement.onclick (0:1:1)
onclick @ 0:1

I double-check my converted LFForm object "inline" JavaScript again to confirm I have the method there...

async function pullDsData()
{
  	var dataIn =  LFForm.getFieldValues({fieldId: 1}); 
  	var dataType = LFForm.getFieldValues({fieldId: 2});
    	
  	if (dataType == "UIN")
        {
      	useDirectorySearchUIN(dataIn);
        }
  	else if (dataType == "NetId")
  	{
      	useDirectorySearchNetId(dataIn);
  	}
  	else 
  	{
      	useDirectorySearchDn(dataIn);
  	}
  
    LFForm.setFieldValues({fieldId: 5}, getDirectorySearchAllJSON());
    LFForm.setFieldValues({fieldId: 6}, getDirectorySearchCn());
    LFForm.setFieldValues({fieldId: 7}, getDirectorySearchOfficialName());
    LFForm.setFieldValues({fieldId: 8}, getDirectorySearchTitle());
    LFForm.setFieldValues({fieldId: 9}, getDirectorySearchFirstName());
    LFForm.setFieldValues({fieldId: 10}, getDirectorySearchLastName());
    ...
}

So currently I can't even test if my converted JavaScript with the LFForm object is working as I can't get a simple onClick to call the function...

Is there something obvious here that I'm just completely missing ?

1 0

Replies

replied on February 8

The differences with Javascript between the Classic Designer and the Modern Designer are pretty big. The biggest difference is that the custom Javascript you are adding to the form in the Modern Designer is running within a sandboxed iFrame, so it's separate from the main page and form.

This means that where you have added your own script and/or attached the external js file, is within the iFrame, and where you running the onclick function from the custom HTML element, is not within the iFrame, which is why they cannot see or manipulate each other.

I have no reason to believe the rest of your script won't work (of course I haven't tested it, but nothing jumps out as major issues), but I don't know of any way to make the button click trigger the script.

There are a few event triggers you can access through the LFForm object, like field blur, so you might be able to get this working that way instead of the button click.

1 0

replied on February 8

Not sure if this is of any help...
https://answers.laserfiche.com/questions/205868/JavaScript-External-URL

But it looks like we will have to rely on the External JavaScript a lot more in the Modern Designer. I haven't had a chance to do anything in depth with the External JavaScript yet.

0 0

replied on February 8 • Show version history

Unfortunately, that still runs from within the sandboxed iFrame and cannot directly access components of the form or window. You’re still limited to the functionality built into the LFForm object to manipulate the form components.

1 0

You are not allowed to follow up in this post.

Question

Question

Modern Forms Designer JavaScript

Replies

Sign in to reply to this post.