Dynamically Populate Select Box for General Users

[colinlin]

Hi SN Developers,

I need some help with the use case below.

I have a catalog item on employee center (esc), upon submission, the catalog item will create an issue record in the GRC module. I need a reference field that's pulling the Entities (sn_grc_profile) table. However, if I set it up as a reference field, some end users won't see the options because they don't have GRC licenses.

So my approach is to create a Script Include that pulls entities. On the catalog item, I have a select box whose value is dynamically populated onLoad. That is, upon loading, I have a client script that calls the script include (see code at the bottom), to get the result (all entities) and populate the select box options. It works, but when there are a lot of records, it freezes the form.

So my 2nd approach is to have a text field, so users can first type something in a text field as a search term (onChange), then the client script calls the script include and populates the filtered options to the select box. This works, but the user experience is not good because they have to deal with 2 separate fields, which is not intuitive. 

So my 3rd approach is to create a text field, and allow the user to type something, once done, it should dynamically create a drop down on the UI right on the text field (below it) and display all the options. My script is not working as I cannot add an eventListener for some reason. So the question is if it's possible to build something that works for this approach. Any tips to enable eventListener? I've tried "get element by id" but it doesn't find the field upon loading, eventListener also doesn't work for g_form.getControl.  Thoughts?

Or the 4th approach, if it's possible to have a select box, and allow users to enter something in the select box search bar, then it dynamically calls the script include and get the options populated to allow the user to select. I think this would be the best approach if this can work.

Or are there any other better approaches? Thanks!

Here is my script include:

var GetGrcEntitiesGlobal = Class.create();
GetGrcEntitiesGlobal.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {
    getEntities: function(searchTerm) {
        // If searchTerm is not provided, retrieve it from the sysparm_searchTerm parameter
        if (!searchTerm) {
            searchTerm = this.getParameter('sysparm_searchTerm');
            searchTerm = String(searchTerm);
            gs.log('GetGrcEntitiesGlobal called with searchTerm: ' + searchTerm);
        }

        var entities = [];

        // Validate the input length
        if (!searchTerm || searchTerm.length < 3) {
            return global.JSON.stringify(entities);
        }

        // Query the sn_grc_profile table to fetch matching records
        var grcEntityGR = new GlideRecord('sn_grc_profile');
        grcEntityGR.addActiveQuery(); // Only fetch active records
        grcEntityGR.addQuery('name', 'CONTAINS', searchTerm); // Filter records based on the search term
        grcEntityGR.query();

        // Loop through the results and add them to the entities array
        while (grcEntityGR.next()) {
            entities.push({
                sys_id: grcEntityGR.getValue('sys_id'),
                name: grcEntityGR.getValue('name')
            });
        }

        // Return the entities array as a JSON string
        return global.JSON.stringify({
            entities: entities,
            hasMore: entities.length > 0 // Boolean to indicate if results are found
        });
    },

    type: 'GetGrcEntitiesGlobal'
});