Question

Modern Forms Designer JavaScript

Forms Version 11

Updated March 12

asked on February 8, 2023

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, 2023

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, 2023

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, 2023 • 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

replied on March 12

I have been asked to estimate the effort to convert all our forms from classic to Modern. this is very helpful, as I was planning to take several of our more complex JS methods and link them externally, however, I am reading that this i-frame isolation will be an issue.

Has anyone found any good guides on how to convert many of the basic js functions? I have so far only found the short page in the lf 11 guide.

0 0

replied on March 12

The Help documentation is still the best resource of what functions are included in the LFForm interface, and there are getting to be a lot of examples here on LFAnswers too.

But you’re asking a pretty loaded question. It really depends on what kinds of things you are using Javascript to do in the classic designer.

Also note that there is no requirement to upgrade, the classic designer isn’t going away. That said, there are some powerful no-code functions in the new designer, so it is worth considering.

Personally, I’m not attempting to convert existing processes at this time. But any new processes, I take a hard look at what I need before I begin, and if I can make it work in the new designer, I will use it.

Here are some of the common things I use Javascript for, or have seen other users discuss here on LFAnswers. This is by no means a comprehensive list (not even close). Based on the current release Version 11 Update 5 (11.0.2312).

Changing the form title (Browser HTML element). Not currently possible in the new designer.
Changing field required or not required based on other field values. This can be done in the new designer Field Rules.
Hiding/Showing/Enabling/Disabling action buttons based on field values. This can be done in the new designer Field Rules.
Editing field labels, subtext, etc. based on events or other actions happening. This is possible using the LFForm interface in the new designer, and sometimes is even easier than doing it in the Classic designer - like changes to checkbox options.
Complete some code at the time that an Action button is clicked. This is possible in the new designer LFForm interface, but it cannot currently identify which button was pressed. This one trips me up because I have a standard notes table I use on most forms, and the most common code I have in my Javascript is code that adds a note with the name of the user task and the button clicked, so I can’t do that in the new designer currently. I’ve had to do workarounds like using Workflow to add the note after the fact.
Use Google Translate API. This is not currently possible, but there is a workaround that you can edit pretty much all of the form titles, action button labels, and field labels via the LFForm interface now, so you can create a multi-language form, just not in an automated manner with the API. There are multiple discussions here on LFAnswers and Jason Smith posted a YouTube video about doing it.
Click a custom button on your form that triggers a function in your Javascript. This is now possible in the new designer.
Field masks, such as phone numbers. I haven’t used it, but I believe it is now built-in to the Layout page of the new designer.

The new designer definitely has some big advantages like improved security of hidden content and form structure, better form structure on mobile and other size devices, easier creation of side by side layouts of fields, much more powerful field rules, etc. But the Javascript doesn’t have free-rein to modify the form contents and structure in their entirely. The decision of which to use isn’t an all-or-nothing venture and is very likely a case-by-case decision that needs to be made each time you work on a form. The new designer continues to improve with each release, before long they will likely have ways to tackle almost everything people are trying to accomplish with Javascript.

0 0

replied on March 12

I appreciate the information. I thought that classic forms was to sunset in version 12, so if this is not the case, i may need to reevaluate my need to convert.

0 0

replied on March 12

They are not adding new functionality to the classic designer, like the new, much more versatile, field rules they added to the new designer. But they have said multiple times that they do not currently have any plans to sunset the classic designer.

0 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.