I have a requirement that changes a free text field to a choice list fields but I am having trouble coding the functionality so any help will be appreciated.
It is for the propose major incident UI action pop up (image 1) I want to remove the business impact field and put a custom field which is a choice list field (impacted area) (image 2), i need that when regional is selected another dropdown comes up with the regions in the cmn_location table where type is region and when office is selected i need another dropdown to show where location type is office, so both to query the same table but with different conditions.
Currently (image 3) the locations don't show and also the propose button doesn't do anything anymore.
addLoadEvent(function() {
(function(global) {
var workNotes = $("mim-propose-work-notes");
var impactedArea = $("mim-propose-impacted-area");
var locationWrapper = $("location-reference-wrapper");
var locationSelect = $("mim-propose-location");
var workNotesWrapper = $('work-notes-wrapper');
var proposeBtn = $('mim-propose-button');
function _debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
function workNotesOnChange() {
if (!workNotes.value.trim()) {
workNotesWrapper.removeClassName('is-filled');
proposeBtn.addClassName('disabled');
proposeBtn.writeAttribute('aria-disabled', true);
} else {
workNotesWrapper.addClassName('is-filled');
proposeBtn.removeClassName('disabled');
proposeBtn.writeAttribute('aria-disabled', false);
}
}
function fetchLocationsByType(type) {
var ga = new GlideAjax('MIM_GetLocationsByType');
ga.addParam('sysparm_name', 'getLocations');
ga.addParam('sysparm_type', type);
ga.getXML(function(response) {
console.log("GlideAjax response:", response);
var locations = JSON.parse(response);
locationSelect.innerHTML = '<option value="">-- Select a location --</option>';
locations.forEach(function(loc) {
var option = document.createElement('option');
option.value = loc.sys_id;
option.textContent = loc.name;
locationSelect.appendChild(option);
});
});
}
impactedArea.addEventListener("change", function() {
var selected = impactedArea.value;
if (selected === "region" || selected === "office") {
locationWrapper.style.display = "block";
fetchLocationsByType(selected);
} else {
locationWrapper.style.display = "none";
locationSelect.innerHTML = '<option value="">-- Select a location --</option>';
}
});
function propose() {
if (!proposeBtn.hasClassName('disabled')) {
var msg = getMessage("Proposed as major incident candidate");
var notes = workNotes.value.trim();
var ia = impactedArea.value;
var loc = locationSelect.value || "";
window.parent.postMessage({
messageType: 'IFRAME_MODAL_MESSAGE_TYPE',
modalAction: 'IFRAME_MODAL_ACTION_CONFIRMED',
modalId: null,
data: {
msg: msg,
workNotes: notes,
impactedArea: ia,
location: loc
}
}, location.origin);
}
}
function close() {
window.location.href = window.location.href + '&sysparm_next_pg=true';
}
global.proposeModal = {
propose: propose,
close: close,
workNotesOnChange: _debounce(workNotesOnChange, 200)
};
})(window);
});
