Solution: How to Dynamically Refresh Reference Fields in Catalog Items (Service Portal + Native UI)

[PrasadShelar]

Hello Community,

I recently faced an issue where a Purchase Order (PO) reference field needed to refresh dynamically whenever the Master Agreement field changed - without reloading the Catalog Item form.

Even after creating a new PO via a Record Producer and returning to the Catalog UI/Portal, the newly created record did not appear in the reference list unless the page was refreshed.

After some digging, here is the cleanest and most reliable solution.

Reference Qualifier of Purchase Order field - 

javascript:(function() { 

if (current.variables.refresh_purchase_order_toggle) { 

var list = new SCRIPTINCLUDENAME().FUNCTIONNAME(current.variables.master_agreement + ""); 

return 'sys_idIN' + list; 
} 
return '';

})();

Service Portal does not automatically re-run advanced reference qualifiers when a dependent variable changes - unless those variables are explicitly registered.
Even if your Reference Qualifier script uses:

current.variables.master_agreement

…the portal won’t refresh unless it knows this field is a dependency.

✅ Final Working Solution

✅ Step 1 — Add ref_qual_elements in the variable attributes
Edit your Purchase Order variable and add:

ref_qual_elements=master_agreement,refresh_purchase_order_toggle

Why this works:

ref_qual_elements tells:
“Whenever these variables change, re-evaluate the Advanced Reference Qualifier.”
Works in both Service Portal and Native UI.

If you only reference one variable:

ref_qual_elements=master_agreement

If multiple:

ref_qual_elements=var1,var2,var3

✅ Step 2 — Use a Toggle Variable to Force Refresh
In my case, I could not directly modify master_agreement (other fields relied on it). You can skip further steps if your dependent variable is changing. 

So I introduced a hidden variable:
✅ refresh_purchase_order_toggle
This stores a timestamp whenever the user clicks Refresh.
Changing this variable forces the reference qualifier logic to run again.

✅ Step 3 — Refresh Button (Service Portal Widget)
✅ HTML

<div class="sn-po-refresh-wrap" aria-label="PO refresh controls">
  <button class="po-refresh-btn" ng-click="c.refreshPOAndCPO()">
    <i class="fa fa-refresh"></i> Refresh PO/CPO List
  </button>
</div>

✅ CSS

.po-refresh-btn {
    appearance: button;
    background-color: rgb(79, 82, 189);
    color: #fff;
    font-size: 16px;
    border: 1px solid rgb(79, 82, 189);
    border-radius: 4px;
    padding: 6px 16px;
    cursor: pointer;
    transition: 0.2s;
}

.po-refresh-btn:hover {
    background-color: rgb(65, 67, 170);
}

.po-refresh-btn:active {
    opacity: 0.85;
}

✅ Client Controller

api.controller = function($scope) {
    var c = this;
    var g_form = $scope.page.g_form;

    var VARS = {
        po: 'purchase_order',
        cpo: 'consumption_purchase_order',
        refreshToggle: 'refresh_purchase_order_toggle'
    };

    function triggerReferenceRefresh() {
        g_form.setValue(VARS.refreshToggle, new Date().getTime() + '');
    }

    c.refreshPOAndCPO = function() {
        if (g_form.hasField(VARS.po))
            g_form.clearValue(VARS.po);

        if (g_form.hasField(VARS.cpo))
            g_form.clearValue(VARS.cpo);

        triggerReferenceRefresh();

        g_form.showFieldMsg(
            'refresh_po_and_consumption_po',
            'The Purchase Order/Consumption Purchase Orders lists refreshed.',
            'info'
        );
    };
};

✅ Result
After adding the variable attribute + toggle:
✅ Reference qualifier re-evaluates properly
✅ Newly created PO appears immediately
✅ No form reload required
✅ Works in both Service Portal and Native UI
✅ Keeps logic clean & scalable

🎉 Summary
If your dependent reference field does not refresh in Service Portal:
✅ Add ref_qual_elements=<variables>
✅ Optionally use a timestamp toggle to force refresh
✅ Re-run qualifier without reloading form

See you next article 🙂

If this helped you, please hit the Like button - and feel free to comment if you know a more efficient approach!

[PrasadShelar]

Screenshot for reference!

[NagaChandaE]

Hi @PrasadShelar ,

In servicenow documentation "req_qual_element" is only applicable for Lookup multiple choice, Lookup select box, List Collector.

But the attribute is not required for reference variable .

Documentation : https://www.servicenow.com/docs/r/servicenow-platform/service-catalog/variable-attributes.html