Simple Form

What is it?

The simpleForm is responsible for rendering a form on the screen.

Its structure is represented as shown below:

How to use it?

When creating a form it is important to understand two steps respectively

• The relationship and update between fields
• And what happens when the Submit button is pressed.

Updating the fields

The TextInput component is the field in which the user or the system will fill in some information, and it is important to know its attributes in order to better use it. Here we will use one of its elements, which is the onChange function.

OnChange

This function is part of the TextInput and it observes the changes made within its field, that is, whenever the value is modified, something is typed, deleted, etc, this function is called and activates a list of other actions to happen whenever the value changes. It is in this list that we add a SetContext action to set the Context value of the form and update the values ​​that are shown in the field.

Check out the example below on how its implemented a SimpleForm

• JSON
• Kotlin DSL

SimpleForm(
  context = ContextData(id = "myContext", value = ""),
  children = listOf(
    TextInput(
      value = "@{myContext}",
      placeholder = "Type in your password",
      onChange = listOf(
        SetContext(contextId = "myContext", value = "@{onChange.value}")
      )
    ),
    Button(text = "Click to Submit", onPress = listOf(SubmitForm()))
  ),
  onSubmit = listOf(
    Alert(
      title = "Data submited",
      message = "The password is " + "@{myContext}"
    )
  )
)

onSubmit

It is a function of a simple form that performs a list of actions. It is called when the form is submitted.

To submit a form, you must use the SubmitForm action and call it, just implement it in a Button that is part of a simple form, that is, that is in your list of children.

When you click this button, the onSubmit is activated and the list of actions will be performed. It is this list of actions that will define what should happen with the information in this form, if they will be sent to a backend (through the sendRequest action), etc.

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.