Fields display on ui page based on the input selected in another field

[ss52]

Hi All,

We have a requirement to bulk close the incidents from the list view of incidents.

I have implemented a ui action which is list choice button which will call ui page and set the values in incident based on the data provided in ui page.

UI Action:

function mandatoryCheckValidationforBulkClosure() {

    var selSysIds = g_list.getChecked();
    var sysIdList = selSysIds.split(',');

/* this script include "CompanyUtils" is to get the company value which is selected from list view by users and passing that to ui page to restrict incidents related to that company in parent incident field */
    var ga = new GlideAjax('global.CompanyUtils');
    ga.addParam('sysparm_name', 'validateComp');
    ga.addParam('sysparm_sysid', String(sysIdList));
    ga.getXML(handleResponse);

    function handleResponse(response) {
        var answer = response.responseXML.documentElement.getAttribute("answer");

        var gdw = new GlideDialogWindow('bulk_closure_ui_page');       
        gdw.setTitle('Closure Information');
        gdw.setSize("500", "500");
        gdw.setPreference('sysparm_sysID', String(sysIdList));
        gdw.setPreference('sysparm_comp', answer);
        gdw.render();
        gsftSubmit(null, g_form.getFormElement(), 'bulk_custom_closure');
    }
}

UI Page:

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">
    <style>
    .tab {position:absolute;left:100px; }}
    </style>

    <g:evaluate var="jvar_sysID" expression="RP.getWindowProperties().get('sysparm_sysID')" />
<input type="hidden" id="selected_sysID" value="${jvar_sysID}" />

    <div id ="substate_label" class="form-group " ng-show="!multipleInputs &amp;&amp; fieldsVisible > 0" aria-hidden="false"><font color="red">*</font><label>SubState</label>

<select class ="tab" id="substate_choices">
    <option value ="">--none--</option>
    <option value="59">Resolved</option>
    <option value="60">Closed</option>
</select>

 </div>
    
    <div id ="Parent_label" class="form-group " ng-show="!multipleInputs &amp;&amp; fieldsVisible > 0" aria-hidden="false"><label>Parent Security incident</label>      
        
    <g:evaluate var="jvar_comp" expression="RP.getWindowProperties().get('sysparm_comp')" />    
        
        <g:ui_reference name="parent" id="parent" table="sn_si_incident"  field="parent_security_incident" query="company=${jvar_comp}"  class ="tab" />        
            
    </div>                                                                                                  
   <div id ="close_codelabel" class="form-group " ng-show="!multipleInputs &amp;&amp; fieldsVisible > 0" aria-hidden="false"><font color="red">*</font><label>Close Code</label>
    <select class ="tab" id="close_codes">
    <option value ="">--none--</option>
    <option value="110">Duplicated</option>
    <option value="111">Expected Activity</option>
    <option value="112">With Exception</option>
    <option value="113">Remediated</option>
    <option value="114">IR Completed</option>
    <option value="2">False Positive</option>    
</select>

 </div>

    <div id ="additional_comments" class="form-group " ng-show="!multipleInputs &amp;&amp; fieldsVisible > 0" aria-hidden="false"><font color="red">*</font><label>Close Notes</label>

<textarea id="additional_comments_value" ng-init="inputType = 'comments'" aria-label="Additional comments (Customer visible)" class="sn-string-textarea form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty" placeholder="Close Notes" ng-attr-placeholder="{{fields[inputType].label}}" ng-model="inputTypeValue" data-stream-text-input="comments" aria-describedby="fieldmsg-singleinput-7" sn-resize-height="" sn-sync-with="inputType" sn-sync-with-value-in-fn="reduceMentions(text)" sn-sync-with-value-out-fn="expandMentions(text)" mentio="" mentio-typed-term="typedTerm" mentio-id="additional_comments_value" mentio-require-leading-space="true" mentio-trigger-char="'@'" mentio-items="members" mentio-search="searchMembersAsync(term)" mentio-template-url="/at-mentions.tpl" mentio-select="selectAtMention(item)" mentio-suppress-trailing-space="true" autocomplete="off" style="overflow: hidden; overflow-wrap: break-word; height: 64px;" aria-invalid="false">This SIR is closed using Bulk Closure button</textarea> </div>
    <br/>
<button class="btn-primary btn" id="submit" name="submit" onclick="return onSubmit();">Submit</button>
    
</j:jelly>

Client Script:

function onSubmit() {

    var comment = $('additional_comments_value').value;    
    var parentvalue = gel('parent').value;
    alert($('selected_sysID').value);

    if ($('substate_choices').value == "" || $('close_codes').value == "" || comment.trim().length == 0) {
        alert("Please fill the values first for bulk closure");

        return "";
    } else {
        var ga = new GlideAjax("sn_si.BulkClosureUtil");
        ga.addParam("sysparm_name", "bulkclosureSecurityIncident_cs");
        ga.addParam("sysparm_sysID", $('selected_sysID').value);
        ga.addParam("sysparm_subState", $('substate_choices').value);
        ga.addParam("sysparm_closecode", $('close_codes').value);
        ga.addParam("sysparm_parent", parentvalue);
        ga.addParam("sysparm_comments", $('additional_comments_value').value);
        ga.getXML(function(resp) {
            var rootNode = resp.responseXML.getElementsByTagName('answer');
        });

        GlideDialogWindow.get().destroy();
        window.location.reload();
    }
}

This is perfectly working fine.but now based on the substate respective close codes should display on ui page. Meaning if we select substate as resolved then in close code drop down 3 values should display and if we select closed in substate drop down otehr 2 close codes should display.

Based on the selection close code dropdown should display with options and same should be passed in client script to script include to set close code values in main incident page.

Can anyone guide me on this please.

Thanks in Advance,

[Claude D_ · Accepted solution]

Good point. Since the .remove() method removes the HTML entirely, you would have to re-insert it. The method below will hide and show as needed. Again, just match up your options to the correct substate.

This accounts for either substate and when none is selected (show all).

function substateChange(){
        var substate = jQuery("#substate_choices").val()
        if(substate == "59"){
            jQuery("option[value='110']").hide();
            jQuery("option[value='111']").hide();
            jQuery("option[value='112']").show();
            jQuery("option[value='113']").show();
            jQuery("option[value='114']").show();
        } else if(substate == "60") {
        	jQuery("option[value='110']").show();
            jQuery("option[value='111']").show();
            jQuery("option[value='112']").hide();
            jQuery("option[value='113']").hide();
            jQuery("option[value='114']").hide();
		} else {
        	jQuery("option[value='110']").show();
            jQuery("option[value='111']").show();
            jQuery("option[value='112']").show();
            jQuery("option[value='113']").show();
            jQuery("option[value='114']").show();
        }
}

[ss52]

Hi Claude,

Hope you are doing well!!

Sorry to reply on the previous post. Since it is continuation to this I am posting it here for easy reference.

When I first select substate as resolved and closed code as anything related to this substate and again changing substate to closed the first selected input from close code dropdown should be cleared and only close code related to selected substate should be visible.

Thanks and Regards

[Claude DAmico · Accepted solution]

No worries!

Add jQuery("#close_codelabel option[value='']").prop('selected', true); as the first line of the substateChange() function. This will set the value of the close code to "--none--" every time.

[ss52]

Thanks a lot Claude for your quick response and help. It's working absolutely fine.

Once again Thank you!!!

Regards