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]

Hi,

I've tidied up your form a bit too so it's a bit more stylised.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	
	
	<style>
	.form-horizontal {
		margin-top: 5px;
		margin-bottom: 20px;
	}
	
	#dialog_buttons .btn{
		margin-left: 10px;
		padding-left: 15px;
		padding-right: 15px;
	}

	</style>
		
	<div class="form-horizontal">

		<!-- Select Company -->
		<div class="form-group">
			<label class="col-sm-2 control-label" for="company-reference">
				<span mandatory="true" class="required-marker label_description"></span>
				${gs.getMessage('Company')}
			</label>
			<div class="col-sm-10">
				<g:ui_reference name="company-reference" id="company-reference" completer="AJAXTableCompleter" table="core_company" displayValue="${jvar_companyDisplayName}" value="${jvar_companyName}" query="active=true" onchange="companyChange()"/>
			</div>
		</div>

		<!-- Select Urgency Code -->
		<div class="form-group">
			<label class="col-sm-2 control-label" for="urgency-reference">
				<span mandatory="true" class="required-marker label_description"></span>
				${gs.getMessage('Urgency Code')}
			</label>
			<div class="col-sm-10">
				<g:ui_reference name="urgency-reference" id="urgency-reference" completer="AJAXTableCompleter" table="core_company" displayValue="${jvar_companyDisplayName}" value="${jvar_companyName}" query="active=true" onchange="showUrgencyAndStyle()"/>
			</div>
		</div>


		<!-- Select PCD style -->
		<div class="form-group">
			<label class="col-sm-2 control-label" for="pcd-reference">
				<span mandatory="true" class="required-marker label_description"></span>
				${gs.getMessage('PCD Style')}
			</label>
			<div class="col-sm-10">
				<g:ui_reference name="pcd-reference" id="pcd-reference" completer="AJAXTableCompleter" table="core_company" displayValue="${jvar_companyDisplayName}" value="${jvar_companyName}" query="active=true" onchange="showUrgencyAndStyle()"/>
			</div>
		</div>

	</div>

	<!--Action Buttons -->

	<div id="dialog_buttons" class="clearfix pull-right">
		<button type="button" class="btn btn-default" onclick="cancel()" title="${gs.getMessage('Close the dialog')}">${gs.getMessage('Cancel')}</button>
		<button type="button" class="btn btn-primary" aria-disabled="true" id="submit-button" title="${gs.getMessage('Submit')}" onclick="submit()">${gs.getMessage('Submit')}</button>
	</div>
</j:jelly>

var companyRef = $("sys_display.company-reference");
var companyRefMag = $("lookup.company-reference");
var pcdRef = $("sys_display.pcd-reference");
var pcdRefMag = $("lookup.pcd-reference");
var urgencyRef = $("sys_display.urgency-reference");
var urgencyRefMag = $("lookup.urgency-reference");

function companyChange(){
	if (!companyRef.value){
		pcdRef.readOnly = true;
		pcdRefMag.readOnly = true;
		urgencyRef.readOnly = true;
		urgencyRefMag.readOnly = true;
	} else {
		
		pcdRef.readOnly = false;
		pcdRefMag.readOnly = false;
		urgencyRef.readOnly = false;
		urgencyRefMag.readOnly = false;
		
	}
}

[Vaibhav39]

Thanks @Kieran Anson 

This is fine but my 2nd requirement is when I select any value from Urgency code it is not showing in that field.
Just check if you are able to select urgency code and that value is displaying as is in the urgency code reference field.

Please help me in 2nd requirement.

[Vaibhav39]

Hey @Kieran Anson,

Please have a look at below screen shot.

Three points here:

1. When I clear company field then the values from below two fields should be cleared and fields should be read only.

2. When I select other company (say EFGH) then also values from below two fields should be cleared so that I can select another urgency code and style.

3. When company changed to other company (say EFGH) then below two fields will gets cleared and I will select the different urgency code (say LMN).

There is no issue for point 1 & 2. The issue is for point 3.
When I select different urgency code (say LMN), then that value (LMN) is not showing in the urgency code field. Same for style field.

Could you please help me out on this?

@Ankur Bawiskar @Pradeep Sharma Please help me on this.

[Ankur Bawiskar]

Hi,

your urgency and style is dependent on company variable, so you should not allow users selecting those if Company is not given

So make those as readonly when UI page loads and make them editable only when Company changes and is non-empty

Regards
Ankur

[Vaibhav39]

Thanks for reply.

In my case user may want to change urgency code only or style. So when company is empty then only below fields should be read only.