@Community Alums Tried and tested solution.
Please update the HTML, client script and processing script as below.
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">
<g:ui_form id="transfer_case_dialog">
<script src="scripts/heisenberg/heisenberg_all.js" />
<g:requires name="styles/heisenberg/heisenberg_all.css" includes="true" />
<j:set var="jvar_sys_id" value="${sysparm_sys_id}" />
<j:set var="jvar_table_name" value="${sysparm_table_name}" />
<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"></meta></head></html>
<g:evaluate var="jvar_transfer_methods" jelly="true" object="true">
var sysId = RP.getParameterValue('sysparm_sys_id');
var tableName = RP.getParameterValue('sysparm_table_name');
var native_mobile = RP.getParameterValue('native_mobile');
var transferMethods = hr_TransferCase.getTransferMethods(tableName, sysId);
var oneTransferMethod = transferMethods.length == 1;
transferMethods;
</g:evaluate>
<g:evaluate var="jvar_display_value" jelly="true" object="true">
var sysId = RP.getParameterValue('sysparm_predicted_value');
var gr = new GlideRecord('sn_hr_core_service');
var displayValue;
if(gr.get(sysId)){
displayValue = gr.name;
}
displayValue;
</g:evaluate>
<g:evaluate jelly="true">
var subjectPerson = jelly.sysparm_subject_person;
var services = new sn_hr_core.hr_CaseCreation().getServicesForUser(subjectPerson || '', true);
var servicesString = JSON.stringify(services);
</g:evaluate>
<script>
var services = '${JS:servicesString}';
var native_mobile = '${JS:native_mobile}';
</script>
<style>
.form-control.select2-offscreen {
visibility: hidden!important;
}
</style>
<div class="notification notification-warning">
<span class="notification-icon icon-alert"></span>
<span>
${gs.getMessage("Warning: Transferring a case closes all related child cases or tasks.")}
</span>
</div>
<div style="margin-bottom:10px">
<div class="col-md-12">
<j:if test = "${oneTransferMethod}" >
<p style="font-size: 15px">${gs.getMessage("Select the new HR service for this case.")}</p>
</j:if>
<j:if test = "${!oneTransferMethod}">
<p style="font-size: 15px">${gs.getMessage("Select the type of transfer for this case.")}</p>
</j:if>
</div>
</div>
<div class="form-horizontal">
<j:if test = "${oneTransferMethod}">
<input type="hidden" id="transfer_type" name="transfer_type" value="${transferMethods[0].type}" aria-hidden="true"></input>
</j:if>
<j:if test = "${!oneTransferMethod}">
<div class="vsplit col-md-11 form-group" style="margin-left:0px;margin-right:0px">
<div class="col-xs-3 col-md-5 text-right" style="padding-left:3px">
<g:form_label for="transfer_type">
${gs.getMessage("Transfer type")}
</g:form_label>
</div>
<div class="col-xs-9 col-md-7" style="padding-left:3px;padding-right:30px">
<select class="form-control" id="transfer_type" name="transfer_type">
<j:forEach items="${jvar_transfer_methods}" var="jar_method">
<g:evaluate var="jvar_label" expression="hr_TransferCase.getDescription(jelly.jar_method)" jelly="true"/>
<g:evaluate var="jvar_value" expression="jelly.jar_method.type" jelly="true"/>
<option value="${jvar_value}">${jvar_label}</option>
</j:forEach>
</select>
</div>
</div>
</j:if>
<div class="vsplit col-md-11 form-group" style="margin-left:0px;margin-right:0px">
<div class="col-xs-3 col-md-5 text-right" style="padding-left:3px">
<g:form_label for="service_select">
${gs.getMessage("New HR Service")}
</g:form_label>
</div>
<div class="col-xs-9 col-md-7" style="padding-left: 3px;padding-right: 30px">
<input id="service_input" class="select2 form-control"/>
</div>
</div>
<div class="vsplit col-md-11 form-group" style="margin-left:0px;margin-right:0px">
<div class="col-xs-3 col-md-5 text-right" style="padding-left:3px">
<g:form_label for="work_note" class="required">
${gs.getMessage("Work Notes")}
</g:form_label>
</div>
<div class="col-xs-9 col-md-7" style="padding-left: 3px;padding-right: 30px">
<input type="text" id="work_note_input" class="form-control" required="true"/>
</div>
</div>
</div>
<footer id="okCancel" class="modal-footer">
<input type="hidden" id="work_notes" name="work_notes" value="" aria-hidden="true"></input>
<input type="hidden" id="task_sys_id" name="task_sys_id" value="${sysparm_sys_id}" aria-hidden="true"></input>
<input type="hidden" id="task_table_name" name="task_table_name" value="${sysparm_table_name}" aria-hidden="true"></input>
<input type="hidden" id="predicted_value" name="predicted_value" value="${sysparm_predicted_value}" aria-hidden="true"></input>
<input type="hidden" id="predicted_display_value" name="predicted_display_value" value="${jvar_display_value}" aria-hidden="true"></input>
<input type="hidden" id="selected_service" name="selected_service" value="" aria-hidden="true"></input>
<input type="hidden" id="native_mobile" name="native_mobile" value="${native_mobile}" aria-hidden="true"></input>
<button onclick="return submitCancel();" id="cancel" class="btn btn-default">
${gs.getMessage('Cancel')}
</button>
<button id="ok" class="btn btn-primary" onclick="return submitOk(); ">
${gs.getMessage('Ok')}
</button>
</footer>
</g:ui_form>
<style>
.required:before {
content:"* ";
color: red;
}
</style>
</j:jelly>
Client script:
var serviceCategories = JSON.parse(services);
addModalAccessibilityKeyListener();
function addModalAccessibilityKeyListener() {
var TAB_KEY_CODE = 9;
document.onkeydown = function(event){
if (event.which !== TAB_KEY_CODE)
return;
var $focusable = $j("#sn_hr_core_Transfer\\ Case .modal-dialog :focusable");
var firstFocusElement = $focusable[0];
var lastFocusElement = $focusable[$focusable.length -1];
if (!event.shiftKey && event.target === lastFocusElement) {
firstFocusElement.focus();
event.preventDefault();
} else if (event.shiftKey && event.target === firstFocusElement) {
lastFocusElement.focus();
event.preventDefault();
}
};
}
var sanitizeDisplay = function(text) {
return $j("<div>").html(text).html();
};
var localPageSize = 50;
var predictedservice = $j("#predicted_value").val();
// Moving the select2 properties to the variable config, so that we can dynamically populate placeholder if no initial selection needed
var config = {
// Use AJAX functions for local pagination
allowClear: true,
ajax: {
quietMillis: 250,
data: function(searchTerm, page) {
return {
term: searchTerm,
page: page-1
};
},
transport: function(response) {
var q = response.data;
var results = [];
var total = -1;
var start = q.page * localPageSize;
var end = (q.page + 1) * localPageSize;
for (var i = 0; i < serviceCategories.length; i++) {
var children = serviceCategories[i].children.filter(function(opt) {
var matched = !q.term || opt.display.toLowerCase().indexOf(q.term.toLowerCase()) >= 0 || (opt.parent && opt.parent.toLowerCase().indexOf(q.term.toLowerCase()) >= 0);
if (matched) {
total++;
if (total >= start && total < end) // Option within page bounds
return matched;
return false;
}
return false;
});
if (children.length > 0) {
results.push({
display: serviceCategories[i].display,
children: children
});
}
}
response.success.apply(this, [{
results: results,
more: total > end
}]);
return true;
},
// Specify how data returned should be processed.
results: function(response, page) {
return response;
}
},
formatSelection: function(item) {
return sanitizeDisplay(item.display);
},
formatResult: function(item) {
return sanitizeDisplay(item.display);
},
id: function(item) {
return item.sys_id;
},
initSelection: function (element, callback) {
var serviceFormId = 'sys_display.' + g_form.getTableName() + '.hr_service';
var displayValue = g_form.getElement(serviceFormId).value;
var predictedservice = $j("#predicted_value").val();
var predictedDisplayValue = $j("#predicted_display_value").val();
callback(
{
sys_id : predictedservice? predictedservice: g_form.getValue('hrService'),
display: predictedDisplayValue? predictedDisplayValue: displayValue
}
);
}
};
// Adding the place holder to the select2 if there is no need for the initial display value
if(!$j("#predicted_value").val()){
config['placeholder'] = sanitizeDisplay('${gs.getMessage("Select a service")}')
}
// Service input select2
$j("#service_input").select2(config);
var submitBtn = $j("#ok");
$j("#service_input").on("change", function(e) {
submitBtn.attr("disabled", !e.target.value);
});
// Disabling the button incase there is no initSelection
if(!$j("#predicted_value").val()) {
$j("#service_input").trigger('change');
}
var isMobile = native_mobile;
if(isMobile)
$j("#cancel").hide();
function submitCancel() {
GlideDialogWindow.get().destroy();
return false;
}
var submittedTransfer = false;
function submitOk() {
if (submittedTransfer)
return false;
submittedTransfer = true;
if(predictedservice && !$j("#service_input").select2('val')){
$j("#selected_service").val(predictedservice);
} else{
$j("#selected_service").val($j("#service_input").select2('val'));
}
if($j("#work_note_input").val()){
$j("#work_notes").val($j("#work_note_input").val());
}
return true;
}
Processing script:
(function(_this) {
var originalTask = new GlideRecord(task_table_name);
if (!originalTask.get(task_sys_id)) {
gs.addErrorMessage(gs.getMessage("Could not find original case"));
return;
}
originalTask.work_notes = work_notes;
originalTask.setWorkflow(false);
originalTask.autoSysFields(false);
originalTask.update();
var transferredToCaseID = originalTask.getValue('transferred_to');
var recordClassName = hr.TABLE_CASE;
if (transferredToCaseID) {
gs.addErrorMessage(gs.getMessage("Case was previously transferred. Check State, HR service and case Number for accuracy."));
} else {
var newCase = hr_TransferCase.performSelectedTransfer(originalTask, transfer_type, {'selected_service': selected_service});
transferredToCaseID = newCase.getUniqueValue();
recordClassName = newCase.getRecordClassName();
}
var is_mobile = native_mobile;
if (is_mobile)
response.sendRedirect("/mesp?id=me_order_status&sys_id="+transferredToCaseID+"&table="+recordClassName+"&is_new_order=true");
else
response.sendRedirect(recordClassName+".do?sysparm_query=sys_id=" + transferredToCaseID);
})(this);
Please mark as correct answer if this solves your issue.
Please mark the answer as correct or helpful based on impact
ServiceNow Community Rising Star, Class of 2023
