Create Forms to retrieve user data
The Form component enables you to collect data from users. By default, the Form component contains the following internal components:
- Text Input: Input field for users to enter information.
- Text: Text label for the input field.
Note: You can add or remove components from a Form component as needed.
To learn how to use Form components in your application, see the following sections:
To customize a Form component, add/remove Design components and adjust their styles in the Design view.
This example outlines how to build a simple registration form with two text input fields:
- 1.In the Design view, drag-and-drop a Form component into your application.
- 2.Drag-and-drop the following components into your Form component:
- (2) Text: The top text label acts as a title.
- (1) Text Input
- 3.Drag-and-drop a Button component into the bottom of the Form component. This Button acts as the submit button for the form.
- 4.Select each Text component and change the labels to help you easily identify the input fields.
- 5.Rename your Text Input components to match the new labels. This helps you identify the data stored by each Text Input component when you configure the Form component's logic.
- 6.(Optional) Select Styles > Size to adjust the title's size.
Once you configure the layout, add and connect Design references and Logic components to retrieve data from the form. This enables you to save, manipulate, and/or use the form data as needed.
Note: Design references are scripts for the Design components you added to your application in the Design view. For more information, see the Libraries panel page.
This example outlines how to retrieve data from the Form component in the Configure your Form layout section:
- 1.Click Logic to enter the Logic workspace view.
- 2.Open the Libraries panel and drag-and-drop references for each Text Input component into the Logic panel.
- 3.Drag-and-drop a Create Object component into your application. This component enables you to build an object from the form data.
- 4.Select Create Object > State and click Add Node for each Text Input in your Form component. Rename the nodes to match the Text Input names you set in the previous section.
- 5.Connect the getValue nodes from each Text Input reference to the Create Object's corresponding nodes. This passes the form data to the Create Object component, which formats the information as an object.
- 6.Add an API connection, data storage, or data handling component to the application. This example uses the Object component to manipulate the data.
- 7.Connect the object node from Create Object to the Object's value node. This enables you to manipulate the object data you collected from the Create Object component.
- 8.Drag-and-drop the Button reference into the Logic panel.
- 9.Connect the Button reference's onClick node to the Object's setValueAtPath node. This sets the Object's value when the submit button is clicked.
- 10.Your Form data is now formatted as an object, which you can reformat, manipulate, view, and store as needed.
