Collection Form and Collection Fields
This video helps you know about the collection form and fields component and its working to let you create data-rich web applications easily.
1. Drop a Collection Form
Go to Components and choose Collection Form. Drag-and-drop it onto the page or into your Sections. mention the name of the collection and Save the form.
2. Preview the Form
Click the Preview option and you will find the form on the page.
3. Create an Event
In order for the form to accept and submit data you need to create an event. For this go to Events and choose Add Event. Here name your event and click Create.
3.1. Configure the Event
Create an event to save data.
3.2 Add Event Details
Add the collection name and pop-up messages (optional) and Save the event.
3.3 Redirect the Page
Choose Navigation for Page Redirect.
3.4 Add Event Details
Add the page to redirect the user to and Save the event.
4. Bind the Event to the Form
Open form Settings and choose the event to bind and Save.
5. Add New Record
You can add a new record via the preview page and Submit. It will display your notification message.
5.1 View the New Record
Now you are redirected to the page and your new record reflects here.
5.2 View New Record in Collection
Go to your collection and reload it to find the new record.
6. Add Collection Field
Click Configuration and Add Field. Name your field and Save.
6.1 Adding New Field to Collection
You can either drop a Collection Form for the new field, open its Settings and mention the collection.
6.2 Adding New Field to Collection
You can go to Components and choose Collection Field. Open its Settings and choose the new field to add. It will automatically render it into the form and Save.
7. Preview the Changes
Reload the form and you will find the new field.
8. View the New Field in Collection
Reload the collection and you will find the new field.