Store value in reference field of ui page using client script

Rj27 · ‎07-20-2022

i am passing some sys id and display value of a reference field from ui action to ui page.
i am storing these value in variables in ui page.

can i use client script to populate value in reference field of ui page. This should happen onload of ui page.

I am aware we can autopopulate using value and displayvalue as input in <g:ui reference>. But i am trying to avoid this for some other functionality.

Ankur Bawiskar · ‎07-21-2022

@Rj27

this has worked with me

you need to set the display value as well

Send the display value as well to this UI page from wherever you are calling it and use hidden element to store that

HTML:

<body onload="autopopulate()">
<g:ui_form>
<g:evaluate var="jvar_productSysId" expression="RP.getWindowProperties().get('sysparm_product_sys_id')" />

<g:evaluate var="jvar_productDisplayValue" expression="RP.getWindowProperties().get('sysparm_productDisplayValue')" />

<input type="hidden" id="productDisplayValue" name="productDisplayValue" value="${jvar_productDisplayValue}"></input>
<div id='mydiv3'>
<label id='label3'>Product</label>
<g:ui_reference name="product_id" id="product_id" table="cmdb_ci_business_app" query="sys_class_name=cmdb_ci_business_app^apm_application_family!=04a560021b396010a985113fad4bcb48^ORapm_application_familyISEMPTY^install_statusNOT IN3,5,20" style="width:180px"/><br></br>
</div>
</g:ui_form>
</body>

Client Script:

function autopopulate(){
	gel('product_id').value = gel('productSysId').value;
	gel('sys_display.product_id').value = gel('productDisplayValue').value;
	gel('product_idLINKreplace').style.display = "";
}

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

View solution in original post

Ankur Bawiskar · ‎07-21-2022

@Rj27

this has worked with me

you need to set the display value as well

Send the display value as well to this UI page from wherever you are calling it and use hidden element to store that

HTML:

<body onload="autopopulate()">
<g:ui_form>
<g:evaluate var="jvar_productSysId" expression="RP.getWindowProperties().get('sysparm_product_sys_id')" />

<g:evaluate var="jvar_productDisplayValue" expression="RP.getWindowProperties().get('sysparm_productDisplayValue')" />

<input type="hidden" id="productDisplayValue" name="productDisplayValue" value="${jvar_productDisplayValue}"></input>
<div id='mydiv3'>
<label id='label3'>Product</label>
<g:ui_reference name="product_id" id="product_id" table="cmdb_ci_business_app" query="sys_class_name=cmdb_ci_business_app^apm_application_family!=04a560021b396010a985113fad4bcb48^ORapm_application_familyISEMPTY^install_statusNOT IN3,5,20" style="width:180px"/><br></br>
</div>
</g:ui_form>
</body>

Client Script:

function autopopulate(){
	gel('product_id').value = gel('productSysId').value;
	gel('sys_display.product_id').value = gel('productDisplayValue').value;
	gel('product_idLINKreplace').style.display = "";
}

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

Ankur Bawiskar · ‎07-22-2022

@Rj27

Hope you are doing good.

Did my reply answer your question?

If my response helped please close the thread by marking appropriate response as correct so that it benefits future readers.

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

Khanna Ji · ‎10-04-2022

Thanks, Ankur for the great response. 2 things I want to know.

1) Where can I find all these useful tags such as "<g:ui_reference ......"

2) Where would I find the below info and methods on docs?

        gel('product_id').value = gel('productSysId').value;
	gel('sys_display.product_id').value = gel('productDisplayValue').value;
	gel('product_idLINKreplace').style.display = "";

Nivedita9 · ‎11-13-2024

Hi @Ankur Bawiskar
I have a similar requirement where I have to pass the kb article sysid to client script and add it to attached knowledge related list. How can I do this?
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:ui_form>

<table>

<tr>

<g:form_label> Good Practice</g:form_label>

</td>

<g:ui_reference name="kb_ref" id="kb_ref" table="kb_knowledge" />

</td>

</tr>

<tr>

<td>

<g:dialog_buttons_ok_cancel ok_id="submitData" ok="return continueOK()" ok_type="button" ok_text="${gs.getMessage('Okay')}" ok_style_class="btn btn-primary" cancel_type="button" cancel_id="cancelData" cancel_style_class="btn btn-default" cancel="return continueCancel()" />

</td>

</tr>

<!--<tr>

<g:dialog_buttons_ok_cancel

ok="handleFormSubmit();"

ok_type="button"

cancel="continueOK('cancel');"

cancel_type="button" />

</td>

</tr>-->

</table>

</g:ui_form>

</j:jelly>

Client Script

alert("Knowledge article");

function continueOK() {

alert("OK clicked");

var gdw = GLideDialogWindow.get();

//var assignee = gel('kb_ref').value;

var selectedValue = document.getElementById('kb_ref').value;

var sys_id = gdw.getPreference('sys_id');

//alert(assignee + "---" + group + "--W" + sys_id);

alert("Hello"+selectedValue);

GLideDiaLogWindow.get().destroy();

}

function continueCancel() {

alert("Cancel clicked");

GLideDiaLogWindow.get().destroy();

}