Retrieving User Input Using the Element API

Use the Element API to retrieve user input from the client-side.

This section demonstrates how to use the Element API to retrieve user input. The example adds a text input field that allows the user to enter their name.

Create a text input element.

Example: Creating a textInput element with a placeholder attribute.

Element textInput = ElementFactory.createInput();
textInput.setAttribute("placeholder",
        "Enter your name");

Transfer the value to the server by asking the client to update the server-side input element every time the value changes in the browser.

Example: Using the addPropertyChangeListener() method with a NO-OP listener to update the value of the text input element.
```
textInput.addPropertyChangeListener("value", "change", e -> {});
```
- Configures Flow to synchronize the value property to the server side when a change event occurs.
  
  Note
  As an alternative, you can use the addEventData() method to transfer the value from the input to the server. See Using the Element API to Listen to User Events for more.

Retrieve the synchronized properties using the Element.getProperty() API.

Example: Using the textInput.getProperty("value") method to retrieve the property value.

button.addEventListener("click", e -> {
    String responseText = "Hello " +
            textInput.getProperty("value");
    Element response = ElementFactory
            .createDiv(responseText);
    getElement().appendChild(response);
});

Note	The `value` property of the `TextInput` element returns `null` if the property wasn’t previously set and the user hasn’t typed text into the field.

F03E105A-99B4-4E5E-AC32-276651648DD8

Docs

Docs

Retrieving User Input Using the Element API