On List Select

Last updated 25/07/2025

This documentation will demonstrate how the On List Select event works. The On List Select event is a client-side event. When selecting a value in a lookup, the function attached to the On List Select event will execute.

The Orders application is used to demonstrate the On List Select event.

Execute an On List Select Event

The GetProductPrice query gets the ProductKey, Name, and Price values from the Product table. The product names will be listed in the Product's field lookup on the Order Items form. The Price query field is provided as metadata to the Order Items form when attached as a _LookupQuery, providing the price of the selected product. This metadata can then be used by a function attached to the form.

Selecting the ProductKey, Name, Price fields

SELECT
    Product.ProductKey AS ProductKey,
    Product.Name AS Name,
    Product.Price AS Price
FROM
    Product

The GetProductPrice query is saved in the queries view in Five.

Figure 1 - GetProductPrice query

The

GetProductPrice()

function uses the

getMetadata()

function on the

Five

object to get the ProductKey form field ID and the Price query field ID. The key uniquely identifies the product and the Price field is the metadata coming from the GetProductPrice query. The product price will be populated in the Price field on the Order Items form using the

field

property on the

Five

object in the format

five.field.<fieldID>

once a product is selected from the lookup list.

Getting the metadata provided by the GetProductPrice query

function GetProductPrice(five, context, result)  {
    five.field.Price = five.getMetadata('ProductKey', 'Price');
    return five.success(result);
}

The

GetProductPrice()

function is saved in the Functions view in Five.

Figure 2 - GetProductPrice function

The GetProductPrice query is attached to the Product field with a display type of _LookupQuery on the Order Items form. The metadata provided to this field can now be used by the

GetProductPrice()

function.

Figure 3 - Product field with _LookupQuery

The

GetProductPrice()

function is attached the On List Select event for the Product field.

Figure 4 - On List Select field

tip

The Price field can be made read-only on the Display Page, this will ensure the price can't be edited!

Figure 5 - Display page

In the Orders application, you can see all the products and their prices listed in the Products view. If we select a customer and drill down to place an order on the Order Items page on the Orders form, when a product is selected in the lookup list the On List Select event executes the

GetProductPrice()

function which populates the Price field with the price of the selected product.

note

You may need to refresh your screen to see the gif.

Figure 6 - On List Select event