ServiceNow UI Action GlideModal弹窗缺失Ok/Cancel按钮求助

问题描述 #

在ServiceNow中开发「Request Info」UI Action时，弹窗可正常渲染，但OK和Cancel按钮完全缺失，浏览器控制台报错提示addDecoration方法不存在，且无法找到按钮DOM元素。

原代码 #

function checkawaitingtype() {
    if (typeof window === 'undefined') {
        updateticket();
    } else {
        var myModal = new GlideModal('awaiting_info_modal', false);
        myModal.setTitle('Provide Awaiting Info Details');
        // Fetch options for the dropdown from the u_awaiting_info_reason field
        var awaitingReasonOptions = getAwaitingReasonOptions(); // Implement this function
        var modalBody = '<div>' +
            '<label for="awaiting_reason">Awaiting Info Reason</label>' +
            '<select id="awaiting_reason" style="width: 100%;">' +
            '<option value="">Select Awaiting Info Reason</option>';
        // Populate dropdown options dynamically
        awaitingReasonOptions.forEach(function (option) {
            modalBody += '<option value="' + option.value + '">' + option.label + '</option>';
        });
        modalBody += '</select>' +
            '<label for="comments" style="margin-top: 10px;">Additional Comments</label>' +
            '<textarea id="comments" rows="4" style="width: 100%;"></textarea>' +
            '</div>';
        myModal.setBody(modalBody, false, false);
        
        myModal.addDecoration({
            text: 'OK',
            color: 'primary',
            id: 'ok_button'
        });
        myModal.addDecoration({
            text: 'Cancel',
            color: 'secondary',
            id: 'cancel_button'
        });
        var okFunction = function () {
            var awaiting_reason = document.getElementById('awaiting_reason').value;
            var comments = document.getElementById('comments').value;
            if (awaiting_reason === '') {
                alert('Please select an awaiting info reason');
            } else if (comments === '') {
                alert('Please specify details in comments');
            } else {
                // Populate the Awaiting Info Reason field
                g_form.setValue('u_awaiting_info_reason', awaiting_reason);
                g_form.setValue('comments', comments);
                g_form.setDisplay('u_awaiting_info_reason', true);
                g_form.setMandatory('u_awaiting_info_reason', true);
                g_form.setMandatory('comments', true);
                gsftSubmit(null, g_form.getFormElement(), 'requestMoreInformation');
                myModal.destroy();
            }
        };
        var cancelFunction = function () {
            myModal.destroy();
        };
        document.getElementById('ok_button').onclick = okFunction;
        document.getElementById('cancel_button').onclick = cancelFunction;
        myModal.render();
    }
}
function updateticket() {
    new global.StateFlow().processFlow(current, '9a028a63c3123100d6d210c422d3ae11', 'manual');
    action.setRedirectURL(current);
}
// Implement this function to fetch options from the u_awaiting_info_reason field
function getAwaitingReasonOptions() {
    // Replace with your logic to retrieve options (e.g., from a REST API or predefined list)
    return [
        { value: '1', label: 'Awaiting Contact' },
        { value: '2', label: 'Awaiting Change' },
        { value: '3', label: 'Awaiting Problem' },
        { value: '4', label: 'Awaiting Vendor' }
        // Add more options as needed
    ];
}

报错原因 #

1. 错误使用addDecoration方法：ServiceNow的GlideModal对象没有addDecoration方法，这是导致按钮无法创建的核心原因。
2. DOM元素获取时机错误：在myModal.render()之前尝试获取按钮DOM元素，此时按钮尚未被渲染到页面中，导致document.getElementById返回null，触发后续报错。

修复后的代码 #

function checkawaitingtype() {
    if (typeof window === 'undefined') {
        updateticket();
    } else {
        var myModal = new GlideModal('awaiting_info_modal', false);
        myModal.setTitle('Provide Awaiting Info Details');
        
        // 构建弹窗内容
        var awaitingReasonOptions = getAwaitingReasonOptions();
        var modalBody = '<div>' +
            '<label for="awaiting_reason">Awaiting Info Reason</label>' +
            '<select id="awaiting_reason" style="width: 100%;">' +
            '<option value="">Select Awaiting Info Reason</option>';
        
        awaitingReasonOptions.forEach(function (option) {
            modalBody += '<option value="' + option.value + '">' + option.label + '</option>';
        });
        
        modalBody += '</select>' +
            '<label for="comments" style="margin-top: 10px;">Additional Comments</label>' +
            '<textarea id="comments" rows="4" style="width: 100%;"></textarea>' +
            '</div>';
        
        myModal.setBody(modalBody, false, false);

        // 使用GlideModal原生addAction方法添加按钮
        myModal.addAction('OK', function() {
            var awaiting_reason = document.getElementById('awaiting_reason').value;
            var comments = document.getElementById('comments').value;
            
            if (!awaiting_reason) {
                alert('Please select an awaiting info reason');
                return;
            }
            if (!comments.trim()) {
                alert('Please specify details in comments');
                return;
            }
            
            // 填充表单字段
            g_form.setValue('u_awaiting_info_reason', awaiting_reason);
            g_form.setValue('comments', comments);
            g_form.setDisplay('u_awaiting_info_reason', true);
            g_form.setMandatory('u_awaiting_info_reason', true);
            g_form.setMandatory('comments', true);
            
            gsftSubmit(null, g_form.getFormElement(), 'requestMoreInformation');
            myModal.destroy();
        }, 'btn btn-primary');

        myModal.addAction('Cancel', function() {
            myModal.destroy();
        }, 'btn btn-default');

        myModal.render();
    }
}

function updateticket() {
    new global.StateFlow().processFlow(current, '9a028a63c3123100d6d210c422d3ae11', 'manual');
    action.setRedirectURL(current);
}

function getAwaitingReasonOptions() {
    return [
        { value: '1', label: 'Awaiting Contact' },
        { value: '2', label: 'Awaiting Change' },
        { value: '3', label: 'Awaiting Problem' },
        { value: '4', label: 'Awaiting Vendor' }
    ];
}

关键修改点 #

1. 替换按钮创建方法：用GlideModal.addAction()替代不存在的addDecoration()，该方法是ServiceNow官方支持的添加弹窗按钮的方式，参数为：按钮文本、点击回调函数、按钮CSS类名。
2. 内置事件逻辑：将OK和Cancel按钮的点击逻辑直接传入addAction，无需手动获取DOM元素绑定事件，避免了DOM未加载的问题。
3. 优化输入校验：调整了空值校验逻辑，使用!awaiting_reason和!comments.trim()更严谨。

验证步骤 #

1. 将修复后的代码替换原UI Action的脚本内容。
2. 保存UI Action并刷新表单页面。
3. 触发「Request Info」动作，确认弹窗显示OK和Cancel按钮，且按钮功能正常。

内容的提问来源于stack exchange，提问作者Mohamed Mahmoud