A Lookup List field control enables you to select multiple items from a data list in the same application or in another application, then add those selected items to an associated List control as multiple rows.
The lookup list enable you to return any type of fields and it will display the value(s) of the related field that you have picked. Different than a lookup, A lookup list applies to return values to an associated list that displays in a table.
Let's assume you have a purchase order form which allow users to select multiple products from your products data list, which includes the product name, category and unit price. Users can select products with the Lookup List control. Once the products are selected, those items will be added to the below associated List control. Users than can input the quantity of each product, and calculate the total price with the calculation field in the list.
The Lookup List field control itself will also save the selected items IDs in it's associated variable. You can decide to display or hide the selected items on your form.
The Lookup List field control is only available on Approval form, and NOT applicable in data list of Applications.
Definitions
Item ID
Each item(or saying "record') that you add in data list form will generate an item ID. The lookup field will be recognized as its source item ID(s).
Data Source
The Data source is a data list from which the lookup are coming. The data list can come from any application in your Yeeflow account.
Associated List
The target List field control which you added on your current form.
How to add a Lookup List field
Firstly, find the Lookup List control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Lookup List field
Open the Content > Basic block and set the Title's text of this Lookup List control. For more information about Title for field control, please refer:
Set the Associated variable for this Lookup List control. When you add a new Lookup List control, a default variable will be generated automatically. You can click the Edit Button to change the ID and name, or click the Reset button to bind this Lookup List control to other existing variables. For more information, please refer:
In the Application section, select current application or a different application from the dropdown list.
Afterward, move on to the List section. Select the data list under the selected application.
In the Data Filters section, click the condition button to filter the data from the selected data list.
Set the Primary Order and Secondary Order to sort your data properly.
Appearance of the Lookup List field
Text: Set the text of Lookup List button control.
Tooltip: Set the tooltip text of Lookup List button control.
Align: Set the alignment of the button as Left, Center, Right or Justify.
Size: Set the size of Lookup List button from small to large.
Icon: Choose whether display icon or not on the Lookup List button.
Position: Choose display the icon before or after the text on the Lookup List button.
Space: Set the space between the icon and the text on the Lookup List button.
Max Selection: Set how many items are allowed to be selected.
Display Field: Select the field which will be displayed as the value of selected items.
Additional Fields: Click "Settings" button to set the fields which will be displayed from the list items picker window.
Associated List: Select the target List field control which will display the selected items in rows.
Associated Field: Select the mapping between the field of the source data list of this Lookup list control, and the column of the associated target list.
For example, the associated list is set to "Selected Products" which is a List field control on the current form, which includes 5 columns: Product, Category, Price, Quantity and Sub Total. You can set the mapping relationship from the pop-up window:
When users select items from the source data list "Products", the selected items will be added to the associated list "Selected Products" by auto-fill the values of those associated fields: Product, Category and Price.
Display selected items: Turn on to display the selected items after the Lookup list button.
Display Title: Choose display or hide the label of this control. For more information, please refer: Understand the label of field controls
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 Lookup List field
Open the Content > Validation block to set the properties of this User field control.
Readonly: Turn this ON will make this field control as view only status.
Required: Make this field as required. Users cannot leave the content as empty.
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
.
Action call of the Lookup List field
Open the Content > Action block to call a pre-defined action from the dropdown list. This action will be triggered once the value of this image field is changed.
Style the Lookup list control
Field
Open the Style > Field block to set the styles of the field control.
Margin: Set the Margin of the Lookup List button in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the Lookup List button in PX , %, em, rem, vw, calc.
Typography: Set the typography options for the text on the Lookup List button.
Normal / Hover / Click:Set different styles for normal, hover and click state of the Lookup List button.
Text Color: Choose the color of the text on the Lookup List button.
Background Color: Set background color of the text on the Lookup List button. By default, the background color is set as transparent.
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
Selected items: Set the styles of selected items (available when the Display selected items = ON).
Margin: Set the Margin of each selected items in PX , %, em, rem, vw, calc.
Padding: Set the Padding of each selected items in PX , %, em, rem, vw, calc.
Typography: Set the typography options for the text on the selected items.
Normal / Hover: Set different styles of the selected items on its Normal and Hover state.
Color: Choose the color of the text on the selected items.
Background Color: Set background color of the text on the selected items.
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
Error Message: Set the styles of the error message,
Typography: Set the typography options for the error message.
Color: Choose the color of the error message's text.
Style of title
Set the Title of field controls that are applicable to this control.
Advanced Settings
Set the Advanced options that are applicable to this control.
โ