Help with include scripts and form event listener

Flow
1

Hello, I’d like some guidance with vaadin flow and using script tags.

Specifically am looking to handle the following)


<script src="https://cdn.docuseal.co/js/form.js"></script>

<docuseal-form
  id="docusealForm"
  data-src="https://docuseal.co/d/LEVGR9rhZYf86M"
  data-email="signer@example.com">
</docuseal-form>

<script>
  window.docusealForm.addEventListener('completed', (e) => e.detail)
</script>

I’d like guidance on how I can include the

<script src="https://cdn.docuseal.co/js/form.js"></script>

In my view and was wondering how I would go about handling this callback)

<script>
  window.docusealForm.addEventListener('completed', (e) => e.detail)
</script>

to let’s say trigger a removeAll() vaadin flow event. Thank you for the help!

2

Did you check the documentation already? Loading Resources | Advanced Topics | Vaadin Docs

3

I’ve tried the following, I believe I’m making mistakes in understanding the documentation. I get script error when I try the below in my vaadin view.

@JavaScript("https://cdn.docuseal.co/js/form.js")
@Route("/viewer")
@AnonymousAllowed
@PermitAll
public class SignView2 extends VerticalLayout {

    public SignView2() {
        // Center the content
        setAlignItems(FlexComponent.Alignment.CENTER);

        // Create the custom HTML element
        Element docusealForm = new Element("docuseal-form");

        // Set the attributes for the element
        docusealForm.setAttribute("id", "docusealForm");
        docusealForm.setAttribute("data-src", "https://docuseal.co/d/LEVGR9rhZYf86M");
        docusealForm.setAttribute("data-email", "signer@example.com");

        // Append the element to the current element
        getElement().appendChild(docusealForm);
    }
}
4

Hi @Argjend ,

  1. Regarding your code, it’s possible to use this but better create a component with tag

example :


@Tag("my-tag")
@JsModule("my-script")
class MyComponent extends Component {


}
  1. Regarding docuseal. you Can’t use it directly . reason : It’s and embbeded component and it try to create shadowdom on already shadowed element

This will work :

@Route(“test”)
@AnonymousAllowed
public class TestView extends VerticalLayout {

public TestView() {
    setAlignItems(Alignment.CENTER);

    IFrame iFrame = new IFrame();
    iFrame.getStyle().setBorder("none");
    iFrame.setWidth("500px");
    iFrame.setHeight("500px");

    add(iFrame);
    iFrame.setSrcdoc("""
            <script src="https://cdn.docuseal.co/js/form.js"></script>
                            
            <docuseal-form
              data-src="https://docuseal.co/d/LEVGR9rhZYf86M"
              data-email="signer@example.com">
            </docuseal-form>
            """);






}

}

for event listeners : 
checkout postMessage 
[https://javascriptbit.com/transfer-data-between-parent-window-and-iframe-postmessage-api/](https://javascriptbit.com/transfer-data-between-parent-window-and-iframe-postmessage-api/)
5

Gotchya, was having a hard time understanding setSrcDoc & shadowed element error. Thank you Elad!