How to display list from a reference field which is dependent on another reference field?

[jeffreygard1127]

Hi everyone,

I'm still new to ServiceNow so I haven't figure out how does creation of catalog form works but I have this requirement where the reference field number 2 is dependent on reference field number 1 and I have to display all the list based on the selected option on reference field number 1.

Reference Field 1 is called Parent Service and is reference to cmdb_ci_service table.

Reference Field 2 is called Offering and is reference to service_offering table.

Each Parent Service contains several Offerings

Parent Service 1	Parent Service 2	Parent Service 3
SO 1-A	SO 1-1	SO 1-I
SO 1-B	SO 1-2	SO 1-II
SO 1-C	SO 1-3	SO 1-III
	SO 1-4	SO 1-IV
	SO 1-5

and this are the scenario I need to achieve but I can't figure out the logic.

Can someone please help me how to do this? Thank you.

[Jordan Vignoni · Accepted solution]

This can be achieved using a script include.  You can call the function in the script include using the reference qualifier. For example, if your script include is named "serviceUtil" and the function is called "getOffering", you would apply this to the reference qualifier:

[jeffreygard1127]

Thank you so much Jordan!

[Rajesh Chopade1]

Hi @jeffreygard1127 

You can use a combination of client scripts and GlideAjax to dynamically fetch the offerings based on the selected parent service.

Create new script include which is client callable and put following script into:

var ServiceOfferingFetcher = Class.create();
ServiceOfferingFetcher.prototype = {
    initialize: function() {},

    getOfferings: function(parentServiceId) {
        var offerings = [];
        var gr = new GlideRecord('service_offering'); // Table name for offerings
        gr.addQuery('parent_service', parentServiceId); // Adjust the field name as needed
        gr.query();
        while (gr.next()) {
            offerings.push({
                sys_id: gr.sys_id,
                name: gr.name // Adjust this to the field you want to display
            });
        }
        return JSON.stringify(offerings);
    },

    type: 'ServiceOfferingFetcher'
};

Create new onChange client script for 'Parent service' field:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue === '') {
        g_form.setValue('offering', ''); // Clear Offering field
        return;
    }

    var ga = new GlideAjax('ServiceOfferingFetcher');
    ga.addParam('sysparm_name', 'getOfferings');
    ga.addParam('sysparm_parent_service_id', newValue);
    ga.getXMLAnswer(function(response) {
        var offerings = JSON.parse(response);
        var options = '';
        offerings.forEach(function(offering) {
            options += '<option value="' + offering.sys_id + '">' + offering.name + '</option>';
        });

        // Populate the Offering field dropdown
        g_form.setValue('offering', '');
        var select = g_form.getControl('offering');
        select.innerHTML = options; // Populate with new options
    });
}

Also you can achieve this by using the UI Policies to change the reference qualifier on the "Offering" field based on the selection in "Parent Service".

Create a new UI Policy that triggers when the "Parent Service" field changes.

Add a condition to check the value of "Parent Service".

Under the UI Policy Actions, create a new action to set the reference qualifier for the "Offering" field.

Use a script similar to the GlideAjax method above to set the reference qualifier dynamically based on the selected "Parent Service".

i hope my answer helps you to resolve your issue, if yes please mark my answer helpful and correct.

thank you

rajesh

[jeffreygard1127]

Thank you so much @Rajesh Chopade1 appreciate your answer to my question.