Question

Modern Form Designer JavaScript - Passing Element as Parameter Using External JS/Library

Forms Layout Designer

Updated May 30, 2024

asked on May 27, 2024

I am using an external JS library file in the Modern Designer. Example of basic usage of the library:

new QRCode(document.getElementById("current"), "url.com");

The library will then add a QR code to the element selected.

In the Modern Designer, we can't simply call document.getElementById but is there a way to pass an element as an argument? With functions like LFForm.getFieldValues or LFForm.setFieldValues I do not see a way to get the element itself to then pass it as a parameter to my object constructor. Would it be possible at all to use this library since it is making changes to the DOM directly?

0 0

Answer

SELECTED ANSWER

replied on May 30, 2024

For now, you cannot await setFieldToQRCode as a top level function invocation (we will be fixing that), but it should not have any implications to your use case.

I took a look at the docs for this library and it seems that creating the image is asynchronous and they unfortunately dont really give you a callback for when the image src attribute is ready for use. Github Issue

I've tested this code and it works fine though:

const setFieldToQRCode = (url) => {
  const mockElement = document.createElement('div');
  const qrCode = new QRCode(mockElement, url);
  const src = mockElement.children[0].toDataURL("image/png");
  return LFForm.changeFieldSettings({ fieldId: 5 }, {
      content: `<img src="${src}" />`
  });
}

1 0

Replies

replied on May 28, 2024

Is the QR code purely informational? You could use the QR code class to build the DOM object within the iframe and copy it over to a custom HTML field like this:

const setFieldToQRCode = async (url) => {
  const mockElement = document.createElement('div');
  const qrCode = new QRCode(mockElement, url);
  return LFForm.changeFieldSettings({ fieldId: 24 }, {
    content: qrCode.outerHTML
  });
}

make sure to await the call to setFieldToQRCode to force synchronously creating it before moving on in your code

2 0

replied on May 30, 2024

Thank you for the response. I tried this but it does not work. Here is my code:

(I tried to add await to the setFieldToQRCode line initially and it just gave me an error)

Here is the console after I run my code:

The newDiv does have the QR code so that part works, however, trying to get the outerHTML or innerHTML just returns the structure but the src attribute of the img element is missing which is what the QR Code is. I have been looking at use cases of outer/innerHTML and it seems that this should be included - so I am not sure what I am doing wrong.

0 0

SELECTED ANSWER

replied on May 30, 2024

const setFieldToQRCode = (url) => {
  const mockElement = document.createElement('div');
  const qrCode = new QRCode(mockElement, url);
  const src = mockElement.children[0].toDataURL("image/png");
  return LFForm.changeFieldSettings({ fieldId: 5 }, {
      content: `<img src="${src}" />`
  });
}

1 0

replied on May 30, 2024

This worked perfectly. Thank you so much!

1 0

You are not allowed to follow up in this post.

Question

Question

Modern Form Designer JavaScript - Passing Element as Parameter Using External JS/Library

Answer

Replies

Sign in to reply to this post.