Retrieving User Input Using the Element API
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 aplaceholder
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 achange
event occurs.NoteAs 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