Refresh an UI Page with client script

[Jeff60]

Hello everyone.

My question is about UI Page on a Request Item or Task
I would like to refresh a Variable type "UI Page" as soon as there is a change in the value of a "Select box" type variable.

But i don't know how to do it properly.

Thanks in advance for your help 😉

[Voona Rohila]

Hi Jeff,

You may find the below thread helpful.

https://community.servicenow.com/community?id=community_question&sys_id=adf44b2ddbd8dbc01dcaf3231f96193e

[Jeff60]

Hello @rohila 

Thanks for your answer but this is not my goal. 

My UI Page doesn't contains any function.

I would like to only refresh my UI Page when the value of the varibale change.

HTML of my UI PAGE :

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

        <g:evaluate var="jvar_gr" object="true">
            var ag = current.variables.dmfi_finance_ag_id.getDisplayValue();
            var gr = new GlideRecord('u_financial_activity');
            gr.addQuery('u_activity_group_id', ag);
            gr.query();
			gr;
			ag;
</g:evaluate>

        <table width="100%" borde="1">
            <tr class="header">
                <td colspan="4">Activity Code for ${ag}</td>
            </tr>
			<tr class="header">
                <td>ID</td>
				<td>Name</td>
				<td>CPN</td>
				<td>CPG</td>
            </tr>
            <j:while test="${gr.next()}">
                <tr>
                    <td> ${gr.getValue('u_activity_id')} </td>
                    <td> ${gr.getValue('u_activity_name')} </td>
					<td> ${gr.getValue('u_cpn')} </td>
					<td> ${gr.getValue('u_cpg')} </td>
                </tr>
            </j:while>
        </table>
    </j:jelly>

I think the way is to create a client script (On Change) :

Thanks for your time 😉

[AnirudhKumar]

Jeff, it's not possible to refresh the HTML.

I have a trick for you that I always use. 

Just keep a <div> tag in your html.

Give it an id="myTable"

In the client script, call a function constructTable();

This function will have GlideAjax (as you have some server code in g:evaluate).

In your script include, construct your HTML table body( all the tags as string)

Then return that HTML string to the client script.

Finally. insert the HTML string into the <div>

$j("#myTable").html(yourHTMLVariable);

In your client script, simply calling this function, will force the system to reconstruct the table every time.

Edit : Updated the code to html() instead of text()

[Jeff60]

Thanks @AnirudhKumar 

I understand your process, however I am a bit lost in the code to produce.

I am not against a copy paste of the code that you have already used for this type of need.

Because I am facing a blank sheet of paper 😉

Currently,  i have this :

UI Page

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">
	<g:evaluate var="jvar_gr" object="true">
		var ag = current.variables.dmfi_finance_ag_id.getDisplayValue();
		var gr = new GlideRecord('u_financial_activity');
		gr.addQuery('u_activity_group_id', ag);
		gr.query();
		gr;
		ag;
	</g:evaluate>

	<div id="TableAC">
		<table width="100%" borde="1">
			<tr class="header">
				<td colspan="4">Activity Code for ${ag}</td>
			</tr>
			<tr class="header">
				<td>ID</td>
				<td>Name</td>
				<td>CPN</td>
				<td>CPG</td>
			</tr>
			<j:while test="${gr.next()}">
				<tr>
					<td> ${gr.getValue('u_activity_id')} </td>
					<td> ${gr.getValue('u_activity_name')} </td>
					<td> ${gr.getValue('u_cpn')} </td>
					<td> ${gr.getValue('u_cpg')} </td>
				</tr>
			</j:while>
		</table>
	</div>
</j:jelly>

Client script  :

function constructTable() {

	???
	
}

Processing script  :

Catalog Client Scripts

Script :

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading) {
        return;
    }

    $j("#TableAC").html(activity_code_linked);

}

Thanks in advance for your help.