Collection Form Modal

A collection form can be added inside a modal. It will allow you to edit data using a pop up collection form modal that will pop up by clicking a button.

---

Steps to Create a Collection Form Modal

#1. Go to Snippets

To create a modal, go to the Snippets in the Right Toolbar and click on the Add Snippet button once. A dialogue box, "Create New Snippet" will open in your canvas.

---

#2. Create a Modal

Name the Modal and select the type of Snippet i.e. Modal.

---

#3. Bind a Collection

As you select "Modal" as the snippet type, new fields will appear. Bind the collection that you will bind to the collection form later. Once done, click the Create Snippet button.

---

Your modal will look like this:

---

#4. Drop the Collection Form

The default modal structure is fully customisable. So remove the unmwanted components and drag-and-drop the collection form into it.

---

#5. Bind Close Modal Event

Bind the Close Modal Event to the close icon and the Close button in the modal.

• Close Icon

  

• Close Button

  

---

#6. Bind the Collection to a Data Table

Drop a data table and bind the same collection to it.

---

#7. Bind the Show Modal Event

Drop a button in the data table and change its type from Submit to Button. Then, bind the Show Modal Event to it.

---

#8. Publish or Preview

Open the page containing the data table in the preview or publish mode. Now when you click the button in the data table, the collection form modal will pop up alongwith data inside it.

---

You can edit the data and click the Submit button on which you to bind the Update Collection Event.

---