How to execute onload function in g:ui_reference tag

[SANDEEP28]

I am working on custom filter on reports using dynamic content block. I wrote below jelly scripts and its working fine.  Initially when dashboard is loading, its taking lot of time to populate data in reports as count is huge in the kb_use table and it will definitely cause performance issue in production.

So I thought of adding default article in reference field and showing the result for that particular article itself while loading.  I did set the default value but articleFilterChange() function is not getting called because I am not changing it on form, I am defaulting value.

Is there any way where we add the function on load ?

<g:ui_reference name="group" id="group" table="kb_knowledge" value="aa9f6766874df9107926c8090cbb35d7" displayvalue="KB0077337" query="active=true" completer="AJAXTableCompleter" ng-model="group" columns="number;short_description" onchange="articleFilterChange()"/>

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script>
    var my_dashboardMessageHandler = new DashboardMessageHandler("get_article_numbers");
   
    function articleFilterChange() {
        var value = gel("group").value; 
   
        if (value != "") {
			try {
                var filter_message = {};
                filter_message.id = "number";
                filter_message.table = "kb_use";

				var grKB = new GlideRecord('kb_knowledge');
				if (grKB.get(value)){
                
                //filter_message.filter = "article=" + value;
				filter_message.filter = "article.numberSTARTSWITH" +grKB.number+"^article.active=true";
                SNC.canvas.interactiveFilters.setDefaultValue({
                        id: filter_message.id,
                        filters: [filter_message]
                    }, false);
                my_dashboardMessageHandler.publishFilter(filter_message.table, filter_message.filter);
			}
            }
            catch (ex) {
                alert('Filter Error: ' + ex.message);
            }
		}

		else
		{
			var filter_message = {};
            filter_message.id = "number";
            filter_message.table = "kb_use";
            filter_message.filter = "";
            SNC.canvas.interactiveFilters.setDefaultValue({
                    id: filter_message.id,
                    filters: [filter_message]
                }, false);
            my_dashboardMessageHandler.removeFilter();  

		}
            
    }
 </script>   

<g:ui_reference name="group" id="group" table="kb_knowledge" value="aa9f6766874df9107926c8090cbb35d7" displayvalue="KB0077337" query="active=true^workflow_state=published" completer="AJAXTableCompleter" ng-model="group" columns="number;short_description" onchange="articleFilterChange()"/>

</j:jelly>

@Ankur Bawiskar

@AnveshKumar M 

@Vishal Birajdar 

Could you please help

[AnveshKumar M]

Hi @SANDEEP28 

You try using the following filter in your else condition like the one below instead of empty filter.

filter_message.filter = "article.numberSTARTSWITHKB0077337^article.active=true";

[SANDEEP28]

@AnveshKumar M Its not working. OnChange function is not getting called at all because we are not changing anything on form, we are defaulting the KB value.

Any other solution?

[SANDEEP28]

@Ankur Bawiskar @Vishal Birajdar Can you please help here

[Vishal Birajdar]

Hello @SANDEEP28 

I'm not expert in jelly script , but with your problem statement and searching some content on google, what i understood is you want to trigger the function when its gets laoded.

Below link might help you to understand....!!

1.Tutorialspoint

https://www.tutorialspoint.com/How-do-I-call-a-JavaScript-function-on-page-load#:~:text=The%20first%....

2.Stackoverflow

https://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually

You can add below line of code after end of articleFilterChange() function in your above code

document.addEventListener( "DOMContentLoaded", functionCall());
      function functionCall() {
         alert( "function call on the page load." );
         var element = document.getElementById('group').value = 'aa9f6766874df9107926c8090cbb35d7';

       // Assuming we're listening for e.g. a 'change' event on `element`
       // Create a new 'change' event
       var event = new Event('change');
       // Dispatch it.
        element.dispatchEvent(event);
      }