Ui page field hide / show according to condition

svani · ‎08-25-2024

HI ,

i have a query to make ui page hide or show with respect to changes in some field.

Like i have jira issue type should be shown only when jira project is selected until that is changes it should not shown even at load as well.

i have tried to write the below code in client script not working.Please help if anyone has any idea.

below is the code:

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

<g:evaluate var="jvar_taskId" expression="RP.getWindowProperties().get('sysId')" />

<g:ui_form>

<tr>

<g:form_label>

Project Name :

</g:form_label>

</td>

<g:ui_reference name="project_ref" id="project_ref" query="u_jira_project_nameISNOTEMPTY" table="sn_jira_spoke_jira_to_servicenow_projects" onchange="setIssueTypeFilter()" />

</td>

</tr>

<tr>

<g:form_label>

Issue Type :

</g:form_label>

</td>

<g:ui_reference name="issue_ref" id="issue_ref" table="sn_jira_spoke_issue_types_from_jira_project" />

</td>

</tr>

<tr>

<td>

<g:dialog_buttons_ok_cancel ok_id="submitData" ok="return continueOK()" ok_type="button" ok_text="${gs.getMessage('okay')}" ok_style_class="btn btn-primary" cancel_type="button" cancel_id="cancelData" cancel_style_class="btn btn-default" cancel="return continueCancel()"/>

</td>

</tr>

</table>

</g:ui_form>

</j:jelly>

client script:

var projNamehide = gel('project_ref').value;

alert(projNamehide);

if(projNamehide == '')

{

gel('issue_ref').style.display = 'none';

}else{

gel('issue_ref').style.display = '';

}

/////still have another code for issue creation and all

Aranya · ‎08-27-2024

Hi,
The below code should work for you.
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:evaluate var="jvar_taskId" expression="RP.getWindowProperties().get('sysId')" />
    <input type="hidden" id="hidden_sys_id" name="hidden_sys_id" value="${jvar_taskId}"></input>
<g:ui_form>
<table style="width:700px;">
<tr>
<td style="width:25%">
<g:form_label>
Project Name :
</g:form_label>
</td>
<td style="width:60%">
<g:ui_reference name="project_ref" id="project_ref" query="u_jira_project_nameISNOTEMPTY" table="sn_jira_spoke_jira_to_servicenow_projects" onchange="setIssueTypeFilter(this)" />
</td>
</tr>
<tr id = "initialhide">
<td style="width:25%">
<g:form_label>
Issue Type :
</g:form_label>
</td>
<td style="width:60%">
<g:ui_reference name="issue_ref" id="issue_ref" table="sn_jira_spoke_issue_types_from_jira_project" />
</td>
</tr>
<tr>
<td>
<g:dialog_buttons_ok_cancel ok_id="submitData" ok="return continueOK()" ok_type="button" ok_text="${gs.getMessage('okay')}" ok_style_class="btn btn-primary" cancel_type="button" cancel_id="cancelData" cancel_style_class="btn btn-default" cancel="return continueCancel()"/>
</td>
</tr>
</table>
</g:ui_form>
</body>
   </j:jelly>

Client Script:

function hide(){
	gel('initialhide').style.display = 'none';
}
function setIssueTypeFilter(object){
	if(object.value != ""){
		gel('initialhide').style.display = '';
	}
	else{
		gel('initialhide').style.display = 'none';
	}
}

Notice the following changes. An onLoad function was added to the body which made sure that the second field was hidden when the page loads. The onChange function on the first field ensures that the second field is displayed only when the first field holds some value. Also note that I have added an "id" to the table row tag for the second field to toggle the display.
Thanks!
P.S. Please mark as Helpful if I was able to clear your doubt.

svani · ‎08-27-2024

HI @Aranya ,

I have tried as above but no luck, before i tried like this but onload function is not invoking i kept some alert messages to check but its not calling the onload function thats the problem and field is not hidden both onload and onchange.do you know the alternative for it

svani · ‎08-27-2024

Hi ,

OnChange is working as expected , if i select some value on project it is showing second field, only problem is onload that's the very important one.

thanks,

Svani

svani · ‎08-27-2024

Hi @Aranya ,

just added a function

addLoadEvent(hide); above hide function it worked well.

thanks