It's a UI page popup which displays when we click on a UI action
UI Page HTML script:
<?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:evaluate>
var incSysId = RP.getParameterValue('sysparm_incident_id');
var isWorkspace = (RP.getParameterValue('sysparm_workspace') == 'true');
var refQualString = '';
var inc = new GlideRecord('incident');
if (inc.get(incSysId)) {
refQualString = new global.DomainGroups().getTheGroups(inc);
}
</g:evaluate>
<html>
<!-- Hidden inputs so the client script can read in Workspace -->
<input type="hidden" id="sysparm_incident_id" value="${incSysId}" />
<input type="hidden" id="sysparm_workspace" value="${isWorkspace}" />
<div class="form-vertical">
<div class="modal-row">
<label for="reason" class="control-label">
Reason <span mandatory="true" class="required-marker"></span>
</label>
<!-- oninput to control OK button state -->
<g:textarea id="reason" class="form-control" required="true" oninput="reasonOnChange()"></g:textarea>
</div>
</div>
<div class="modal-row">
<div class="form-group">
<label for="proposal_group" class="control-label">Proposed Assignment Group</label>
<g:ui_reference id="proposal_group" name="proposal_group" table="sys_user_group" mandatory="true" query="${refQualString}" />
</div>
</div>
<script>
var config = {
workspace: '${JS_STRING:RP.getParameterValue('sysparm_workspace')}' == 'true'
};
var iframeMsgHelper = (function() {
function createPayload(action, modalId, data) {
return {
messageType: 'IFRAME_MODAL_MESSAGE_TYPE',
modalAction: action,
modalId: modalId,
data: (data ? data : {})
};
}
function pm(window, payload) {
if (window.parent === window) {
console.warn('Parent is missing. Is this called inside an iFrame?');
return;
}
window.parent.postMessage(payload, location.origin);
}
function IFrameMessagingHelper(window) {
this.window = window;
this.src=location.href;
this.messageHandler = this.messageHandler.bind(this);
this.window.addEventListener('message', this.messageHandler);
}
IFrameMessagingHelper.prototype.messageHandler = function(e) {
if (e.data.messageType !== 'IFRAME_MODAL_MESSAGE_TYPE' || e.data.modalAction !== 'IFRAME_MODAL_ACTION_INIT') {
return;
}
this.modalId = e.data.modalId;
};
IFrameMessagingHelper.prototype.confirm = function(data) {
var payload = createPayload('IFRAME_MODAL_ACTION_CONFIRMED', this.modalId, data);
pm(this.window, payload);
};
IFrameMessagingHelper.prototype.cancel = function(data) {
var payload = createPayload('IFRAME_MODAL_ACTION_CANCELED', this.modalId, data);
pm(this.window, payload);
};
return new IFrameMessagingHelper(window);
}());
</script>
<div class="pull-right form-group" id="dialog-btns">
<g:dialog_buttons_ok_cancel ok="return submitRejectOwnership()" cancel="return cancelModal()" />
</div>
</html>
</j:jelly>
UI page client script:
function validateReasonTextLength(value) {
var trimmedValue = (value).trim();
var wordCount = trimmedValue.split(/\s+/).filter(Boolean).length;
return trimmedValue.length >= 30 && wordCount >= 5;
}
function reasonOnChange() {
var reasonEl = document.getElementById('reason');
var okBtn = document.getElementById('ok_button');
var hasText = (reasonEl.value).trim().length > 0;
if (hasText) {
okBtn.classList.remove('disabled');
okBtn.setAttribute('aria-disabled', 'false');
} else {
okBtn.classList.add('disabled');
okBtn.setAttribute('aria-disabled', 'true');
}
}
function submitRejectOwnership() {
var reason = document.getElementById('reason').value;
var proposal = document.getElementById('proposal_group').value;
// Client-side validation (30 characters & 5 words)
if (!validateReasonTextLength(reason)) {
alert('Reason must be at least 30 characters and contain at least 5 words');
return false;
}
var incId;
if (config.workspace) {
// Workspace: read from hidden input
incId = document.getElementById('sysparm_incident_id').value;
} else {
incId = GlideDialogWindow.get().getPreference('sysparm_incident_id');
}
var rejectOwnership = new GlideAjax('global.RejectOwnershipProcessor');
rejectOwnership.addParam('sysparm_name', 'processRejectOwnership');
rejectOwnership.addParam('sysparm_incidentSysId', incId);
rejectOwnership.addParam('sysparm_reason', reason);
rejectOwnership.addParam('sysparm_proposal', proposal);
rejectOwnership.getXMLAnswer(function(answer) {
if (answer === "Success") {
if (config.workspace) {
iframeMsgHelper.confirm({
status: 'Success'
});
} else {
GlideDialogWindow.get().destroy();
g_form.save();
}
}
});
return false;
}
function cancelModal() {
if (config.workspace) {
iframeMsgHelper.cancel({
status: 'cancel'
});
} else {
GlideDialogWindow.get().destroy();
}
return false;
}
I need to disable the okay button until the 'reason' question is entered with any value, if any value entered in reason field and if the user clicks on the okay button it should validate the character limitation. So, here the reason question in the UI page should be mandatory
I have added the logic to disable the okay button until any value entered in 'reason' question but it's not working. Able to click on okay button and it's validating the character limitation
