Modern Designer HTML Button onClick to execute JS function

asked on April 3 • Show version history

I am trying to set the onClick attribute of a HTML button to a function written in the JavaScript. In the Classic Forms Designer, this could be done simply by putting the name of the function with brackets in the end - however, that's not working in the Modern Designer.

My HTML button:

<a class="btn btn-info" target="_blank" onclick="openWindow()">Function</a>

My JS:

const openWindow = () => {
  console.log("TEST");
}

When I run the form and click the button I get an error:

Uncaught ReferenceError: openWindow is not defined

And when I inspect the HTML I noticed it added a call to window.ModernForm inside the onClick attribute:

<a onclick="window.ModernForm.handleCustomEvent(event, "openWindow()")" target="_blank">Function</a>

How do I make this call to my JavaScript within this handleCustomEvent function call that Laserfiche adds?

0 0

APPROVED ANSWER

replied on April 3

In the new Forms designer, if you are on version 11 Update 5 (11.0.2311) then you can have a button in a custom HTML field that triggers code in the form Javascript like this.

Custom HTML Field:

<button onclick="clickButtonFunction()">Click me!</button>

Javascript:

window.clickButtonFunction = function () {
  console.log('Clicked!');
};

If you are interested, I have a form in the Solution Marketplace that demonstrates this functionality and a couple other things (link: https://marketplace.laserfiche.com/details/220591/Timed-Test-Example).

The Javascript in the new designer runs within a sandboxed iFrame and doesn't have direct access to the structure or content of the Form itself, so this functionality had to be specifically coded by the Laserfiche development team, which is why it wasn't available until 11 Update 5.

3 0

replied on April 3

This worked, thank you!

1 0

replied on April 3 • Show version history

I'm so glad it worked for you.

1 0

Question

Question

Modern Designer HTML Button onClick to execute JS function

Answer

Replies

Sign in to reply to this post.