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

ss52 · ‎09-08-2022

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 && 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 && 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 && 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 && 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_ · ‎09-09-2022

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();
        }
}

View solution in original post

Claude DAmico · ‎11-14-2022

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.

Claude E. D'Amico, III - CSA

View solution in original post

Claude D_ · ‎09-08-2022

In the HTML template, make the following change:

<!--<select class ="tab" id="substate_choices">-->
<select class ="tab" id="substate_choices" onchange="substateChange()">

Then, in the Client Script, add a function with some jQuery to remove the options. Just match up the options how you need. Exmple:

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

sukku · ‎09-09-2022

Hi Claude,

Thank you so much for your reply. I have tried above code. When I select resolved or closed it's displaying proper close codes. First time from substate if I select resolved then in close code respective close codes are displaying. But I change the substate to closed then close code is showing as none and vice-versa. But remaining code is working fine.

Please find the screenshot as below. Could you please help me with this.

Thanks and Regards

Claude D_ · ‎09-09-2022

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 · ‎09-12-2022

Hi Claude,

Thank you very much for your quick assistance and replies on this issue. I am able to achieve what i am looking for by incorporating above methods. Once again thank you.

Regards,