List View

Customize Yeeflow list views for applications like "Leave Management" by configuring fields, names, permissions, and user filters.

Updated over a week ago

List view is the most popular style and applicable to any scenario. It displays form records by fields and as a database to manage the structured data.

A data list will be created from list view and it can be produced to any other view(s) as applicable.


Throughout this article, we will guide you in building a leave management application.

Firstly, let's create a new application from scratch, which we'll name 'Leave Management.' Following that, add a new component - a data list titled 'Leave Information.


Step1: Adding the field

In this scenario, we'll using following field and setting.

Title: Single Line: accepts a single line of text.

  • Mark as required.

  • Default value: Set as " 's Leave".

Name: User field:allows you to type-in or select users in the active users list in your organization.

  • Mark as required.

Leave Type: Single Select:allows users to select one option from a pre-defined list, making it a valuable addition to any form that requires users to make a choice from a set of options.

  • Set display style as drop down.

  • Mark as required.

  • Enable color from predefined color list.

Start Date & End Date: Date picker: enables users to enter a date value.

  • Switch on the time and format it as HH:MM.

  • Mark as required.

Minute step: refers to time measurement, numerical value directly represents the number of minutes

Leave Status: Single Select:allows users to select one option from a pre-defined list, making it a valuable addition to any form that requires users to make a choice from a set of options.

  • Set display style as drop down.

  • Mark as required.

  • Enable color from predefined color list.

Employee Photo: Image: enables users to submit one or multiple images through the form.

  • Mutiple: off

  • Single image size limit (MB) : 2

  • Mark as required.

Leave Days: Calculation: allows you to create new field that calculates values. It uses Yeeflow built-in Expression Editor to perform calculations.

  • Calculated field: using Yeeflow Expression Editor to calculate leave days.

  • Data type: Number.

  • Thousands separator: 1234567.89

  • Rounded to: 1 decimal.

In this scenario, the working hour is 8 hours. So, the calculation for Leave Days is

( dateDiff( List Fields: Start Date, List Fields: End Date, Hour)-( dateDiff( List Fields: Start Date, List Fields: End Date, Day)* 16 ) ) / 8

The first dateDiff is used to calculate the total working hours for the leave days. The second dateDiff multiplies the total number of days by 16, representing non-working hours. Subtracting the result of the second dateDiff from the first one, and then dividing the total result by 8, determines the actual leave days based on working hours。

Id:Id is system autocreated for each data set.

Create by/ Creare time:Automatically generated when creating a new data set.

Modified by/ Modified time:Automatically updated when creating a new data set or modifying existing data.

For more information please refer to Create and manage data fields.


Step2: Chose the view

In this case, we'll choose the list view.

When you select the list view, the following settings will appear. You can set the name of this view and decide whether or not to set it as the default. The URL is required.

Additionally, you can configure the Permissions of this view for specific users based on different departments, users, or user group, depending on your purpose.

Moreover, you have the option to set

  • Display field: Select the field you wish to display in the view.

  • Display order: Set the order of the view.

  • Data filters: Filter data before the view is added.

  • User filters: Select the field you want to use to filter the data list after the view is added.

    For more information please refer to Search and filter data in data list.

Final view

After finishing all the setting, you will get folloing List view named "Emloyee Leave Details." For more view, please refer to Understand Data views.

Did this answer your question?