The CreatorCon Call for Content is officially open! Get started here.

UI Page hide or show field based on option select

Roshani
Tera Expert

Hi All ,

I have a ui page as below . I have a requirement when I select  "User" from the dropdown  User field should be visible  and if I select " Group"  then group field should be visible . 

 

find_real_file.png

Below is my code , can somebody help on this 

 

<?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 style="width:600px">
<input type="hidden" id="document_id" name="document_id" value="${sysparm_document_id}" />
<input type="hidden" id="table_id" name="table_id" value="${sysparm_table}" />
<input type="hidden" id="table_name" name="table_name" value="dms_document" />
<input type="hidden" id="generated_by" name="generated_by" value="user" />
<input type="hidden" id="user" name="user" />
<input type="hidden" id="generated_byy" name="generated_byy" value="group" />
<input type="hidden" id="group" name="group" />
<tr>
<td>
<label for="name">Please select the drop down</label>
</td>
<td>
<select id="quick_message_dropdown">
<option value="user">User</option>
<option value="group">Group</option>
</select><br/>
</td>
</tr>
<tr>
<td>
<label for="name">${gs.getMessage('User')}</label>
</td>
<td nowrap="true" align="left">
<j:set var="jvar_user_query" value="QUERY:active=true" />
<input type="hidden" id="user_query" name="user_query" value="${jvar_user_query}" />
<g:ui_reference name="${jvar_user_query}" table="sys_user" /><br/>
</td>
</tr>

<tr>
<td>
<label for="name">${gs.getMessage('Group')}</label>
</td>
<td nowrap="true" align="left">
<!--<g:ui_reference name="my_var" query="active=true" id="u_name" table="sys_user_group" style="width:180px"/> -->
<j:set var="jvar_group_query" value=" "/>
<input type="hidden" id="group_query" name="group_query" value="${jvar_group_query}" />
<g:ui_reference name="${jvar_group_query}" query="active=true" table="sys_user_group" /><br/>
</td>
</tr>

<tr>
<td>
<label for="revision">${gs.getMessage('Comments')}</label>
</td>
<td>
<input id="sequence" name="sequence" />
</td>
</tr>

<tr>
<td colspan="2" height="20px"></td>
</tr>
<tr>
<td colspan="2">
<g:dialog_button onclick=" return validateApprover();"
name="" id="">${gs.getMessage('Add')}</g:dialog_button>
</td>
</tr>
</table>
</g:ui_form>

</j:jelly>

1 ACCEPTED SOLUTION

Hi,

update as this

It worked well for me

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">

	<body onload="hide()">

		<g:ui_form>
			<table style="width:600px">
				<input type="hidden" id="document_id" name="document_id" value="${sysparm_document_id}" />
				<input type="hidden" id="table_id" name="table_id" value="${sysparm_table}" />
				<input type="hidden" id="table_name" name="table_name" value="dms_document" />
				<input type="hidden" id="generated_by" name="generated_by" value="user" />
				<input type="hidden" id="user" name="user" />
				<input type="hidden" id="generated_byy" name="generated_byy" value="group" />
				<input type="hidden" id="group" name="group" />
				<tr>
					<td>
						<label for="name">Please select the drop down</label>
					</td>
					<td>
						<select id="quick_message_dropdown" onChange="showHide(this)">
							<option value="">None</option>
							<option value="user">User</option>
							<option value="group">Group</option>
						</select><br/>
					</td>
				</tr>
				<tr id="userReference">
					<td>
						<label for="name">${gs.getMessage('User')}</label>
					</td>
					<td nowrap="true" align="left">
						<j:set var="jvar_user_query" value="QUERY:active=true" />
						<input type="hidden" id="user_query" name="user_query" value="${jvar_user_query}" />
						<g:ui_reference name="${jvar_user_query}" table="sys_user" /><br/>
					</td>
				</tr>

				<tr id="groupReference">
					<td>
						<label for="name">${gs.getMessage('Group')}</label>
					</td>
					<td nowrap="true" align="left">
						<!--<g:ui_reference name="my_var" query="active=true" id="u_name" table="sys_user_group" style="width:180px"/> -->
						<j:set var="jvar_group_query" value=" "/>
						<input type="hidden" id="group_query" name="group_query" value="${jvar_group_query}" />
						<g:ui_reference name="${jvar_group_query}" query="active=true" table="sys_user_group" /><br/>
					</td>
				</tr>

				<tr>
					<td>
						<label for="revision">${gs.getMessage('Comments')}</label>
					</td>
					<td>
						<input id="sequence" name="sequence" />
					</td>
				</tr>

				<tr>
					<td colspan="2" height="20px"></td>
				</tr>
				<tr>
					<td colspan="2">
						<g:dialog_button onclick=" return validateApprover();"
										 name="" id="">${gs.getMessage('Add')}</g:dialog_button>
					</td>
				</tr>
			</table>
		</g:ui_form>
	</body>

</j:jelly>

Client Script:

function hide(){
	gel('userReference').style.display = 'none';
	gel('groupReference').style.display = 'none';	
}

function showHide(object){

	if(object.value == 'user'){
		gel('userReference').style.display = '';
		gel('groupReference').style.display = 'none';	
	}
	else if(object.value == 'group'){
		gel('groupReference').style.display = '';
		gel('userReference').style.display = 'none';
	}
	else{
		gel('userReference').style.display = 'none';
		gel('groupReference').style.display = 'none';
	}

}

Output:

find_real_file.png

Regards
Ankur

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

View solution in original post

31 REPLIES 31

Hi,

update as this

It worked well for me

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">

	<body onload="hide()">

		<g:ui_form>
			<table style="width:600px">
				<input type="hidden" id="document_id" name="document_id" value="${sysparm_document_id}" />
				<input type="hidden" id="table_id" name="table_id" value="${sysparm_table}" />
				<input type="hidden" id="table_name" name="table_name" value="dms_document" />
				<input type="hidden" id="generated_by" name="generated_by" value="user" />
				<input type="hidden" id="user" name="user" />
				<input type="hidden" id="generated_byy" name="generated_byy" value="group" />
				<input type="hidden" id="group" name="group" />
				<tr>
					<td>
						<label for="name">Please select the drop down</label>
					</td>
					<td>
						<select id="quick_message_dropdown" onChange="showHide(this)">
							<option value="">None</option>
							<option value="user">User</option>
							<option value="group">Group</option>
						</select><br/>
					</td>
				</tr>
				<tr id="userReference">
					<td>
						<label for="name">${gs.getMessage('User')}</label>
					</td>
					<td nowrap="true" align="left">
						<j:set var="jvar_user_query" value="QUERY:active=true" />
						<input type="hidden" id="user_query" name="user_query" value="${jvar_user_query}" />
						<g:ui_reference name="${jvar_user_query}" table="sys_user" /><br/>
					</td>
				</tr>

				<tr id="groupReference">
					<td>
						<label for="name">${gs.getMessage('Group')}</label>
					</td>
					<td nowrap="true" align="left">
						<!--<g:ui_reference name="my_var" query="active=true" id="u_name" table="sys_user_group" style="width:180px"/> -->
						<j:set var="jvar_group_query" value=" "/>
						<input type="hidden" id="group_query" name="group_query" value="${jvar_group_query}" />
						<g:ui_reference name="${jvar_group_query}" query="active=true" table="sys_user_group" /><br/>
					</td>
				</tr>

				<tr>
					<td>
						<label for="revision">${gs.getMessage('Comments')}</label>
					</td>
					<td>
						<input id="sequence" name="sequence" />
					</td>
				</tr>

				<tr>
					<td colspan="2" height="20px"></td>
				</tr>
				<tr>
					<td colspan="2">
						<g:dialog_button onclick=" return validateApprover();"
										 name="" id="">${gs.getMessage('Add')}</g:dialog_button>
					</td>
				</tr>
			</table>
		</g:ui_form>
	</body>

</j:jelly>

Client Script:

function hide(){
	gel('userReference').style.display = 'none';
	gel('groupReference').style.display = 'none';	
}

function showHide(object){

	if(object.value == 'user'){
		gel('userReference').style.display = '';
		gel('groupReference').style.display = 'none';	
	}
	else if(object.value == 'group'){
		gel('groupReference').style.display = '';
		gel('userReference').style.display = 'none';
	}
	else{
		gel('userReference').style.display = 'none';
		gel('groupReference').style.display = 'none';
	}

}

Output:

find_real_file.png

Regards
Ankur

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

@Roshani 

Did you get a chance to check on the solution provided to resolve your query?

If your query is resolved please mark my response as correct & helpful so that this thread can be closed and others can be benefited by this.

Regards
Ankur

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

Hi Ankur, 

I have a Ui action created , but when i click on button  user and group fields are not hiding on load when I select user or group then its working fine but onload it not showing up. 

Hi,

I have added body onload function to hide those 2

then show and hide based on user or group drop down

if you don't want to hide them on load then don't use body onload function

Regards
Ankur

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

I want to hide user and group field on Onload but its seems not working.