Hi -
I'm adding a new required field "Incident Commander" to the "Promote Major Incident" ui page (mim_workbench_promote).
I've got the reference field added and working fine in the html, saving the page results in the data being saved just fine, etc.
The one bug I'm having is that the required star isn't visible until after I add DATA into the reference field. (Edit: And if I blank that data, the star goes away!)
Can anyone see what I'm missing?
Note: in both the html and the script, I'm only including portions relevant to the Incident Commander field.
Thanks in advance!
HTML:
<div class="form-group" id="incident-commander-wrapper">
<label class="col-sm-2 control-label" for="mim-promote-incident-commander">
<span mandatory="true" class="required-marker label_description" />
Incident Commander
</label>
<div class="col-sm-12 col-md-6 form-field input_controls">
<div class="is-required">
<g:ui_reference required="required" name="mim-promote-incident-commander" id="mim-promote-incident-commander" table="sys_user" query="roles=itil^ORuser_name=tbd" value="$[assignedUser.sys_id]" displayValue="$[assignedUser.name]" onchange="promoteModal.incidentCommanderOnChange();"/>
</div>
</div>
</div>Catalog Client Script:
(function(global) {
var incidentCommanderModified = false;
var incidentCommander = $("mim-promote-incident-commander");
var incidentCommanderWrapper = $('incident-commander-wrapper');
var promoteBtn = $('mim-promote-button');
incidentCommanderOnChange();
itaocOnChange();
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 incidentCommanderOnChange() {
if (incidentCommanderModified == false) {
incidentCommanderModified = true;
}
if (incidentCommanderModified == true) {
if (!incidentCommander.value.trim()) {
incidentCommanderWrapper.removeClassName('is-filled');
} else {
incidentCommanderWrapper.addClassName('is-filled');
}
}
if (_checkCurrentlyRequiredFields()) {
promoteBtn.removeClassName('disabled');
promoteBtn.writeAttribute('aria-disabled', false);
} else {
promoteBtn.addClassName('disabled');
promoteBtn.writeAttribute('aria-disabled', true);
}
}
function _checkCurrentlyRequiredFields() {
if ( /*workNotesModified==true &&*/ businessImpactModified == true && incidentCommanderModified == true && itaocModified == true) {
return true;
} else {
return false;
}
}
function _promoteRestCall(record) {
var dfd = $j.Deferred();
var api = '/api/sn_major_inc_mgmt/mim/actions/' + window.NOW.MAJOR_INCIDENT_WORKBENCH.sys_id;
var data = {
action: 'PROMOTE',
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();
}
function promote() {
getMessage("Promoted to a major incident", function(msg) {
var updateWorkNotes = msg + "\n" + workNotes.value.trim();
if (!promoteBtn.hasClassName('disabled')) {
if (window.NOW.MAJOR_INCIDENT_WORKBENCH) {
var record = {};
record.work_notes = updateWorkNotes;
record.business_impact = businessImpact.value;
record.u_incident_commander = incidentCommander.value;
record.u_itaoc = itaoc.value;
_promoteRestCall(record).then(function() {
dialog.setPreference('reload', true);
close();
});
} else {
//When UI Page is rendered from Form UI Action
g_form.getControl('work_notes').value = updateWorkNotes;
g_form.setValue('business_impact', businessImpact.value);
g_form.setValue('u_incident_commander', incidentCommander.value);
g_form.setValue('u_itaoc', itaoc.value);
GlideModal.prototype.get('sn_major_inc_mgmt_mim_workbench_promote').destroy();
gsftSubmit(null, g_form.getFormElement(), 'sysverb_mim_accept');
}
}
});
}
function close() {
dialog.destroy();
}
global.promoteModal = {
promote: promote,
close: close,
//workNotesOnChange: _debounce(workNotesOnChange, 200), // Only execute when left idle for 200 ms
businessImpactOnChange: _debounce(businessImpactOnChange, 200), // Only execute when left idle for 200 ms
incidentCommanderOnChange: _debounce(incidentCommanderOnChange, 200), // Only execute when left idle for 200 ms
itaocOnChange: _debounce(itaocOnChange, 200) // Only execute when left idle for 200 ms
};
})(window);
Hi Rita,
Please post the entire Client script. I am unable to reproduce this (adding only Incident Commander) in my PDI with the lines you've included, and there are lines and blocks here that were already in the out of the box version unchanged, so this has been difficult to follow. I can tell you that only by adding the HTML, and the below lines to the Client script, the "Incident Commander" field (by label) appears mandatory, though as I am unable to populate it without some pertinent code, I can't confirm if it appears not mandatory when populated and enables the Promote button. I also added the if (_checkCurrentlyRequiredFields()) { block to the workNotesOnChange function so that the Promote button wouldn't become enabled after only the mandatory Work notes are populated.
var incidentCommanderModified = false;
var incidentCommander = $("mim-promote-incident-commander");
var incidentCommanderWrapper = $('incident-commander-wrapper');
...
//I added this section modeled after the existing currentWorkNotes, hoping to trigger
//incidentCommanderOnChange(), but I didn't dig up an example of a UI Page with a reference field, so I guessed wrong
//plus, I can't populate this field with anything other than typing gibberish into it
//since the reference search icon doesn't work, or any other normal reference field functions
var currentIncidentCommander = dialog.getPreference('ASSIGNED_TO');//trying to use this in place of your custom field
if(currentIncidentCommander) {
incidentCommander.value = currentIncidentCommander;
incidentCommanderOnChange();
}
...
function incidentCommanderOnChange() {
if (incidentCommanderModified == false) {
incidentCommanderModified = true;
}
if (incidentCommanderModified == true) {
if (!incidentCommander.value.trim()) {
incidentCommanderWrapper.removeClassName('is-filled');
} else {
incidentCommanderWrapper.addClassName('is-filled');
}
}
if (_checkCurrentlyRequiredFields()) {
promoteBtn.removeClassName('disabled');
promoteBtn.writeAttribute('aria-disabled', false);
} else {
promoteBtn.addClassName('disabled');
promoteBtn.writeAttribute('aria-disabled', true);
}
}
function _checkCurrentlyRequiredFields() {
if ( workNotesModified==true && /*businessImpactModified == true &&*/ incidentCommanderModified == true /*&& itaocModified == true*/) {
return true;
} else {
return false;
}
}
