Retrieving User Input Using the Element API

In this section we demonstrate how to use the Element API to retrieve user input. Our 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",
        "Please 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 synchronizeProperty method to update the value of the text input element.
```
textInput.synchronizeProperty("value", "change");
```
- 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 was not previously set and the user has not typed text into the field.

F529CAD1-2AA1-458B-AFAD-25F43547B4A5

Docs

Docs

Retrieving User Input Using the Element API