Building in Yeeflow starts with capturing your data. Data is more than just numbers and dates. It can be tags, images, relationships, rich text…in fact, just about anything! For you, the data that matters most might be a list of company goals, a pipeline of marketing campaigns, a roadmap of product features, or a rolodex of customers.
In Yeeflow, data lists give your data structure and consistency, and are the home for all your information.
Whatever data your team is focused on should form the foundation of your workflow. That’s why the first step to building in Yeeflow is creating a database. In this stage, we’ll walk through how to create a data list for your team’s data that’s customized to your specific needs.
Step 1: Structuring your data
Data lists add structure to your data—and a little structure goes a long way. With a data table, any row, column, or data point can be formatted in almost any way.
You can also build multiple data lists, which function as discrete but not isolated datasets. Data lists allow you to keep different clusters of information separate, but still have them talk to each other—be that between data lists in a single application, or even across multiple applications.
Step 2: Create a new data list
Creating a new data list from scratch only takes a minute or two. Firstly, click the "+ Add component" button from the top navigation menu bar, and from the pop-up window, click "Data List" to create a new data list here.
Let's create a new data list called "Projects" here, which will be used to track all projects:
Click "OK" button to complete. Once a new data list is created, the first default field called "Title" will be automatically included. You can change the name or hide this field as needed. But you cannot delete this field.
Pro tip
Besides the Title field, there are also 5 other fields are created automatically, which are called "Default List Fields":
Id: The unique identifier of each record in this data list.
Created By: This is a user field which is used to store the user who added this record.
Created Time: This is a Date Picker field which is used to store the date and time about when this record is created.
Modified By: This is a user field which is used to store the most latest user who modified this record.
Modified Time: This is a Date Picker field which is used to store the date and time about the last time this record is modified.
You can find this field by clicking the "Display fields" button, or add those fields on your data view by turning on the toggle button of each field.
Step 3: Rename the Title field
Move your move to the header of the default "Title" filed, and click the down arrow button. Then, click "Edit field" from the drop down menu list to open the Edit Field window from the right side of this page.
From the Display Name textbox, change the text from "Title" to "Project Name" and click Save button from the bottom.
Step 4: Add new fields
Click the blue "+ New column" button from the end of the header of the data view to open the New Field window from the right side of this page.
Select the field type as "Text Area" from the drop down list, and set the display Name as "Description". Then, click Save button from the bottom to create this new field.
Repeat the above steps to add the following fields into this Projects data list:
Field Name | Field Type |
Owner | User |
Start Date | Date Picker |
End Date | Date Picker |
One last field we are going to add is the "Category" of a project. For this field, we select the field type as "Dropdown", and turn on the "Enable color" option. Then set the text and color of each choice:
Step 5: Add records in the Data List
Once all the fields are set, you can add new projects to this data list by clicking the "+ New item" button from the top right of the list:
Alternatively, you can also use the import function to import bulk records into a data list. To learn how to import data to a data list, please refer: Import data to data list from excel file.
After the records are added, you can click each record to view the detail page, or search/edit/delete those records.
Step 6: Set up linked records
If you have information that spans across multiple data lists—like tasks or clients associated with a project—you’ll want to create a look up field to build the data relationship. This way, you can easily associate information from one data list to the next without needing to switch between tables or make duplicative updates.
Linked records is one of the most common ways new users are introduced to the power of databases. Like everything in Yeeflow, you can level up over time, so there’s no need to start out with a linked record right away. If you’re ready to create a linked record now, let's start to build it up.
Firstly, let's create another data list called "Tasks" here, then add couple fields inside just like what we did in the step 3 and 4, which includes:
Rename the Title field to Task Name.
Add new fields:
Field Name | Field Type |
Owner | User |
Start Date | Date Picker |
End Date | Date Picker |
Priority | Dropdown with Choices (Low/Medium/High) |
Status | Dropdown with Choices (Not Started/In Progress/Completed) |
Description | Rich Text |
One those fields are added, you can add new records into this new Tasks data list, just like what we did for Projects data list:
Now, let's create a Lookup field in this Tasks data list to link records with the data in Projects. To add this field, go click "+ New column" button on the top header of the Tasks data view. Then, select Lookup from the field type drop down list. Then type "Project" in the Display Name text box.
From the Application drop down list, keep it as the current application, and from the List drop down list, select the Projects data list. Select Project Name as the Display Field, and click "Save" button at the bottom.
After this field is created, when you create new records or edit any existing records, you can link this task to one project with this look up field:
Here is the Tasks data list after adding the records with linked records from the Projects list:
Step 7: Build your custom forms of add, edit and view records
List forms are used to allow users add, edit or view records in a data list. When you create a new data list, it will use the default list form for you to manage records. But you can also create custom list forms and use those forms to replace the default list form.
Form this case, we will create a custom list form for Projects data list and use it as the view form.
To create a custom list form, firstly go back to the Projects data list, and click the more operation button from the top right of the data view. Then click "List Settings" from the drop-down menu list.
Then, from the left side window, click "Forms" to open the List forms settings window.
Click the "+" button. Type "Project Detail Page" in the Form Name textbox and click "OK" button to create the new form.
After the form is created, click the blue "Edit" button under the form name to open the list form designer.
To better understand how to use the list form designer, please refer: List form designer
On the list form designer:
firstly drag the Project Name field to the canvas, and hide the Title by turn off the "Display Title" option from the appearance settings under content tab. Then, from the style tab, select the Field - Read Only settings panel, and from Typography, set the font size to 20px.
Drag to add a Grid control to the canvas. Then, add 4 columns and turn off the "Display Title" option from the appearance settings.
Drag to add the Category, Owner, Start Date and End Date fields into those 4 columns, and set the Title Layout to "Vertical".
Drag to add the description filed below to the Grid control, and set the Title Layout to "Vertical".
Next, find the Data Table control under the Advanced controls group, then drag to add to canvas. Select the Tasks data list from data source.
From the Data filters, click the condition button, then from the pop-up window, select projects from the fields list, and set the condition as "Equals". And, switch the right value picker control to open the expression editor. Select List field -> Id, and click "Insert" button, then click OK button to complete the set.
Click to expand the "Table content" panel. Then click the "Settings" button of the display fields.
From the "Select list fields" dialog. Check to select "Task Name", "Owner", "Start Date" and "End Date".
Toggle on the Display Caption, Search Bar, and Allow Add Item options.
From the default values option, click the "Assignment" button.
From the pop-up dialog, select projects from the list fields, and set it equals the List Field:Id (which is similar like what we did on the data filters settings).
Here is how this data table will look like. You can also go to the Style tab to customize the style of each control.
After all set, click the "Submit" button on the top-right of the List Form Designer, and click "Close" to quit from the designer model.
From the List forms settings page, click to switch to "Display Settings" tab, and go down to find the View Item, select "Project Detail Page" from forms dropdown list. You can also set the Open in as "Full Screen".
Now, once you click each project form the Projects data list, the detail page will be opened while you can view the project detail information, and check the tasks related to this project. You can also click the "+ New Task" button to add new tasks for this project:
Recap
You’ve made it through the hardest part: creating your first component - data list. As you get more comfortable with Yeeflow, everything else—adding or updating information, creating your next component, and even levelling up with advanced features like automations—will be easier and start clicking into place.