Modal field not loading the values from a reference field

[Shannon25]

I have created a UI Page that opens a modal when a UI Action is clicked. The modal allows the user to select a name from a list of records from a reference field. I am not able to get the dropdown to load. It only says --Loading Entities--. I am checking the values from an extended table from the case table but the field that is a reference is extended from the Account 'customer_account' table. Here is the code I have. Can someone see why I am not able to get this values to load?

    <script>

        document.addEventListener("DOMContentLoaded", function () {

            var ga = new GlideAjax('GetEntityList');

            ga.addParam('sysparm_name', 'getEntities');

            ga.getXMLAnswer(function(response) {

                try {

                    var entities = JSON.parse(response);

                    // ✅ Sort alphabetically by name (case-insensitive)

                    entities.sort(function(a, b) {

                        return a.name.toLowerCase().localeCompare(b.name.toLowerCase());

                    });

                    var select = document.getElementById('u_account');

                    select.innerHTML = '<option value="">-- Select an Entity --</option>';

                    entities.forEach(function(entity) {

                        var option = document.createElement('option');

                        option.value = entity.sys_id;

                        option.text = entity.name;

                        select.appendChild(option);

                    });

                } catch (e) {

                    alert("Failed to load entity list.");

                }

            });

        });

        function onSubmit() {

            var entityId = gel('u_account').value;

            if (!entityId) {

                alert("Please select an Entity Name.");

                return false;

            }

            var ga = new GlideAjax('AccountModalForm');

            ga.addParam('sysparm_name', 'duplicateFromEntity');

            ga.addParam('entitySysId', entityId);

            ga.getXMLAnswer(function(response) {

                try {

                    var result = JSON.parse(response);

                    if (result.error) {

                        alert("Error: " + result.error);

                    } else {

                        alert(result.message);

                        if (result.caseSysId) {

                            window.location.href = '/casetable.do?sys_id=' + result.caseSysId;

                        }

                    }

                } catch (e) {

                    alert("An error occurred while processing the response.");

                }

            });

            return false;

        }

    </script>

</j:jelly>

[kaushal_snow]

Hi @Shannon25 ,

The dropdown in your modal likely isn’t loading because your GlideAjax script include (GetEntityList) either isn’t client callable, has an error, or is returning a value that can’t be parsed into JSON (so the select population logic is never reached), so you should validate in Script Include / server side that getEntities() returns a valid JSON string (e.g. return JSON.stringify(array)) and that the script include is marked Client Callable = true, and also check browser console/network to see if the AJAX call is failing or returning null or invalid JSON.....

If you found my response helpful, please mark it as ‘Accept as Solution’ and ‘Helpful’. This helps other community members find the right answer more easily and supports the community.

[Afrith Shariff]

Hi @Shannon25 ,

You can check out this reference article: https://www.servicenow.com/community/developer-articles/custom-ui-page-in-a-popup/ta-p/2319550

It walks through the approach, and you can try recreating the page based on the steps there.

Thanks,

Afrith

[Ankur Bawiskar]

@Shannon25 

so on UI page you need to show drop down values?

You can achieve this using <g:evaluate> tag and then use jelly tag to iterate and add drop down

see this for example, I shared working solution in 2021

Need to create a dropdown field in ui page 

sharing here again

Sample script below I am showing 10 INC numbers in drop down

HTML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

	<html>
		<style>
			.color-class 
			{
			color:red;
			}
			.color-blue-class 
			{
			color:blue;
			}
		</style>

		<p class="color-class">hello</p>
		<p class="color-red-blue">Blue Color</p>

		<g:evaluate jelly="true" object="true">

			var inc = new GlideRecord('incident');
			inc.setLimit(10);
			inc.query();
			inc;
		</g:evaluate>

		<select name="tables" id="selected1">

			<j:while test="${inc.next()}">
				<option value="${inc.number}">${inc.number}</option>
			</j:while>
		</select>

	</html>
</j:jelly>

If my response helped please mark it correct and close the thread so that it benefits future readers.so 

[Ankur Bawiskar]

@Shannon25 

Hope you are doing good.

Did my reply answer your question?

If my response helped please mark it correct and close the thread so that it benefits future readers.