Ui page field hide / show according to condition

[svani]

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')" />

    <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()" />

</td>

</tr>

<tr>

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

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

Hi Svani,

Kindly mark my comment as the solution so that it can be helpful to others.

Thanks!

[svani]

Hi @Aranya ,

Yes sure but one problem when i changed the ui page script, after ok button but incident form is stuck now i need to save before doing , its happening only because of these changes, i tried to remove the changes and did its form is fine, do you know any cause of it?

[Aranya]

Hi Svani,
Can you please show some screenshots?
Thanks!

[svani]

Hi @Aranya ,

I have checked ui page script only problem causing is from below function

function hide(){

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

}

this is my client script

//on load to hide issue type

addLoadEvent(hide);

function hide(){

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

}

//on change of project

function setIssueTypeFilter(object) {

    if(object.value != ""){

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

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

    var UserLookUp = gel('lookup.issue_ref');

    var issueTypeList = [];

    var queryString = 'u_issue_type_jira_projectINProd Issue,Bug,Story';

    var proID = '';

    //alert("while inside"+proID);

    var proj = new GlideRecord('sn_jira_spoke_jira_to_servicenow_projects');

    proj.addQuery('sys_id', projName);

    proj.query();

    if (proj.next()) {

        //alert("if inside"+projName);

        proID = proj.u_jira_project_id;

        //alert("proID"+proID);

        var issueTy = new GlideRecord('sn_jira_spoke_issue_types_from_jira_project');

        issueTy.addQuery('u_project_id_jira_project', proID);

        issueTy.encodedQuery = queryString;

        issueTy.query();

        //alert("inside");

        while (issueTy.next()) {

            //alert("while inside"+proID);

            issueTypeList.push(issueTy.sys_id.toString());

        }

        UserLookUp.setAttribute('onclick', "mousePositionSave(event); reflistOpen( 'issue_ref', 'not', 'sn_jira_spoke_issue_types_from_jira_project', '', 'false','Query:u_project_name_jira_projectISNOTEMPTY',           'sys_idIN" + issueTypeList + "', '')");

    }

}

else{

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

}

}

//OK button script

function continueOK() {

    var sysinc = hidden_sys_id.value;

    //if (project_ref.value == '') {

    // alert('Input 1 is required');

    //  return false;

    // }

    // if (issue_ref.value == '') {

    //  alert('Input 2 is required');

    //  return false;

    //  }

    // alert(project_ref.value);

    //alert(issue_ref.value);

    var issueTypeID = '';

    var issueTyID = new GlideRecord('sn_jira_spoke_issue_types_from_jira_project');

    issueTyID.addQuery('sys_id', issue_ref.value);

    issueTyID.query();

    if (issueTyID.next()) {

        issueTypeID = issueTyID.u_issue_id_jira_project;

    }

    //Call REST message with AJAX

    var ga = new GlideAjax('JiraProject');

    ga.addParam('sysparm_name', 'sendMSG'); //ajax function

    ga.addParam('input1', project_ref.value); //pass input1 into ajax

    ga.addParam('input2', issueTypeID); //pass input2 into ajax

    ga.addParam('hidden_sys_id', hidden_sys_id.value); //pass sys_id into ajax

    ga.getXML(myCallBack); //process response

    function myCallBack(response) {

        var ajaxcomplete = response.responseXML.documentElement.getAttribute('answer');

        // alert(ajaxcomplete); //alert the result to make sure all is well.

        GlideDialogWindow.get().destroy(); // Close the dialog window if any

        action.setRedirectURL(current);

    }

}

//Cancel button script

function continueCancel() {

    GlideDialogWindow.get().destroy();

}

the problem is once the ui page is clicked ok , then it will retain in same form tahts correct, but it is not allowing to update anything on the form ,

you can see above i have clicked the jira details but form is stuck unable to update and change anything on the form , if i remove the above function it works but i cannot hide field on load thats the problem

[Aranya]

Hi Svani,
If you are calling the UI Page from a UI action, then pass the values from the page to the action and then to a Script Include. 
Otherwise, you can use the "Processing Script" section to run a server-side code.