Simple Form

Simple Form for web components description and its attributes

What is it?

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

Its structure is represented as shown below:

​onSubmitList <Action>Array of Actions that will be triggered when a valid form is sent.
onValidationErrorList <Action>Array of Actions that will be triggered when a form is invalid.
childrenList<ServerDrivenComponent>Defines the visual components list (server driven).
contextContextDataAdds a context to the simple form

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.


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

  context = ContextData(id = "myContext", value = ""),
  children = listOf(
      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(
      title = "Data submited",
      message = "The password is " + "@{myContext}"


It is a function of a simple form that performs a list of actions. It is called when a valid 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.


It is a function of a simple form that performs a list of actions. It is called when an invalid form is submitted. This validation occurs in the TextInput component through the attributes error and showError.

Last modified March 9, 2021: fixing grammar (1c9a53a5)