In Zoho Creator, the subform field enables you to display a form within a form. The form in which you add a subform is referred to as the main form. You can either create a blank subform whose existence is inside the main form or add an existing form (present in your app) as a subform.
As you know, forms provide three major functions — data storage, data relationship, and data entry. To improve the user experience and ease the data entry process, Creator provides the ability to open the subform rows as a popup and enables users to fill them with their data. The popup entry will then be added as a new row in your subform. Enabling the List view type for subforms will display the subform as a pop-up.
For example, let's say you have a subform with multiple fields in it. The fields in your subform will be listed horizontally, which leads to endless horizontal scrolling for users to add records. By choosing the view type as list, the subform will open as a popup. Users can now easily view the fields in your subform popup listed vertically and add the required data.
When you use an existing form as a subform, the original form's exact structure will be replicated in the subform popup, thereby ensuring consistency in its look and feel. Let's say you’ve used a multi-column layout and section fields in your form. The same layout will be displayed in the subform popup.
View Type
You can select how your users will view the subform entries from the following view types:
- Grid view - Users can add data in the subform rows that will be listed in rows and columns.
- List view - The list view is similar to the list report in appearance. When you try adding or updating data in each subform row, a pop-up will be displayed listing out the fields with vertical scrolling. Each popup entry will then be added as a subform row.
You can choose the list view for subforms in which you can expect to experience less-frequent modifications, but have a large number of rows. This view also substantially reduces the loading time while editing subform rows.
Example
Let's assume you have built a Zylker Inventory Management application that is used to streamline your business by efficiently maintaining and managing inventories from raw materials to finished products. There is an in-house Purchase Order form that enables you to place orders for required materials. This form includes a subform named Product Items that allows you to add rows of product details that you require. This subform has fields named Item No, Item Name, Specification, Unit, Quantity, Unit Price, Preferential Amount, Discount, Final Amount, and Note. It might be tedious for you or your users to scroll horizontally every time they add a row in your subform. You can choose the view type for your subform as List View. Now, when your users try to add a new row of data, it will open a popup subform where fields will be listed vertically.
Vertical scrolling is conventional and intuitive when working with subforms that contain numerous fields, as it ensures better user experience and space management.
Users can now easily add data and the popup entry will be added as a subform row.
Things to Know
- If you have any hidden fields in your subform, an eye icon will be displayed in their respective columns in each of the subform rows.
- If you have any disabled fields in your subform, their respective columns will be greyed out. You cannot edit such field entries.
- If you've added form fields inside your existing subform in a multi-column layout , then the popup subform will also open with the same layout.
- In the case of composite fields such as name and address fields, the display fields will be shown as comma-separated values in the subform rows.
- You can add subform rows when you expand/collapse your subform.
- You can edit and delete your subform rows. While editing, the popup subform will appear if you've chosen the List view type.
- No alerts will be shown when the Edit Row popup is closed, even if an on-user input workflow is triggered.
- You can add and delete subform rows from popup (list view) subforms, similar to grid view subforms.
- When deletion of subform row is disabled in field rules, the Delete button will not be visible upon adding a row.
-
When multiple fields are present in a
subform field to a point where horizontal scroll is enabled, the first two columns of subform rows are frozen. This keeps essential fields' values as reference points that are visible throughout while you view, add, or edit other field values in a subform row.
To enhance readability of the visible fields in the viewport (visible space in UI), this subform freeze is activated based on the condition that the first two columns combined should be equal to or less than:
- 30% of the viewport's width for forms that are added as a primary component within an application.
- 40% of the viewport's width for embedded forms in a page, and for published forms outside an application.
When the combined width of the first two columns exceeds the above mentioned limit:
- If the first column complies with the limit, the freeze will be activated for only this column.
- If the first column exceeds the limit, the subform freeze will not be activated.
- If you've set the field size (width) for the fields added in your subform, the same will be applied to the popup subform as well.
Sorting
The subform field comes with the ability to sort the rows added within the subform in a specific order. The sort option is available in the field properties of the subform and can be applied for both view types. You can choose to auto-sort subform records based on a field or allow users to sort them in a custom order.
Learn more
Mobile Properties
When the list view type for subforms is enabled, the subform will be opened in the next screen, where users can add their data. This data will then be added as a subform row.
The sorting option and view type you've chosen for your subform fields in web browsers will automatically be applied to both mobile and tablet devices.
- Grid view - In mobile, the grid view works like an inline subform, so users can add data in the subform rows in the same screen with the rows being listed one below the other.
List view - In mobile, the list view opens the subform in the next screen, where users can add their data. This data will then be added as a subform row.
Related Topics
- Understand Subform Field
- Enable Subform Field Sorting