How to clear previous reference field value and then select new one on UI Page

[Vaibhav39]

Hello.
I have three reference fields on UI page: Company, Code & Type.
On click of UI action I'm able to populate those fields from form to UI page.
When I change company then the other two fields (values from fields) should get cleared. I'm able to achieve this using gel('<field>').value =''; and gel('sys_display.<field>').value='';

The issue is, when I select value from other two reference fields it is not showing. May be it gets cleared again.
I would really appreciate if I get any kind of help here.
TIA.

[Kieran Anson]

Can you attach the entire code of your UI page? This will help see in context what you're doing.

[Vaibhav39]

Thanks for reply @Kieran Anson 

UI Page HTML:

<g:ui_reference name="company" id="company" completer="AJAXTableCompleter" table="core_company" displayValue="${jvar_companyDisplayName}" value="${jvar_companyName}" query="active=true" onchange="showUrgencyAndStyle()"/>

<g:ui_reference name="u_urgency_code" id="u_urgency_code" completer="AJAXTableCompleter" table="u_fsmm_urgency_code" displayValue="${jvar_urgencyDisplayName}" value="${jvar_urgencyCode}" query="u_active=true^u_company=${jvar_companyName}"/>

<g:ui_reference name="u_pcd_style" id="u_pcd_style" completer="AJAXTableCompleter" table="u_pcd" displayValue="${jvar_styleDisplayName}" value="${jvar_styleName}" query="u_active=true^u_company=${jvar_companyName}"/>

<g:dialog_buttons_ok_cancel ok="return submitValues();" cancel="return onCancel();" />

Client Script:

function showUrgencyAndStyle() {
    var companyId = gel('company').value;
    var urgencyLookUp = gel('lookup.u_urgency_code');
    var styleLookUp = gel('lookup.u_pcd_style');
    var urgencyArray = [];
    var styleArray = [];

    if (companyId == '' || companyId == 'null') {
        gel('u_urgency_code').value = "";
        gel('sys_display.u_urgency_code').value = "";
        gel('sys_display.u_urgency_code').readOnly = true;
        urgencyLookUp.style.display = "none";
        gel('u_pcd_style').value = "";
        gel('sys_display.u_pcd_style').value = "";
        gel('sys_display.u_pcd_style').readOnly = true;
        styleLookUp.style.display = "none";
    } else {
        gel('u_urgency_code').value = "";
        gel('sys_display.u_urgency_code').value = "";
        gel('sys_display.u_urgency_code').readOnly = false;
        urgencyLookUp.style.display = "";
        gel('u_pcd_style').value = "";
        gel('sys_display.u_pcd_style').value = "";
        gel('sys_display.u_pcd_style').readOnly = false;
        styleLookUp.style.display = "";
    }
    
    //Filter for Urgency code based on company
    var grUrgency = new GlideRecord("u_fsmm_urgency_code");
    grUrgency.addQuery('u_active', true);
    grUrgency.addQuery('u_company', companyId);
    grUrgency.addQuery("u_urgency_code", "!=", "");
    grUrgency.query();
    while (grUrgency.next()) {
        urgencyArray.push(grUrgency.sys_id.toString());
    }
    urgencyLookUp.setAttribute('onclick', "mousePositionSave(event); reflistOpen('u_urgency_code', 'not', 'u_fsmm_urgency_code', '', 'false', 'QUERY:u_active=true', 'sys_idIN" + urgencyArray + "', '')");

    //Filter for Style based on company
    var grStyle = new GlideRecord("u_pcd");
    grStyle.addQuery('u_active', true);
    grStyle.addQuery('u_company', companyId);
    grStyle.addQuery("u_style", "!=", "");
    grStyle.query();
    while (grStyle.next()) {
        styleArray.push(grStyle.sys_id.toString());
    }
    styleLookUp.setAttribute('onclick', "mousePositionSave(event); reflistOpen( 'u_pcd_style', 'not', 'u_pcd', '', 'false', 'QUERY:u_active=true', 'sys_idIN" + styleArray + "', '')");
}

[Kieran Anson]

Thank you,

Can you further explain "The issue is, when I select value from other two reference fields it is not showing. May be it gets cleared again." I'm not quite understanding what you mean and what the intended outcome should be.

Thanks

[Vaibhav39]

I am showing form reference fields with values on UI page.
When I change value of company on ui page then other field values should gets cleared so that I can select another value as per the company. But the value is not showing after selection.

Requirement-1: When company field is empty, other fields should be read only and without values.

Requirement-2:When company is not empty, other fields should be editable. User should be able to select value and that value should be displayed. (In my case value is not showing)

@Kieran Anson Could you please help me with this?