Beagle v1.5 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
The simpleForm
is responsible for rendering a form on the screen.
Its structure is represented as shown below:
Attribute | Type | Required | Definition |
---|---|---|---|
onSubmit | List <Action> | ✓ | Action array that this button can trigger when a form is sent. |
children | List<ServerDrivenComponent> | ✓ | Defines the visual components list (server driven). |
context | ContextData | | Adds a context to the simple form |
When creating a form it is important to understand two steps respectively
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
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}"
)
)
)
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.
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.