Call Java method from javascript expression

Flow
1

Hi,

I have this javascript expression. I execute it with UI.getCurrent().getPage().executeJs:

`manager.attachEvent(“onAfterTaskAdd”, function(id, task) {

sendTaskDataToServer(task);

});`

How can I call the Java method sendTaskDataToServer?

2

This may help Remote Procedure Calls | Element API | Creating UI | Vaadin Docs

3

It seems not work for me :frowning_with_open_mouth:

4

Can you share the complete example of what you tried?

5

I explain to you. The function I reported in my previous message is in a js file that I added to my view with @JsModule (basically it’s an external library). Trying the solution with RPC raised the error that the parameter “$0” or even “$0.server” could not be found.

I guess this is because it’s an external library and not a code that I can change, right?

However, I share my starting situation:

`@Route(value = “gantt”, layout = MainView.class)
@JsModule(value = “gantt/dhtmlxgantt.js”)
@CssImport(value = “gantt/skins/dhtmlxgantt_material.css”)

public class GanttView extends VerticalLayout implements BeforeEnterObserver {

private UI ui;

public GanttView() {

    setSizeFull();
    
    Div ganttDiv = new Div();
    ganttDiv.setId("gantt_here");
    ganttDiv.getStyle().set("width", "100%");
    ganttDiv.getStyle().set("height", "500px");

    add(ganttDiv);


    UI.getCurrent().getPage().executeJs(
                    "gantt.attachEvent(\"onAfterTaskAdd\", function(id, task) {\n" +
                   "});" +
                    "gantt.init($0)", ganttDiv);

}

}`

6

So, I would like a Java method in the GanttView class to be called when the event “onAfterTaskAdd” executes

7

What if you add the @ClientCallable annotated method in GanttView and pass this to the execute JS parameter list, then use it in the JS callback?
Something like

UI.getCurrent().getPage().executeJs(
                        "const el = $1;\n" +
                        "gantt.attachEvent(\"onAfterTaskAdd\", function(id, task) {\n" +
                        " el.$server.myClientCallableMethod();\+"
                       "});" +
                        "gantt.init($0)", ganttDiv, this);
8

It works!!

9

Thank you! Clear and fast! :smile: