List control is used to display a set of data in a standard table grid with column headers. Users can enter a list of associated fields by adding rows. 

List control(or saying Field List) appears on a form as a table that contains column/field headers. These field headers can be fully customized by editing its properties. 

Tips A field list is only applicable in form builder. It reflects a string of JSON object. 

Use Design

Yeeflow offers two controls for displaying table data sets: Field List and Content List . While they satisfy similar use cases, choosing the correct control to use in your design will be dependent on the type of data you need to display. 

Use Field List when:

  • You want to consume as a grid table that structured rows and columns;
  • Users can enter the column values by adding a new row item; 
  • It's a data bound control on the form and you can custom the appearance and behavior by editing its associated fields.
  • It offers certain fields with summary expression that can be bound with other controls on the form. 

Use Content List when:

  • A flexible layout to view each row(item) rather than collecting information in a grid table;
  • Users may enter the values by adding a new page item;
  • It's unbound control on the form and you need have a associated data list to be displayed. 
  • Content displayed may vary by filter conditions (between the form and data list).

<Return to Top>

Settings of Columns(Fields)

You need add one or multiple certain fields/controls as its column header(s). Yeeflow provides the summary function that is used to produce result summaries of the results of various fields(columns). 

  • Columns Settings

Most of Yeeflow built-in controls can be used in List control also. It allows a number of certain fields to be added from "Column-Settings".

You can custom every field/column by editing its setting properties, e.g. basic settings, appearance and validations. You may also queue them by order number. 

Please note: You can hide some of the columns in this list if it's not checked. The dynamic display rule to hide this field will only hide the values of this column. 

mceclip5.png

  • Summary Settings

 The Summary Editor offers two types of summaries function:

  1. Concat  - Applicable for all types except numeric
  2. Numeric Summaries (Sum&Average&Min&Max)

You may enable "Display" these numeric column summaries under this list.

mceclip15.png

It's optional to bind the summaries result into another same control on this main form. E.g. a numeric column of this list should be bound to a numeric control of this form.

mceclip8.png

  • Mapping list of List Settings

Each field setting applies for its bound control.  Learn more about basic bound controls/fields.

Field Type Bound Control Summary type
Text

 All input type:

Text Box; Text Area; Dropdown, Radio Button, Checkbox; Hyperlink; Calculation; Rating.

 Concat
Number

Number;

Currency;

Calculation.

 Sum&Average&Min&Max
Boolean 

 Switch;

Calculation.

 Concat
Date/Time 

Date Picker;

Time Picker;

Calculation.

Concat
Attachment

 Attachment;

Calculation.

 Concat
Metadata

 Metadata;

Calculation.

 Concat
User

User;

Calculation.

Concat
Cost Center

Cost Center;

Calculation.

Concat
Organization

Organization;

Calculation.

Concat
Location

Location;

Calculation.

Concat
Lookup

Lookup;

Calculation.

Concat
Img(image)

Signature;

Image;

Calculation.

Concat
Multiple Metadata

Multiple Metadata;

Calculation.

Concat

<Return to Top>

Settings of Rows(Items)

When the field list is NOT Readonly, there is a Yeeflow default that allows user to add or delete items. Oppositely a Readonly list is not allowed to configure the settings or items, which is always used to task form pages. 

  • Add Item - it allows user to add one or multiple rows based on columns.
  • Delete Item - It allows user to delete existing row(s) of this list.

mceclip11.png

  • Allow Import - Yeeflow allows user to upload file in xlsx format to a field list. 

When "Allow import" is enabled, the users have options to add item one by one, or bulk import to add a number of rows. 

Please note: To process bulk import, Each column header of your list should be unique, accordingly the upload file should have the same header name at the first row. 

mceclip14.png

<Return to Top>

Label & Binding

The label will display as the title of this field. You can define the name for this field list. You also can switch off "Display Title" to hide the label of this list. 

A field List can be reset to bind with any other list controls on this form. 

<Return to Top>

Appearance

Define the appearance of this field to change the styles. 

  • Preference of display list

A field list has two options to display:  List View or Card View. You may choose your preference that depends on the number of column fields you need to display. Yeeflow offers the default adaptation between PC and mobile. 

mceclip0.png

The user can switch the view layout at right top of this list.  

mceclip2.png

  • Dynamic Display Rules

When you set a dynamic display rule for this field, It behaves differently based on specific conditions and rules.  There are four actions(Hide/Show/Read-only/Editable) for field  list  contro ls. 

Learn how to create dynamic display rules for a field

Tips  The dynamic display rules by editing for this list will reflect with the whole list. 
  • Allow Comment

You can enable/disable comments on this field after the form is submitted. There are two options to trigger comments entering:  On Click and Mouse Hover

For a bound control, the comment key will be auto-bound with this control/field.

<Return to Top>

Validation

Validation will verify that the data users enter in this form meets the standards you specify before the form can be submitted.

  • Readonly

Set this field as read-only to create variable form pages of your workflow(or application versions) . All bound controls (fields) can be made read-only, with the exception of fields that are already read-only by default.  E.g. Calculation.

  • Required

Required field will make sure the user provides a response. When a field is required, an error message will display under this field and at right top of the form. The form cannot be submitted until a value has been added to the field.

Required fields are indicated by a red asterisk(*) next to the label. By default, fields are never required.

The required of this list will ask user to provide at least of ONE item(row) before form submission. The required columns in this list should be enabled in its own setting properties. 

Please Note: Only a required field in visible of this form will trigger the validation action.

  • Custom Validation

You can set a custom 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.

<Return to Top>

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.