In Yeeflow, a Sub List in the data list is a field type that allows multiple related records to be nested within a main data list item. These sub-lists provide a way to organize and manage complex data structures, suitable for scenarios where multiple related pieces of data need to be handled within a single record.
This type of field is actually stored as JSON formatted text in the data list. It can be selected in the display column, and when displayed, the front end performs truncation processing.
Why and When Do We Need to Create a Sub list Field?
Enhanced User Experience
For users interacting with the data, sub list fields improve usability by presenting related items in a structured and intuitive manner. This reduces the complexity and clutter in the main list, making it easier for users to find and work with the information they need.
Flexible Data Relationships
Sub list fields offer flexibility in defining data relationships. This is beneficial when dealing with data that does not fit neatly into a flat structure. For instance, in an employee directory, creating sub lists for each department’s members helps in maintaining clear and logical relationships within the data.
Improved Data Management
Sub list fields allow for better management of related data. By grouping related items together, you can streamline data entry, updates, and retrieval. This is particularly useful in scenarios where you need to maintain complex data structures, such as customer orders and the individual items within each order.
When to Create a Sub list Field:
When you have data that naturally falls into a hierarchical structure.
When you need to manage detailed data associated with main list items.
When you want to simplify complex data entry and retrieval processes.
When your reporting and analysis requirements demand more detailed insights.
When improving user experience through better data organization is a priority.
In summary, creating a sub list field in Yeeflow enhances data organization, management, and usability, making it an indispensable tool for handling complex and hierarchical data structures.
Create Sub list field
Creating a Sub list field in Yeeflow is a straightforward process:
Navigate to Your Data List:
Open the Yeeflow application and locate the specific Data list where you want to add the Sub list field.
Access List Settings:
Click on the more settings button at the top right corner. From the pop-up menu, select "List settings" to open a slide-in window from the right side.
Open Fields Management:
In the slide-in window, click on the "Fields" option to access the Fields management window.
Initiate New Field Creation:
Click the "+ New fields" button located at the top-right corner to open the new field window.
Set Sub list properties
Select Field Type:
From the dropdown list in the Field type section, choose "Sub List".
Name Your Field:
Input a name for this field in the display name textbox.
Set List content
Click " Settings" to open the list fields settings window.
Click the "+ Add field" button to add desired fields and make sure select correct field type.
Save Your Field:
After configuring all settings, click the "Save" button at the bottom of the window to finalize and create the Sub list field.
List form/ list workflow/Public form
Open List Form designer
In the slide-in window, click on the "Forms" option to access the List Forms management window and add new form or edit previous form.
Add Sub List to the form
Firstly, find the Sub List control in the controls add panel which will shown as field name. Then, drag and drop it into the canvas.
Set Content of the Sub List field
Open the Content > Field info block and set the properties of this Sub List control.
Set List content
Move to the "List Content" section. Select the layout properly from the dropdown list.
There are 3 types of the layouts which you can select from:
Table View: Choose this option if you want to show the Sub List layout and items as a table. Each item the users added to this Sub List control will display as a row with pre-defined columns.
Card View: Choose this option will show the items one by one with separate area.
Dynamic: If the layout is set to Dynamic, the Sub List will be set to Table View on PC and Tablet device, and Card View on Mobile device.
Default: The default settings of the Layout is Dynamic.
The properties and styles of Table view and Card view can be set separately. So, if the Default/Dynamic layout is selected, you will be able to see all the related settings for both Table view and Card view. Otherwise, you will only see the table view related settings, or the card view related settings.
Allow users to switch layouts
If the layout of your sub list is set to Default / Dynamic, you will see an option with checkbox.
For Dynamic layout, the sub list will automatically use the Tabel View on PC and tablet, and switch to Card View on Mobile. If you want to provide a flexibility to allow users to switch between the table view and card view as they needed. You can check the checkbox. Once this option is checked. you will see 2 more icon buttons at the end of the Caption bar.
When users Edit the form, view the form, they will be able to use those to icon buttons to switch the layout
Setting fields
To manage columns of this sub list control, go find the Fields settings after Layout. and click the "Settings" button to open the List column settings window.
Click the "Add Field" button to create new fields for this sub list. Each field here is similar like the associated variable for each field controls of the main form, which includes the Field ID, Field Name and Field Type.
You can change rename each field ID and Name, or select the type from the dropdown list. Click the checkbox for each field to show/hide in the Sub List as a column.
Pro tips:
Public form can't use lookup field type, because it's a external form.
Click "OK" button to add those fields. The selected fields will be added to the Sub List as columns based on the sorting order.
You can drag to change the orders of each column, or click the Trash button to remove this column from the Sub List (this will NOT delete the related field, just like unselect the checkbox from the List Fields Settings window).
Next, click each column to expand the settings panel. You can change the Control type, like if the field type is Number, you can set the control type as Number, Percent, Currency, or Calculation. Then, click the "Settings" button after the Control Properties to set the properties and styles of each control.
Configuring Sub list Actions in Data lists
In the sub list control, configuring action options enables fields to automatically trigger predefined workflow actions when values change. This functionality supports more flexible, automated sub list operations, facilitating complex business scenarios. Here are the specific setup steps:
Open Settings:
Click the "Settings" button after the Control Properties to set the properties and styles of each control.
Expand Action Section:
In the Action section, expand the options to configure specific actions for this field.
Select or Create Action:
In the 'Value changed' dropdown, you have the following options:
Select an Existing Action: Choose from the list of previously created actions.
+ New Action: Click this to create a new custom action for this sub list field.
+ New List Action: Choose this option to add a new list-based action specifically for managing multiple items within the sub list.
Learn how to create a form action.
Sub list Action Panel
The top right of the sub list action panel will indicate its source (List: Sub list), making it easy to identify that the action applies only to sub list fields.
Once setup is complete, any changes in the sub list field’s value will automatically trigger the selected action, streamlining sub list operations with automation and efficiency.
In the Table View section, you can set the width of each column in PX or %. And from the Card View section, you can set the width of each control with percentage. For example, To show 5 controls in each row, you can set the width as 20% for each.
Add summary fields
Using Summary settings to calculate the values of ofne column's all records.
To add a new summary field, click the "Settings" button in the Summary settings area. Then, click "Add" button to open the summary editor.
Field: Select which field you'd like to do the calculation.
Type: Select the operation type from the dropdown list regarding how would you like to calculate the values of this field. The available options depend on the type of this selected field. For numeric field, you can select Sum, Average, Min, or Max. while for non-numeric field, you can only select Concat.
Display: Choose whether show this summary field in the Sub List control.
Binding: If you want to have the result value of this Summary field to be reused, you can set the value to another field or variable on your main form.
Expand the Summary field's settings panel, under the Card View, set the container width.
Appearance Settings
Display Caption: You can control if display or hide the caption by turn ON/OFF the Display Caption option settings.
Turn Collapse option ON to allow users to collapse and expend the grid content area.
Allow comment: Turn on this option will allow users to add comments on this control.
Dynamic Display Rules: When you set a dynamic display rules, It behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control
Validation of the Sub List control
Open the Content > Validation block to set the properties of this Sub List control.
Readonly: Turn this ON will make this field control as view only status.
Add Item: Turn this ON to allow users to add new row of items by clicking the "Add item" button. If this option is set to OFF, then users will not be able to see the "Add item" button.
Allow Import: If there are many items required to be added to this Sub List, you can turn this ON to allow users import data from excel file. When "Allow import" is enabled, the users have options to add item one by one, or bulk import to add a number of rows.
Delete Item: Turn this ON to allow users to delete existing rows of items by clicking the "Delete" button in front of or at the end of each item. If this option is set to OFF, then users will not be able to see the "Delete" button.
Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field. Learn more about the Custom Validation
Styling the Sub List control
It is now time to define the appearance of the Sub List control. Go forward to the Style block, where you are able to make your table look more eye-candy.
General
Table View
Table Width: Set the width of the data table as fixed with PX , %, em, rem, vw, calc.
Column Width: Set how the column width will be allocated for each column. Fixed means the column width will be exactly the value you set for each column in the column settings panel, while Auto means the column width will be scaled based on the total width of the Table Width set above, and allocated with the ratio of each column width.
Table Alignment: Choose between Right, Center, and Left.
Border Type: Select the type of border to use around the table.
Radius: Set the border radius to control corner roundness.
Shadow: Set options to apply a box shadow on the Data Table.
Card View
Margin: Set the Margin of the card view area in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the content insider in the card view area in PX , %, em, rem, vw, calc.
Fallback
Set the Typography and Color of the text for Fallback.
Table Header
Padding: Change the padding settings of the content inside in each header cell.
Border Type: Select the type of border to use around the table header.
Align: Align the text of the table header to the left, center, or right.
Vertical Align: Vertical align of the table header text to top, middle, or bottom.
Typography: Change the default typography options for the text of table header.
Normal / Hover: Set different color and background color for the state of header.
Color: Select the color of the header’s text for both Normal and Hover states.
Background color: Select the header's background color for both Normal and Hover states. You may use a solid or gradient color.
Table Content
Row items
Set the styles of each row of item:Row Background Color: Select the background color of each row for both Normal and Hover states.
Padding: Change the padding settings of the content inside in each content cell.
Border Type: Select the type of border to use around the table content.
Summary
Set the styles of the Summary row:Row Background Color: Select the background color of the Summary row.
Padding: Change the padding settings of the content inside in each content cell.
Border Type: Select the type of border to use around the table Summary row.
Title: Set the Typography and Color for the Title text of each Summary field .
Value: Set the Typography and Color for the Value text of each Summary field .
Card Content
Margin: Set the Margin of each card item area in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the content insider in each card item in PX , %, em, rem, vw, calc.
Background Color: Select the background color of each card item.
Border Type: Select the type of border to use around each card item.
Radius: Set the border radius to control corner roundness.
Shadow: Set options to apply a box shadow on each card item.
Content Padding: Set the padding of each control inside in the card item.
Card Summary
Margin: Set the Margin of the Summary card area in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the content insider in the Summary card area in PX , %, em, rem, vw, calc.
Background Color: Select the background color of the Summary card area.
Border Type: Select the type of border to use around the Summary card area.
Radius: Set the border radius to control corner roundness.
Shadow: Set options to apply a box shadow on the Summary card area.
Content Padding: Set the padding of each summary field control inside in the Summary card area.
Content Alignment: Set the alignment of the content for each summary field control.
Title: Set the Typography and Color for the Title text of each Summary field .
Value: Set the Typography and Color for the Value text of each Summary field .
Delete Item Button
Set the styles of the delete item button for both table view and card view:
Normal / Hover: Set different color and background color for the state of delete item button.
Text Color: Select the color of the delete item button’s text for both Normal and Hover states.
Background color: Select the delete item button's background color for both Normal and Hover states.
Typography: Change the default typography options for the text of delete item button.
Margin: Set the Margin of the delete item button in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the delete item button in PX , %, em, rem, vw, calc..
Border Type: Select the type of border to use around the delete item button.
Radius: Set the border radius to control corner roundness.
Shadow: Set options to apply a box shadow on the delete item button.
Position: Set the position to display the delete item button to be the start or end of the each row.
Add Item Button
Set the styles of Add new item button for both table view and card view:
Normal / Hover: Set different color and background color for the state of new item button.
Text Color: Select the color of the new item button’s text for both Normal and Hover states.
Background color: Select the new item button's background color for both Normal and Hover states.
Typography: Change the default typography options for the text of new item button.
Margin: Set the Margin of the new item button in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the new item button in PX , %, em, rem, vw, calc.
Border Type: Select the type of border to use around the new item button.
Radius: Set the border radius to control corner roundness.
Shadow: Set options to apply a box shadow on the new item button.
Alignment: Align the button to the left, center, right, or justified.
Style of Caption
Margin: Set the Margin of the Caption in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the Caption in PX , %, em, rem, vw, calc.
Background Type: Select the background color. You may use a solid or gradient color.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Adjust box shadow options.
Title: Set the styles of the Title on Caption,
Typography: Set the typography options for the title text.
Color: Choose the color of the title text.
Icon: Set the styles of the right icon buttons (Layout Switch Icons and expand/Collapse icons)
Color: Choose the color of the Icon.
Active Color: Choose the color of the active icon button.
Size: Set the size of the Icon.
Advanced Settings
Set the Advanced options that are applicable to this control.
Enhancing Data List Workflows with Sub List Field
1. Open List Form designer
In the slide-in window, click on the "Workflows" option to access the List Workflows management window and add new workflow or edit previous workflow.
2. Set
In Yeeflow, managing complex data becomes more streamlined with the ability to utilize sub list fields within your workflow.
In the workflow designer, you can do it by configuring the 'field settings' of the 'Set Data List' action.
For example, we set the Education experience is equal to the 'Degree', which is the list fields of the Sub list field 'Education'.
The ability to write from Sub list fields to separate details in the list workflow is a significant enhancement for Yeeflow users. It supports more sophisticated data management strategies, enabling businesses to leverage their data more effectively and efficiently.