Based on the selection of 'other' option from the dropdown list of a field the text free box should be visible
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-03-2021 10:00 PM
Hello Team,
Here the requirement which I got was,
Based on the selection of 'other' value from the dropdown list then the 'Rejection cause' field of type free text area should be visible.
For the creation of the dropdown field, I have modified theOOTB UI policy
steps to go to the major incident candidate:
1). Click on candidates
2) click on view workbench which is in the top-right of the form
3). Click on Reject Major Incident Candidate
4) after clicking on the 'Reject major incident candidate' the below dialogue box is getting opened.
5). whenever we click on the 'other' option the field 'Rejection cause text' free text of type should be visible. And after the stroke in the 'Rejection cause text' field 'Reject' button should be enabled.
for this, we have one OOTB UI policy 'mim_rejection_reason'
I have modified this UI policy from the free text field to a dropdown field
UI Policy:
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>
.form-horizontal {
margin-top: 5px;
margin-bottom: 20px;
}
#dialog_buttons .btn{
margin-left: 10px;
padding-left: 15px;
padding-right: 15px;
}
.control-label{
padding-left: 0;
}
</style>
<div class="form-horizontal">
<label class="col-sm-2 control-label">
<span mandatory="true" class="required-marker label_description"><span class="sr-only">${gs.getMessage('required')}</span></span> ${gs.getMessage('Rejection Cause')}
</label>
<div class="col-sm-4">
<select id="mim_rejection_reason_text" required="true" class="form-control" onchange="rejectMajorIncidentCandidate.rejectionReasonOnChange()">
<option value="">-- ${gs.getMessage("None")} --</option>
<option value="Single user issue">Single user issue</option>
<option value="Duplicate of another open MI">Duplicate of another open MI</option>
<option value="No business impact">No business impact</option>
<option value="Not able to validate the business impact">Not able to validate the business impact</option>
<option value="Out of GIT scope">Out of GIT scope</option>
<option value="Others">Others</option>
</select>
</div>
</div><br/><br/><br/>
<div id="dialog_buttons" class="clearfix pull-right">
<g:dialog_buttons_ok_cancel
textarea_label="${gs.getMessage('Work notes')}"
textarea_label_title="${gs.getMessage('A reason is required to reject this major incident candidate')}"
ok="return updateWorknotes()"
ok_action="updateWorknotes"
ok_id="mim_rejection_reason_ok_btn"
ok_title="${gs.getMessage('Reject major incident candidate')}"
ok_type="button"
cancel_title="${gs.getMessage('Close the dialog')}"/>
</div>
</j:jelly>
Client Script:
var $rejectBtn = $('mim_rejection_reason_ok_btn');
$rejectBtn.textContent = getMessage('Reject'); // TODO: this code to be removed, modal window to be re-written in plain html/js to make it consistant with promote and reject
var worknoteTextarea = $('mim_rejection_reason_text');
worknoteTextarea.writeAttribute('aria-required', 'true');
var rejectionReason = $("mim_rejection_reason_text");
function rejectionReasonOnChange() {
if(rejectionReason.value=="") {
//$rejectBtn.writeAttribute('aria-disabled', true);
$rejectBtn.disabled = true;
} else {
//$rejectBtn.writeAttribute('aria-disabled', false);
$rejectBtn.disabled = false;
}
}
rejectionReason.addEventListener('change', function(){
rejectionReasonOnChange();
});
function updateWorknotes() {
if(rejectionReason && rejectionReason.value) {
getMessage("Major incident candidate rejected", function (msg) {
var workNotes = msg + "\n" + rejectionReason.value.trim();
if(window.NOW.MAJOR_INCIDENT_WORKBENCH){
var record = {};
record.work_notes = workNotes;
rejectRestCall(record).then(function(){
var modal = GlideModal.prototype.get("sn_major_inc_mgmt_mim_rejection_reason");
modal.setPreference('reload', true);
modal.destroy();
});
} else {
//To be refactored after PRB1240294 is fixed
g_form.getControl('work_notes').value = workNotes;
//destroying the GlideModal rendered in UI Action 'sysverb_mim_reject'
GlideModal.prototype.get('sn_major_inc_mgmt_mim_rejection_reason').destroy();
//calling the UI action 'sysverb_mim_reject' to run rejectMICOnConfirmation()
gsftSubmit(null, g_form.getFormElement(), 'sysverb_mim_reject');
}
});
}
}
if(window.NOW.MAJOR_INCIDENT_WORKBENCH){
function rejectRestCall(record){
var dfd = $j.Deferred();
var api = '/api/sn_major_inc_mgmt/mim/actions/' + window.NOW.MAJOR_INCIDENT_WORKBENCH.sys_id;
var data = {
action: 'REJECT',
record: record
};
$j.ajax({
type: 'POST',
url: api,
data: JSON.stringify(data),
success: function(data) { dfd.resolve(data);},
error: function(){dfd.reject();},
contentType: "application/json",
dataType: 'json'
});
return dfd.promise();
}
$j('#cancel_button').attr('onclick', '').on('click', function(){
GlideModal.prototype.get("sn_major_inc_mgmt_mim_rejection_reason").destroy();
});
rejectionReasonOnChange();
} else
//IIFE to populate textarea with current worknote and hide tooltips on modal closure.
(function () {
var notes = g_form.getValue("work_notes");
if(notes != '') {
$("mim_rejection_reason_text").value = notes;
enableButton();
}
rejectionReasonOnChange();
$("mim_rejection_reason_text").focus();
GlideModal.prototype.get('sn_major_inc_mgmt_mim_rejection_reason').on('beforeclose', function() {
$j('.tooltip').hide().tooltip('hide');
});
})();
Can anyone please help me with the code