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

Hi,

something like this

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()">
     <input type="hidden" id="type" value="" name="type"/>

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

Processing Script:

response.sendRedirect( "/" + table_id + ".do?sys_id=" + document_id);
test();
function test()
{

if(type == 'user'){
var gr = new GlideRecord('sysapproval_approver');
gr.initialize();
gr.source_table = table_id;
gr.document_id = document_id;
gr.state= 'requested';
gr.sysapproval = document_id;
gr.approver = user_query; //you had user, rather it should be id value
gr.insert();
gs.addInfoMessage("User added in approver list " );
}

if(type == 'group'){
var group1 = new GlideRecord('sysapproval_group');
group1.initialize();
group1.assignment_group = group_query; //you had group, rather it should id value
group1.approval = 'requested';
group1.parent = document_id;
group1.insert();
gs.addInfoMessage("Group added in approver list " );
action.setRedirectURL(current);
}

}

Regards
Ankur

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

Roshani · ‎02-25-2021

Hi Ankur ,

This is not working .

When i click on add button nothing is happening .

Ankur Bawiskar · ‎02-25-2021

You need to debug

the logic remains the same.

1) define hidden input element

2) set the value in client script

3) access the hidden element using the html id in processing script

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

Roshani · ‎02-26-2021

Hi Ankur,

How can I store the value of user reference field on ui page and push that value into table field ?

Ankur Bawiskar · ‎02-26-2021

Hi,

store the value in hidden element and access it in processing script

logic is already shared

Regards
Ankur

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