Skip to main content

On Show

Last updated 3/12/2024

How an On Show Event Works

This documentation will demonstrate how the On Show event works. When a form record shows, either by a user clicking the Add Item button or selecting a saved form record, any function attached to the On Show event for the form record will be executed.

One table can be used to demonstrate this.

note

If you want the On Show Example application as a reference, click to download the FDF file OnShow.fdf and you can import this FDF into your Five account.

If you are building the application, you can't have both application ID's called OnShow.


The Ingredient table has four fields including its primary key.


Database model
Figure 1 - Database model

The application has one form record and it has a menu item.


Ingredients form
Figure 2 - Ingredients form

The Allergy Notice field on the Ingredients form has a display type of _LookupCustom. A _LookupCustom display type enables you to populate lookup custom values using code.


Allergy Notice field
Figure 3 - Allergy Notice field

The PopulateAllergies function, adds the key associated with the value into the database and displays the values in the Allergy Notice field. Please refer to help on

and
addOption()
to understand these Five inbuilt functions.


PopulateAllergies function
Figure 4 - PopulateAllergies function

Adding the options to the lookup custom control in the form field

function PopulateAllergies(five, context, result) {
const sender = five.sender();
const allergyNoticeField = sender.tabs[0].dataManager.getFormFieldTypeByID('AllergyNotice');
allergyNoticeField.clearOptions();
allergyNoticeField.addOption('milk', 'Milk');
allergyNoticeField.addOption('fish', '(e.g., bass, flounder, cod)');
allergyNoticeField.addOption('crus', 'Crustacean shellfish (e.g., crab, lobster, shrimp)');
allergyNoticeField.addOption('tree', 'Tree nuts (e.g., almonds, walnuts, pecans)');
allergyNoticeField.addOption('pean', 'Peanuts');
allergyNoticeField.addOption('whet', 'Wheat');
allergyNoticeField.addOption('soy', 'Soybeans');
allergyNoticeField.addOption('ses', 'Sesame');
return five.success(result);
}


The function is attached to the On Show event on the Ingredients form.


On Show event
Figure 5 - On Show event

In the application, when the Ingredients form shows, either by clicking the Add Item button or selecting a saved ingredient record, the function attached to the On Show event will execute and populate the custom values in the Allergy Notice field's lookup.


On Show event in the application
Figure 6 - On Show event in the application

Without the

PopulateAllergies()
function attached to the On Show event, when the Ingredients form shows the lookup would show No Options rather then the values from the code.