_LookupCustom

Last updated 19/12/2024

Overview

This documentation will demonstrate how to use Five's display type _LookupCustom. _LookupCustom enables you to populate lookup custom values using code. You can write a function and attach it to an event to execute. When executed the values supplied in your function will be available in the field that has the _LookupCustom display type.

For this scenario, the Catergory table in the Soul Food application, will have a new field added called AllergyNotice which will have its lookup populated by code. The following steps will be perfomed:

• Add a function with the custom values
• Add the field to the form and attach the _LookupCustom display type
• Attach the function to an event

The Ingredient table has a field called AllergyNotice.

Figure 1 - Database model

Add a Function

The function needs to clear the options in the lookup using the

clearOptions()

function before adding the options. The options added in your function using the

addOption()

function will be available in your form field's lookup with the display type of _LookupCustom. The first parameter in the

addOption()

function is the key associated with the value, while the second parameter will be the value displayed in the lookup.

You can add your function in the Functions view or Five's Code Editor.

Figure 2 - 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);
}

Add a _LookupCustom Display Type

The Ingredients form was added into Five in the _Lookup documentation, this form is going to be edited to add a new field with a display type of _LookupCustom, and to attach the above function to the On Show event for the form. When the Ingredients form is shown in the Soul Food application either by adding a new record or selecting a saved record, the custom values added in the function will be available in the form field lookup.

1. Select Visual in the menu.

2. Select Forms in the sub-menu.

Figure 3 - Forms menu item

3. Select the form record in the list.

4. Click the Events tab.

Figure 4 - Events tab

5. Either click the Edit button in the form app bar or click directly in the On Show field.

Figure 5 - Edit button

6. Click the lookup in the On Show field and select your function.

Figure 6 - On Show field

7. Click the Pages tab.

Figure 7 - Pages tab

8. Select the Page record.

Figure 8 - Pages record

9. Click the Fields tab.

Figure 9 - Fields tab

10. Click the Add Fields button.

Figure 10 - Add Fields button

11. Click the lookup icon in the Field field and select the field.

12. Click the lookup icon in the Display Type field and select _LookupCustom.

Figure 11 - Add a field with a _LookupCustom display type

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

Figure 12 - Save button

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

Figure 13 - Save button

In the application, the lookup for the field will now hold the custom values that were added in the function using the

addOption()

function.

Figure 14 - _LookupCustom in app

_LookupCustom in the Form Wizard

If you know you want to use the display type _LookupCustom on creation of your form while using the Form Wizard, select _LookupCustom in the Display Type field.

You will need to edit the form record to attach your function.

Figure 15 - Display Type field