UI Page hide or show field based on option select

Roshani · ‎02-24-2021

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 .

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

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

Ankur Bawiskar · ‎02-24-2021

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:

Regards
Ankur

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

View solution in original post

Ankur Bawiskar · ‎02-24-2021

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:

Regards
Ankur

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

Ankur Bawiskar · ‎02-24-2021

@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

Roshani · ‎02-24-2021

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.

Ankur Bawiskar · ‎02-24-2021

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

Roshani · ‎02-24-2021

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