You are viewing limited content. For full access, please sign in.

Discussion

Discussion

JavaScript on Modern Forms Still isn't Good Enough

posted on May 15, 2024 Show version history

Self-Hosted, Laserfiche Forms Professional Version 11.0.2307.40556

I’ve been spending time with the Modern Forms designer, trying to determine if its ready for us to adopt yet. There’s a lot to like about where things are heading and I really hope we can start using them soon. But the current JavaScript support is still keeping us from adopting Modern Forms Designer.

The whole idea of scripting is to cover the cases that the product doesn't already handle. But by locking our scripts in a sandbox and restricting our control of the form to the interactions predefined by LFForm object, we're right back to being limited to the functionality that was anticipated and built into the product. This completely neutralizes the point of allowing JavaScript on Forms; it may as well not even be there. As far as I'm concerned, the current "JavaScript support for Modern Forms Designer" is nothing more than a glorified alternative to field rules.

Give us actual JavaScript support, please. Let us interact with the DOM.

0 0
replied on May 16, 2024

Can we get a CSS/JavaScript/Formula Examples v3 solution template showing how everything would work in the new designer instead of the classic.

I hit a road block every time I try to use the API, the available methods are too limited

3 0
replied on May 19, 2024

Definitely, I plan to release a v3 of the CSS/JS Examples before the LF12 release!

1 0
replied on February 18

Hi Zachary,

We've installed LF12 in our sandbox environment but when I look at the Solution Templates, all I see is v2. Is there a v3 still coming?

0 0
replied on February 18

Unfortunately not yet, we did just release a new AI feature in the documentation that does a decent job at answering LFForm questions. Just make sure to be specific about using the new form designer and LFForm object in your questions.
 

I will also be giving a very advanced JS class about the new form designer at empower this year so make sure to sign up for that! 

1 0
replied on February 20

I did indeed pick that one.

0 0
replied on May 15, 2024

I am the Forms product manager and I do agree that the LFForm object is missing some crucial APIs to accomplish what designers are used to in the classic designer. The new designer was built with security and performance in mind. Load times and lookup results rendering are much quicker and the new tooling passes a suite of modern web page security tests that protect us and your users. That being said, there have been significant updates introduced in v11 update 5 as well as the upcoming v12 release late this year. Between custom html and html in field strings (v12) you can accomplish a lot of the UI customization you want already. We are planning to add additional validation control in the subscribe event handler functions to give designers additional control over the UX of their forms. 
 

I am very interested in hearing more about the customizations you use in classic forms either through answers or we can hop on a quick call and I can show you some of the applications I’ve written. 

4 0
replied on May 16, 2024

Thank you for your response. I'll have to get a little more updated, custom HTML fields might solve some of my concerns about creating custom UI components.

Do you know of/are there plans to allow loading module type scripts into the sandbox? Right now the Forms Designer UI doesn't permit it and trying to do it with an import() function is blocked by CORS. ...Maybe if my server permitted serving all domains, but I'm not about to do that.

Could you tell me (or refer me) more about the security tests? I can understand a concern about protecting against Forms process designers potentially introducing malicious scripts through incompetence/negligence, but the sandbox alone doesn't really prevent that, does it? A malicious script inside the sandbox could still access user input on the form, for example.

One final thought, do you have tips on speeding up the process of writing custom script with the new forms designer? I used to draft a lot of code in the devtools console and copy snippets over into my script. That technique doesn't work so well anymore now that the contexts are so different.

Again, thanks for your reply.

0 0
replied on May 17, 2024 Show version history

I also use a pair of iframe resizer scripts which go on a form and a website which embeds the LF form. I know Forms has an embed script which is supposed to be able to automatically resize the iframe containing the form, but it does it by reading the properties of the Forms document and fails due to CORS issues, so the autoheight setting doesn't work.

The scripts we are using on classic designer forms works by posting a message from the Forms document to the parent document, which in turn resizes the iframe according to the message instructions. We won't be able to use our custom scripts with modern designer since the one on the form has to be at the top level of the document, but if you guys updated your embedding script so that autoheight worked on webpages that are cross domain, then that's one big use case taken care of.

0 0
replied on May 19, 2024

Do you know of/are there plans to allow loading module type scripts into the sandbox? 

Typically in this scenario the script is allowed from any origin, but for a couple of reasons I want to see if we can apply a specific origin to the sandbox for CORS security checks without specifically allowing all domains. Many 3rd party APIs restrict calls to specific origins so this would alleviate both issues.

 

Could you tell me (or refer me) more about the security tests? I can understand a concern about protecting against Forms process designers potentially introducing malicious scripts through incompetence/negligence, but the sandbox alone doesn't really prevent that, does it? 

In this scenario we're mostly trying to isolate the users credentials from designer scripts and malicious 3rd party scripts/extensions. I'll try to locate more specifics when I get a chance.

One final thought, do you have tips on speeding up the process of writing custom script with the new forms designer?

I write almost all of my code in VSCode using a typings file I made myself. I do plan to release this a community downloadable typings file for local development. For your use case, in the devtools window you can toggle the frame source to the sandbox window and this will give you access to the LFForm object and sandbox scope. There is a context for each extension loaded on the page but the sandbox should be the very last one in the list. Note, if you select any element on the page from the Elements tab it will reset this context back to the main page so you'll need to toggle it back in that case.

I also use a pair of iframe resizer scripts which go on a form and a website which embeds the LF form.

I'm unfamiliar with this script, but this could be something we bake into the new designer automatically. Any time I've used iframes I have been able to control it from the origin without needing to worry about the content being loaded into the iframe. The new designer should render fine at any dynamic width/height (current min width is 400px but we're removing that) 

1 0
replied on May 20, 2024

Hi Zach,

Thank you very much for all this insight. I'm glad to hear there's an interest in giving the sandbox an origin, and the security benefit makes more sense now. I will also definitely try your tips for script development.

 

To show you what I mean about the iframe resizing feature, here's what our custom resizer script does (only works on classic designer, using the window.postMessage() method):

 

And here's what the built-in LFF embedding script does:

With autoheight on, the provided script ignores the "height" property and sets it the iframe's style height to "auto," with the intention of checking the iframe internal height and setting the iframe's height style property to match. But when the script tries to cross the iframe, the script is blocked from accessing a cross-origin frame. I can't figure why—the hosting page and the forms page are configured to allow each other, and the forms script itself is hosted on the forms server. The result is pictured below, the iframe is left at style="height:auto;" and it comes out at about 150px high.

Also of note is when autoheight is false, the script does use the height property (80vh in this example) but you can see how a rigid iframe height produces a less than ideal experience:

It's possible there's a solution by troubleshooting the cross-origin issue some more, but I think moving to the window.postMessage() method might make sense in the long run since it'll require less config troubleshooting for customers.

0 0
replied on May 20, 2024

Thank you for the examples here, that makes more sense as to why auto-height is important in this use case. To make this work we would need 

  1. window.postMessage-like support for posting messages on the main window frame
  2. being able to determine the height of the form (or any field) through the LFForm object
  3. some way to know when you should postMessage so you dont have to postmessage on an interval/timer

 

How does your script know when to notify of a height change?

0 0
replied on May 20, 2024

It listens for a bunch of different events; mouse up and down events, input, and animation and transition events. You guys can probably find a better event / more comprehensive list.

Oh, the postmessage will also need to get sent from the thank you page that shows after form submission, and/or the script which is listening for the messages should handle radio silence gracefully.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.