Call specific functions from js file on button click event - Vaadin14

Flow
1

Hello! I have a javascript file which contains a method that show a message. I use @JavaScript(“./test.js”) to get the js file which is stored in /frontend directory. How can I call a specific function using on click button event from test.js file and send a string parameter to this?

Thanks!

2

In the script, define the method globally, on the window.
test.js:

window.alertString = function(stringParam) {
	alert(stringParam);
};

In the Vaadin view where you loaded the script with @JsModule, when executing javascript you can now call this function.

@Route("Test")
@JsModule("./test.js")
public class TestView extends VerticalLayout {
	public TestView() {
		TextField textField = new TextField();
		add(textField);
		add(new Button("Alert current input text", click -> {
			UI.getCurrent().getPage().executeJs("alertString('"+textField.getValue()+"')");
		}));
	}
}

Edit: tested this, it works. it does not work if the textField value contains a single-quote but I’m sure this can be avoided or else prevented somehow. After all, you’re not going to use a textField value I just did that as an example.

3

Kaspar Scherrer:
In the script, define the method globally, on the window.
test.js:

window.alertString = function(stringParam) {
	alert(stringParam);
};

In the Vaadin view where you loaded the script with @JsModule, when executing javascript you can now call this function.

@Route("Test")
@JsModule("./test.js")
public class TestView extends VerticalLayout {
	public TestView() {
		TextField textField = new TextField();
		add(textField);
		add(new Button("Alert current input text", click -> {
			UI.getCurrent().getPage().executeJs("alertString('"+textField.getValue()+"')");
		}));
	}
}

Edit: tested this, it works. it does not work if the textField value contains a single-quote but I’m sure this can be avoided or else prevented somehow. After all, you’re not going to use a textField value I just did that as an example.

Thanks!!!