Element API: How to attach a Java method to a Vaadin button for remote action?

I want to implement a button in Vaadin which deletes a token from an external server.
The Java method for deleting a token is already implemented and works fine.
Let’s say the token which should be deleted is stored on a server with the url http://test-server.com/token.
This server also requires valid data (username+password) to log in.
How can I attach the Java method to the button to delete the token from the server?

What happens when a user clicks on a button, step by step?

When an user clicks on a button → he should be redirected to http://test-server.com/token → the token from that user should be deleted.

Simply visitin that page would be enough? If so, no need for any Element API or client side magic. Add a click listener to the button and redirect to that url using UI.getCurrent().navigate("http://test-server.com/token");

If the users browser itself is not needed there, but a dum HTTP request, it would be better/easier to do the http request from the Java(server) side.

But hard to give exact instructuion without figuring out exactly what should happen here.

@youthful-yaffle once the call was made, what’s next for the user?

Let me explain what should be happen: Normally, an user would visit the website http://test-server.com/.
He needs to log in (with username + password) to access an area called Token (with the url http://test-server.com/token). After logging in he goes to the area and he deletes his token by pressing a delete button. Right? This would be the usual way to do something.

These actions (visiting web page, logging in, pressing delete button) should be attached to one button in Vaadin.

There are two ways:

  • the website has an API exposed to do such things → easy; call those APIs via a REST Client of your choice

  • the website has no such API: good luck reverse engineering their page.

@youthful-yaffle where will this magic button be located, intended users email or a view in the app?
now if it’s in the email sent to this user, I assume the button will point to an API. if so, package the link with the TOKEN in form of a link-parameter, and let http://test-server.com/ (which is a view) implement HasUrlParameter. Then, overide the setParameter() according to your need.

So, step by step:

  1. hitting the button in the email takes user to ://test-server.com/.
  2. correctly used setParamter() grabs the token (call it grabbedToken)
  3. with simple condition like if(grabbedToken != null){
    UI.getCurrent().navigate(“http://test- server.com/token”);
    //then call your method to delete token like so:
    void deleteToken(){}

This button is on my web page which I have built with Vaadin.

if it’s on your web page, define route for the area called token like so:
public class AreaCalledToken implements HasUrlParemeter{}

then use the magic button on that your page like so:
loginPlusViewChangeAndTokenDeleteButton.getUI().ifPresent(ui →

Meanwhile did you actually say this magic button will carry the following actions?

  1. take user to page (likle homePage)
  2. login in the user

cos if that’s the order of actions this magic button does, permit me to advice you to review what it should accomplish.
User’s login credentials is unknown - they have to enter it, then hit a submit button or so, before they’re moved to next view (http://test-/ server.com/token).
So, if you asked me, let this magic button be the submit button that will move user to http://test-/ server.com/token, and then delete Token

I show you the code for the button.

buttonPrimary2.addClickListener(e -> {

This is actually the logout button but I want to achieve the delete action in the same way like the logout function.

Can it implemented inside the addClickListener?

Oh you just want to implement delete token alongside your logout.
VaadinSession.getCurrent().getSession().invalidate(), gets the job done. you really don’t need any special method for it.
cos it ends the session and peharps recreates the UI.
meanwhile, if you’re not convinced, you could include it in the listener like so:

lets assume the following is the token:
String token = “2222222”;

buttonPrimary2.addClickListener(e → {


void deleteToken(String token){
token = “”;
//or if it’s in database Repository //somewhere, then you should already have defined a method in the repo to achieve it. then call the method like so: