Refresh a related list on field change

[oharel]

Hi guys,

Is there any way to refresh a related list when a field changes on the form?

For example: if I change the category on an incident form, I would like the related list category-articles to update, without saving the form first.

I tried an onChange client script with the following:

GlideList2.get(g_form.getTableName() + '.REL:31336814db772200e4257cbdae9619f4').setFilterAndRefresh('');

But I am not sure it can work without saving the form, which sort of makes this irrelevant.

Ideas?

harel

[oharel]

That's what I did. It comes up as a block:

<div tab_rows_v2="2" tab_caption="incident lookup-KB" style="display: block;" id="576f7a69db58ba0027a1fc45ae961941_list" tab_list_name_raw="u_incident_category_area_lookup.REL:895a6051db587a00e4257cbdae9619f1" class="tabs2_list list_v2 related embedded   highlight_enabled"><span class="list_span_related embedded"><div style="display: none; " id="576f7a69db58ba0027a1fc45ae961941_collapsed"><table class="wide list_nav list_nav_top embedded" cellspacing="0" cellpadding="0"><tbody><tr class="list_nav embedded"><td class="list_actions_left" nowrap="true"><span class="list_title embedded" id="576f7a69db58ba0027a1fc45ae961941_collapsed_title">incident lookup-KB (2)</span></td><td style="width: 16px;" align="right"><a data-type="list2_toggle" href="javascript:void(0)" class="list_toggle" data-list_id="576f7a69db58ba0027a1fc45ae961941"><img alt="Display / Hide List" title="" src="images/section_hide.gifx" data-original-title="Display / Hide List" width="16px"></a></td></tr></tbody></table></div><div style="display: block;" id="576f7a69db58ba0027a1fc45ae961941_expanded"><nav role="toolbar" data-list_id="576f7a69db58ba0027a1fc45ae961941" cellpadding="0" cellspacing="0" style="display: block; width: 100%;" id="list_nav_576f7a69db58ba0027a1fc45ae961941" class="navbar navbar-default list_nav list_nav_top embedded list_nav_top_border"><div class="container-fluid embedded"><div class="navbar-header"><h1 class="navbar-title list_title no_menu embedded">incident lookup-KB</h1>  </div><div class="nav navbar-right text-align-right"><span style="" id="d76f7a69db58ba0027a1fc45ae961941_vcr"><button name="vcr_first" data-nav="true" title="" class="list_nav embedded btn btn-icon h_flip_content tab_button_disabled" id="d76f7a69db58ba0027a1fc45ae961941_first" data-original-title="First page"><span class="sr-only">First page</span><span class="icon-vcr-left"></span><span class="icon-vcr-left"></span></button><button name="vcr_back" data-nav="true" title="" class="list_nav embedded btn btn-icon h_flip_content tab_button_disabled" id="d76f7a69db58ba0027a1fc45ae961941_back" data-original-title="Previous page"><span class="sr-only">Previous page</span><span class="icon-vcr-left"></span></button><div class="vcr_controls"><input style="color:rgb(72, 85, 99); display:inline; height:21px" title="" autocomplete="off" class="list_row_number_input form-control embedded" id="d76f7a69db58ba0027a1fc45ae961941_first_row" data-original-title="Row"><span style="margin-left: 5px;" class=" list_row_number_input embedded">

[drjohnchun]

I noticed that this is an Embedded List, not a regular Related List. If so, do you have the filter enabled on it? Can you share a screenshot of the top left corner of the Embedded List showing the breadcrumb?

[oharel]

Yes, sorry about that - I moved on to a different solution and then came back to the thread, but did not change back the embedded list to related list.

It is working, to an extent:

document.querySelector('div.related[tab_caption="Incident lookup-KB"] span.breadcrumb_container a:last-of-type').click();   

However, the articles number change, but the list itself does not refresh, so that the description stays the description of the previous record, even though the number is of the new record after the refresh. I hope I explained it clearly.

harel

[drjohnchun]

In that case, let's switch back to using GlideList2 as below:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
   if (isLoading || newValue === '') return;
   GlideList2.get('576f7a69db58ba0027a1fc45ae961941').setFilterAndRefresh('category=' + newValue);
}

I took the ID from the HTML snippet you provided earlier for incident lookup-KB, so you won't have to change it. What you do need to modify is the filter argument - please change 'category=' + newValue to the correct field name from the KB table. The filter being passed here is an encoded query, so you can add more filter conditions if you want.

This will now provide a dynamic query and refresh when the Incident's Category changes, without having to save the form.

[oharel]

Hi John,

Back to square one:

onChange script error: TypeError: GlideList2.get(...) is undefined function

I just wonder why this should so obviously work and it doesn't even recognize the function...