For this tutorial in video form, refer to this youtube link.

Zoho recently released a new feature that has been eagerly anticipated for many years: The ability to add or remove rows from the subform. I found the documentation a bit confusing, so I’m going to show you an example on how it works. 

As you can see on this initial page, there aren’t any subform rows.

However, once I choose a course, you can see it has automatically populated ten attendees. 

How did that happen? Let’s have a look. Here’s the code that is used:

I’m fetching the data from Zoho CRM. I have a module here named Courses.

Inside that module, I have a multi-select lookup for the course attendees. What I wanted to do is show the attendee details in the Zoho Creator subform. 

To do that, I first fetch the data. I set up a collection called attendees_to_add.

I’ve recorded a video about the difference between collections, lists, and maps, but for now, just think of it as a list. In order to add data to the collection, I iterate over the data I fetch from Zoho CRM: The attendees. 

Here is the interesting part. In order to add a row to the sub form, it is important to know that this is the name of the main form (Attendee_Register):

As well as the name of the subform:

To find the API name of the form, I go to “Edit this application” and there in the URL, I can see that the API name is Attendee_Register.

To find the API name of the subform, I click on the subform in the form editor and check the “Field link name” (Attendees)

Then, I need to fetch some of the other information from the Contact records in the CRM.

Once I fetch that data, then I’ve got my new_row variable ready. 

I can then set fields like the email, first name, and last name in that subform row. Because the name section is a Name data type, we use Name.first_name and Name.last_name like this:

After that, I insert that row into my collection. 

Finally, the last step I do is “input.Attendees.insert” with the collection like this:

Adding subform rows in a custom function

The example above was for the scenario where we will add the subform rows while the form is being edited. What if we want to add subform rows from a custom function?

First of all, we will get the “attendee register record.”

The rest of the code is very similar. We replace input with attendee_register_record and it just works 🙂 

If we run that custom function and then reload the form, we can see it correctly added rows to the Attendee subform.

Deleting rows from a subform

What if we wanted to delete everything from the sub form? We can do that by writing out, “input.Attendees.clear” like this:

I hope this article has helped you understand how to work with subforms dynamically using this new feature from Zoho Creator.