Skip to main content

_LookupQuery

Last updated 20/12/2024

Overview

This documentation will demonstrate how to use Five's _LookupQuery display type. _LookupQuery enables you to attach a query to a field. The results of this query can be used as the lookup values in the field. In its minimal form a _LookupQuery display type must have:

  • A primary key field to have uniqueness
  • A value field to display in the lookup

When you select _LookupQuery, a new field will become available called Lookup Data Source. This will require you to select a query that will be used to display the values you want in the field's lookup. The values will be generated from your query.

You can extend your query and provide metadata in a _LookupQuery to return results that can be used in conjunction with a function, or to filter the returned results.

Let's first take a look at an example of a _LookupQuery in its simplest form. In the Soul Food application, a contributor can be added to the application by adding their name.


Contributors form
Figure 1 - Contributors form

When coming to the Recipes form, the person who added the recipe can be selected from the Contributor field, these values are coming from a query that is attached to the field. There is no foreign relationship between the Recipe and Contributor tables, hence, a _LookupQuery can be used to populate the values for the lookup in the Contributor field.


Contributor field
Figure 2 - Contributor field

Back in Five, the Contributor table has no relationship with any other table in the database. A field has been added to the Recipe table called Contributor.


Database model
Figure 3 - Database model

Form Setup

The Contributors form has been added which references the Contributor table and has the Name field.


Contributors form fields
Figure 4 - Contributors form field

The Recipes form has a field called Contributor, which is currently just a text field. Effectively, if we were to run the app now, there would be no lookup in the field and only text could be entered into the field.


Contributor field
Figure 5 - Contributor field

Add a _LookupQuery Display Type

The query for the _LookupQuery needs to be added first and the field we need to edit is the Contributor field on the Recipes form. In the lookup we want the name of each the contributors to be listed.

Add the Query

1. Select Data in the menu.

2. Select Queries in the sub-menu.


Queries menu item
Figure 6 - Queries menu item

3. Click the Add Item button.

4. Type an ID in the Data Source ID field.

5. Click in the Query field to open Five's Query Builder.


Add query
Figure 7 - Add query

6. Click the Add Table button.

7. Select a table.


Add Table button
Figure 8 - Add Table button

8. Double click on the table's primary key field and the field with the value you want to display in the lookup.

tip
You can click the Run button to check the returned results!

info
The values in the Name field will be displayed in the lookup.

Add fields
Figure 9 - Add fields

9. Click the Save button in the Query Builder app bar.


Save button
Figure 10 - Save button

10. Click the Save button in the form app bar.


Save button
Figure 11 - Save button

Attach the Query to a Form Field

1. Select Visual in the menu.

2. Select Forms in the sub-menu.


Forms menu item
Figure 12 - Forms menu item

3. Select the record in the list.

4. Click the Pages tab.


Pages tab
Figure 13 - Pages tab

5. Select the page record.


Page record
Figure 14 - Page record

6. Click the Fields tab.


Fields tab
Figure 15 - Fields tab

7. Select the field record.


Field record
Figure 16 - Field record

8. Either click the Edit button in the form app bar or click directly in the Display Type field.


Edit button
Figure 17 - Edit button

9. Click the lookup icon in the Display Type field and select _LookupQuery.

10. Click the lookup icon the Lookup Data Source field and select your query.


Add a _LookupQuery display type
Figure 18 - Add a _LookupQuery display type

11. Click the Save button in the form app bar.


Save button
Figure 19 - Save button

12. Click the Save button in the form app bar above the list.


Save button
Figure 20 - Save button

Concatenating Fields

Two or more expressions can be concatenated to give the value you want in a lookup. Let's say in the Soul Food application, there are two fields to add a contributor's name, First Name and Last Name.


Contributors form
Figure 21 - Contributors form

You can add a query that concatenates expressions together to be displayed in a field when using a _LookupQuery display type. Below is an example on how to do this.

MySQL
Concat FirstName and LastName
SELECT
ContributorKey,
CONCAT('FirstName', ' ', 'LastName') AS Contributor
FROM
Contributor

With this attached as a _LookupQuery on the Recipe's Contributor field, the full name of the contributor will be available in the lookup.


Contributor field
Figure 22 - Contributor field

_LookupQuery with Metadata

You can add metadata and attach the query to a field with Five's _LookupQuery display type. The metadata is then available on the form and can be available with Five's

function. You may also provide metadata to a field to filter the returned results and only display the values you want.

Let's take a look at an example. In the Soul Food application, on the Ingredients form there is a Notes field that can be used to add information about the ingredient.


Ingredients form
Figure 23 - Ingredients form

When adding shopping items to a shopping list, if additional notes are added for the selected ingredient, a popup will be displayed holding the information. This is done by the metadata provided to the Ingredient field and adding a function with Five's

function.


Popup holding the notes
Figure 24 - Popup holding the notes

Back in Five, the Notes field has been added to the Ingredient table.


Database model
Figure 25 - Database model

Form Setup

The Notes field has been added to the Ingredients form.


Notes field
Figure 26 - Notes field

The Shopping Items form is a list page on the Shopping Lists form.


Shopping Lists form pages
Figure 27 - Shopping Lists form pages

The Ingredient field on the Shopping Items form is currently a lookup and references the Ingredients form. This is the field that will be edited to add a _LookupQuery.


Ingredient field
Figure 28 - Ingredient field

Add a _LookupQuery with Metadata

A function will use the metadata provided by the query, because of this the following steps need to be performed:

  • Add the query
  • Add the function
  • Attach the _LookupQuery display type
  • Attach the function to an event

Add the Query

1. Select Data in the menu.

2. Select Queries in the sub-menu.


Queries menu item
Figure 29 - Queries menu item

3. Click the Add Item button.

4. Type an ID in the Data Source ID field.

5. Click in the Query field to open Five's Query Builder.


Add query
Figure 30 - Add query

6. Click the SQL tab.


SQL tab
Figure 31 - SQL tab

7. Add your query.

note
If you are following along you can copy the sample code below.

info
The Notes field is being passed in as metadata to the query.

MySQL
Selecting the fields from the Ingredient table dependent on the category
SELECT
Ingredient.IngredientKey AS IngredientKey,
Ingredient.Name AS Name,
Ingredient.Notes AS Notes
FROM
Ingredient
WHERE
CategoryKey = ?

8. Click the Save button in the Query Builder app bar.


Save button
Figure 32 - Save button

9. Click the Parameters tab.


Parameters tab
Figure 33 - Parameters tab

10. Click the Add Parameters button.

tip
Parameters need to be defined outside of the editor!

Add Parameters button
Figure 34 - Add Parameters button

11. Type an ID in the Parameter ID field.

12. Type the parameter in the Parameter field. Example
{{five.field.CategoryKey}}


info
{{five.field}}
is used to get the value in the field on the current form, for this scenario the CategoryKey field.

Add Parameter
Figure 35 - Add Parameter

13. Click the Save button in the form app bar.


Save button
Figure 36 - Save button

14. Click the Save button in the form app bar above the list.


Save button
Figure 37 - Save button

Add the Function

1. Select Logic in the menu.

2. Select Functions in the sub-menu.


Functions menu item
Figure 38 - Functions menu item

3. Click the Add Item button.

4. Type an ID in the Function ID field.


Add function
Figure 39 - Add function

5. Click in the Code field to open Five's Code Editor.


Code field
Figure 40 - Code field

6. Type your code.

note
If you are following along you can copy the sample code below.

info
The
getMetadata()
function needs to be used on the Five object to get the metadata from the query. The form field ID (IngredientKey) and metadata ID (Notes) are passed into the function.

JavaScript
Getting the metadata to populate the popup
function DisplayNotes(five, context, result)  {
const notes = five.getMetadata('IngredientKey', 'Notes');
if (notes) {
five.alert(notes);
}

return five.success(result);
}

7. Click the Save button in the Code Editor app bar.


Save button
Figure 41 - Save button

8. Click the Save button in the form app bar.


Save button
Figure 42 - Save button

Attach the _LookupQuery and the Function

1. Select Visual in the menu.

2. Select Forms in the sub-menu.


Forms menu item
Figure 43 - Forms menu item

3. Select the record in the list (Shopping Items).

4. Click the Pages tab.


Pages tab
Figure 44 - Pages tab

5. Select the page record.


Page record
Figure 45 - Page record

6. Click the Fields tab.


Fields tab
Figure 46 - Fields tab

7. Select the field record (Ingredient).


Field record
Figure 47 - Field record

8. Either click the Edit button in the form app bar or click directly in the Display Type field.


Edit button
Figure 48 - Edit button

9. Click the lookup icon in the Display Type field and select _LookupQuery.

10. Click the lookup icon in the Lookup Data Source field and select your query (IngredientLookupQuery).

info
It does not matter if you leave the referenced form there or not. Five will look for the the value in the Lookup Data Source field.

Attach the _LookupQuery
Figure 49 - Attach the _LookupQuery

11. Click the Events tab.


Events tab
Figure 50 - Events tab

12. Click the lookup icon in the On List Select field and select your function (DisplayNotes).


On List Select field
Figure 51 - On List Select field

13. Click the Save button in the form app bar.


Save button
Figure 52 - Save button

14. Click the Save button in the form app bar above the list.


Save button
Figure 53 - Save button

_LookupQuery in the Form Wizard

If you know you want to use the display type _LookupQuery on creation of your form while using the Form Wizard, select _LookupQuery in the Display Type field. To add the query, you will need to edit the form record as documented above to add the data source ID for the query.


Display Type field
Figure 54 - Display Type field