Button to fire Client-Only-Action

I have a onboarding process where the client will go offline at a certain step due to some SSID change shenanigan and I still want to guide the user through the onboarding process. My plan was to preload all the content, and just hide/show the different panels with plain client side js. I still want to use the vaadin components, but I see that the button always does a xhr POST request when clicked. I think this will halt the client if it doesn’t reach the server? Is there a way to disable this XHR request? Any suggestion to a different approach will also be appreciated!

I don’t think there’s a good way to achieve that.

You might be able to hack something with JavaScript, but it seems like asking for trouble

For future reference, to whom it may concern, this was my solution. It might be hacky, but i’m only using the clientSideFunction to add/remove classes on Div’s for each step of the onboarding process.


Element customElement = new Element("vaadin-button");
customElement.setAttribute("onClick", "clientSideFunction()");
customElement.setText("Custom Element");

buttonLayout.getElement().appendChild(customElement);```

I think you are on the right track :+1: But now go and clean your code so that the Componen level code eis not mixed with Element level code. Otherwise I will not sleep well during the nights and I become a crumpy old man :crazy_face: Element API should only be used within a Component internals, something like this:


    @Tag("vaadin-button")
    public static class ClientSideButton extends Component {
        public ClientSideButton() {
            getElement().setText("Custom Element");
            getElement().executeJs("this.addEventListener('click', () => alert('Clicked!'))");
        }
    }

    public MainView() {
        HorizontalLayout buttonLayout = new HorizontalLayout();
        buttonLayout.add(new ClientSideButton());
        add(buttonLayout);
    }

I promise your code will also be more readable when you come back to it at some point.

If you ask me, that getElement method should have never been public…

This is indeed much cleaner. You can rest assured I will fix my code and make a new Component! :wink:

:heart_eyes: Awesome, now I can sleep tonight!