Clear/Set value of g:ui_reference field in ui page

gowthamanbalu · ‎05-02-2016

Hi Guys,

In the below UI page,

1. I want a function wherein, if shared check box is enabled, Assigned to reference field should be cleared. I tried with the below client script, the value of assigned to field is changing to null but the same is not reflecting in the UI form.

2. If assignee is populated, based on assignee filed value, cost center field should auto populated. Here also, cost center value is changing and i can see the value when I give alert but the same is not reflecting in the UI form.

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:ui_form>

<style>

li {

display:inline;

padding: 5px;

}

</style>

<h3 style="color:blue;">ASSIGN ASSET FROM STOCK</h3>

</header><hr></hr>

<table>

<td>

<label for="${jvar_ci_query}" onclick="" dir="">${gs.getMessage('In Stock Asset to be Assigned')}

</td>

<td>

<g:ui_reference id="assetToBeReturned" name="QUERY:u_asset_state!=1^assigned_toISEMPTY^u_is_shared=false" table="alm_asset"/>

</td></tr>

<td>

<label for="${jvar_ci_query}" name="assignto" id="assignto" onclick="" dir="">${gs.getMessage('Assign to')}

</td>

<g:ui_reference name="assignedto" id="assignedto" table="sys_user" onchange="clrasgn();"/>

</div></td></tr>

<td>

<label for="${jvar_ci_query}" onclick="" dir="">${gs.getMessage('Cost Center')}

</td>

<td>

<g:ui_reference name="costcenter" id="costcenter" table="cmn_cost_center"/>

</td></tr>

<td>

<label for="${jvar_ci_query}" onclick="" dir="">${gs.getMessage('Location ')}

</td>

<td>

<g:ui_reference name="location" id="location" table="cmn_location"/>

</td></tr>

<td>

<label for="${jvar_ci_query}" onclick="" dir="">${gs.getMessage('Shared')}

</td>

<td>

</td></tr>

<td>

<label for="my_choice" id="my_choice" style="display: none">Shared Type

<option> Branch </option>

<option> Call Center </option>

<option> Workstation Scanner </option>

<option> Other </option>

</select>

</td></tr>

<td>

<label for="${jvar_ci_query}" name="brachname" id="brachname" onclick="" dir="" style="display: none">${gs.getMessage('Branch')}

</td>

<g:ui_reference name="branch" table="u_extra_location" />

</div></td></tr>

<td>

<label for="${jvar_ci_query}" id="cubelab" onclick="" dir="" style="display: none">${gs.getMessage('Cube Number')}

</td>

<td>

</td></tr>

<td>

<label for="${jvar_ci_query}" id="otherlab" onclick="" dir="" style="display: none">${gs.getMessage('Other')}

</td>

<td>

</td></tr>

<td>

<g2:dialog_button onclick="return onSubmit();" name="assignasset" id="assignasset">${gs.getMessage('Assign Asset')}</g2:dialog_button>

</td>

</table>

</g:ui_form>

</j:jelly>

Client Script:

function clrasgn(){

shardType();

}

function shardType(){

var sh= document.getElementById("shared").checked;

if (sh == true){

//var temp = '';

//document.getElementsByName("assignedto").style.visibility = "hidden";

document.getElementById("my_substate").style.display = "block";

document.getElementById("my_choice").style.display = "block";

document.getElementById("my_substate").value = "--None--";

//alert(gel('assignedto').value);

//document.getElementById("assignedto").value="";

//document.getElementById("assigndiv").style.display = "none";

//document.getElementById("assignto").style.display = "none";

//document.getElementById("assignedto").innerHTML = temp;

gel('assignedto').value="";

alert(gel('assignedto').value);

//function checkShrd(){

//var asn = gel('assignedto').value;

// alert(asn);

//if (asn != ''){

//alert('test');

//var temp='';

//gel('assignedto').value= temp;

//var query= gel('assignedto').value;

//alert(query);

//return query;

//}

//return null;

//alert(asn);

//document.getElementById("assignedto").value="";

//g:ui_reference.setdisplayalue('assignedto','');

//alert(gel('assignedto').value);

}

//asn.value="";

//alert(gel('assignedto').value);

//return asn.value;

else if (sh == false){

document.getElementById("my_substate").style.display = "none";

document.getElementById("my_choice").style.display = "none";

document.getElementById("assigndiv").style.display = "block";

document.getElementById("assignto").style.display = "block";

//document.getElementById("assignedto").style.visibility = "visible";

document.getElementById("brachname").style.display = "none";

document.getElementById("branchdiv").style.display = "none";

document.getElementById("cube").style.display = "none";

document.getElementById("cubelab").style.display = "none";

document.getElementById("other").style.display = "none";

document.getElementById("otherlab").style.display = "none";

}

var sh= document.getElementById("shared").checked;

document.getElementsByName('my_substate').onchange = function() {

if (this.value=='--None--') {

alert('Please Select Shared Type !');

document.getElementById("brachname").style.display = "none";

document.getElementById("branchdiv").style.display = "none";

document.getElementById("cube").style.display = "none";

document.getElementById("cubelab").style.display = "none";

document.getElementById("other").style.display = "none";

document.getElementById("otherlab").style.display = "none";

}

if (this.value == 'Branch' && this.value !='Call Center' && this.value !='Workstation Scanner' && this.value!='Other' ) {

document.getElementById("brachname").style.display = "block";

document.getElementById("branchdiv").style.display = "block";

document.getElementById("cube").style.display = "none";

document.getElementById("cubelab").style.display = "none";

document.getElementById("other").style.display = "none";

document.getElementById("otherlab").style.display = "none";

}

if ((this.value == 'Call Center' || this.value == 'Workstation Scanner') && this.value != 'Branch' && this.value != 'Other') {

document.getElementById("brachname").style.display = "none";

document.getElementById("branchdiv").style.display = "none";

document.getElementById("cube").style.display = "block";

document.getElementById("cubelab").style.display = "block";

document.getElementById("other").style.display = "none";

document.getElementById("otherlab").style.display = "none";

}

if (this.value == 'Other' && this.value !='Call Center' && this.value !='Workstation Scanner' && this.value!='Branch' ) {

document.getElementById("brachname").style.display = "none";

document.getElementById("branchdiv").style.display = "none";

document.getElementById("cube").style.display = "none";

document.getElementById("cubelab").style.display = "none";

document.getElementById("other").style.display = "block";

document.getElementById("otherlab").style.display = "block";

}}

//function costcal(){

document.getElementsByName('assignedto')[0].onchange = function() {

//var asn = document.getElementsById('assignedto').value;

if (this.value!='') {

//var asn = document.getElementsById('assignedto').value;

var asn = gel('assignedto').value;

//alert('inside'+asn);

var assignto = new GlideRecord('sys_user');

assignto.addQuery('sys_id',asn);

assignto.query();

if (assignto.next()){

//alert(assignto.name);

var cst = assignto.u_cost_center;

//alert(assignto.u_cost_center);

//alert(cst);

if (cst != ''){

var costcen = new GlideRecord('cmn_cost_center');

costcen.addQuery('name','STARTSWITH',cst);

costcen.query();

if (costcen.next()){

//var cstname = document.getElementById("costcenter");

//cstname = costcen.name;

//alert(costcen.name);

//alert(cstname);

//var cstn = gel('costcenter').value;

//cstn.setvalue = costcen.name;

gel('costcenter').value = costcen.name;

document.getElementById("costcenter").value = costcen.name;

alert(costcen.name);

//costcen.update();

//return cstn;

//document.getElementById("costcenter").value = costcen.name;

//g:ui_form.setValue('costcenter',costcen.name);

}}}}}

function onSubmit(){

var ast = gel("QUERY:u_asset_state!=1^assigned_toISEMPTY^u_is_shared=false").value;

//alert(ast);

var asgn = gel('assignedto').value;

//alert(asgn);

var cstcen = gel('costcenter').value;

var loc = gel('location').value;

var shr= document.getElementById("shared").checked;

//var shrdtype = gel('sharedtype').value;

//var brn = gel('branch').value;

//var cu = gel('cube').value;

//var olab = gel('otherlab').value;

//var otr = gel('other').value;

if (ast == '') {

alert('Please Asset Detail');

return false;}

if (asgn == '' && shr == false) {

alert('Please Assignee/Shard Detail');

return false;}

if (cstcen == '') {

alert('Please cost Detail');

return false;}

if (loc == '') {

alert('Please location Detail');

return false;}

if (shr == true){

var shrdtype = gel('my_substate').value;

//alert(shrdtype);

if (shrdtype == '--None--'){

alert('Please select shard type');

return false;

}

if (shrdtype == 'Branch'){

var brn = gel('branch').value;

if (brn == '') {

alert('Please Branch Detail');

return false;}}

if (shrdtype == 'Call Center' || shrdtype == 'Workstation Scanner'){

var cu = gel('cube').value;

if (cu == '' ) {

alert('Please Cube Detail');

return false;}}

if (shrdtype == 'Other'){

var otr = gel('other').value;

if (otr == '') {

alert('Please Other Detail');

return false;}}}

return true;

}

Kalaiarasan Pus · ‎05-02-2016

gel('assignedto').value = sys id of record;

gel('sys_display.assignedto').value = display value of record;

Trevor Muhl · ‎09-28-2016

Hello Kalaiarasan,

If I clear the display value and sys_id of a ui_reference field with the following code:

gel('sys_display.reference_field').value = "";

gel('reference_field').value = "";

Both values are cleared, as expected. However, the "i" symbol next to the field remains visible. Opening it allows the user to create a new record for the reference field table. Should I be setting the sys_id value to something other than an empty string in order to disable the "i" icon?

I tried null and undefined. For both, the page says "Record not found". This is better, but not quite optimal.

yundlu316 · ‎10-20-2017

Hey Trevor, did you ever figure out how to get rid of that "i" icon?

Thanks!

Trevor Muhl · ‎10-20-2017

Hello David,

Reviewing this, it doesn't appear that I ever did determine a solution. However, I just looked at it again and have figured it out. To hide the reference icon, use the following line:

gel('<field name>LINK').style = 'visibility: hidden; display: none;'

For example:

gel('companyLINK').style = 'visibility: hidden; display: none;'

I noticed a third HTML element, display_hidden.<field_name>, that continues to hold the reference value after clearing it with the code used above. It is cleared when removing the value from the field using the UI. I did not notice any effects from leaving it alone. However, it can be cleared with gel('display_hidden.<field_name>').value = '';. This would result in the following code to completely clear a reference field:

gel('user').value = '';

gel('sys_display.user').value = '';

gel('display_hidden.user').value = ''; // optional

gel('userLINK').style = 'visibility: hidden; display: none;'

Let me know if this works for you.

- Trevor Muhl