Call JavaScript function by pressing button

This is my code in Vaadin so far:

public class TestPage extends Composite<VerticalLayout> {

    private Button buttonPrimary0 = new Button();

    public TestPage() {

            buttonPrimary0.setText("Create token");
            buttonPrimary0.addClickListener(e -> {

This is the JavaScript file which needs to attached to the button (already done).
The function ´register´ should be performed and fetch server-side data. Of course these
information should be printed out.

    this.register = function(webAuthnRegisterRequest) {

        //some code
        //completely irrelevant


You can find here the full source code:

What actually happens when you click the button?


Note you could do as well

        buttonPrimary0.addClickListener(e -> {
                getElement().executeJs("register($0);", webAuthnRegisterRequest);

Just noting that your function needs a parameter

Also I am not sure if your import is right

It should be perhaps


If the file is


What this js function is supposed to do. I am just wondering that you have a strange parameter there for something called from serverside

The file is in frontend/src/test.js

Ok, then you need to import it


The data should be fetched from server url.

Which data?

Check here an example of JS file integration

JSON parameters

You probably need to define the register function in window

The line UI.getCurrent().getPage().executeJs(“register($0);”, webAuthnRegisterRequest); is the problem. The 2nd parameter webAuthnRegisterRequest is marked red.

That means you don’t have a variable called webAuthnRegisterRequest on the server.

It is defined in the Javascript file.

Background: I need a WebAuthn token to be created on a privacyIDEA server. For this process I need some data. The JavaScript function does exactly this job. It fetches the required data and send it back to me.