How to Retrieve Unselected Records from a Popup Select Box

Introduction

This guide explains how to fetch records that were not selected in a Popup Select Box and display them automatically in a text field. This can be useful when you want to process or show unselected items immediately after a user makes their selection.

How does it work?

In Form Builder, add a Custom HTML element to your form and insert the following script inside the Custom HTML element:

<script>

        $(document).ready(function () {
            const empAssetList = #datalist.json.hrforms#;
            var field = FormUtil.getField("user");

            const filterEmpOptions = (selectedAssets) => {
                const selecteEmp = FormUtil.getField("employee_no");
                const selectedEmpVal = $(selecteEmp).val();
                const unselectedAssets = [];

                if (empAssetList?.length > 0 && field && selecteEmp) {
                    const selectedEmployeeAssets = empAssetList.filter(item => item['Employee ID'] == selectedEmpVal);
                    console.log('selectedEmployeeAssets :>> ', selectedEmployeeAssets);


                    for(const asset of selectedEmployeeAssets){
                        if(!selectedAssets[asset['Asset']]){
                            unselectedAssets.push(asset['Asset']);
                        }
                    }

                    console.log('unselectedAssets :>> ', unselectedAssets);
                }

                if(unselectedAssets?.length > 0){
                    const unselectedAssetsString = unselectedAssets.join(', ');
                    $(FormUtil.getField("assets_available_for_transfer")).val(unselectedAssetsString);
                } else {
                    $(FormUtil.getField("assets_available_for_transfer")).val('');
                }
            }

            $(field).on('change', function (e) {
                const selectedOptions = e?.target?.selectedOptions;

                const selectedAssets = {};

                for(const optionAsset of selectedOptions){
                    const assetCode = optionAsset.text;
                    selectedAssets[assetCode] = true;
                }

                console.log('selectedAssets :>> ', selectedAssets);
                filterEmpOptions(selectedAssets);
            });


        });
        
</script>

Prerequisites

• Ensure that the Popup Select Box field and text field names match the ones used in the script.

• The Data List should include all possible options with a unique identifier for filtering (e.g., Employee ID and Asset).

• It is important to note that you may need to replace the field IDs (user and assets_available_for_transfer) in the script according to your Popup Select Box ID and the text area ID where you want the unselected records to appear.

Expected outcome

In the runtime, you can select one or more options in the Popup Select Box(Choose asset to be retained by the employee), and the script automatically identifies all the options that were not selected. These unselected options are immediately displayed in the designated text field (Assets Available for Transfer/Re-assignment).

Download sample app