如何使用On Change客户端脚本实现指定条件的可交互弹窗

一、现有GlideModal/GlideDialogWindow问题排查 #

• 确认是否正确调用ServiceNow内置组件：GlideModal/GlideDialogWindow需按规范初始化，遗漏参数或依赖会导致内容/按钮渲染失败。
• 检查消息内容格式：URL、邮箱需用标准HTML链接语法包裹，非法字符或未转义内容会阻断渲染。
• 按钮配置需显式绑定：GlideDialogWindow的按钮必须通过addButton方法添加并绑定关闭逻辑，不可省略。

二、正确的GlideModal实现代码（On Change客户端脚本） #

在AI字段的On Change脚本中使用以下代码：

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue === '') {
        return;
    }

    // 获取Change Type字段值，替换为系统实际字段名
    var changeType = g_form.getValue('change_type');

    if (newValue === 'Yes' && changeType === 'Normal') {
        // 构建带可点击链接的弹窗内容
        var modalContent = '<div>' +
            '<p>请查看相关文档：<a href="https://your-internal-guide.com" target="_blank">AI配置指南</a></p>' +
            '<p>如有疑问，请联系：<a href="mailto:ai-support@yourcompany.com">ai-support@yourcompany.com</a></p>' +
            '</div>';

        // 初始化并配置弹窗
        var modal = new GlideModal('glide_modal', false, 500);
        modal.setTitle('AI功能确认');
        modal.setContent(modalContent);
        // 添加确认按钮并绑定关闭事件
        modal.addButton('Acknowledged', function() {
            modal.destroy();
        });
        modal.render();
    }
}

注意事项 #

• 替换change_type为系统中Change Type字段的实际名称。
• 替换示例中的URL和邮箱为业务实际地址。
• glide_modal是ServiceNow内置弹窗模板，无需自定义UI页面。

三、替代方案：原生JS弹窗结合ServiceNow样式 #

若GlideModal仍存在问题，可使用原生JS实现弹窗并套用ServiceNow样式保证界面一致性：

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue === '') {
        return;
    }

    var changeType = g_form.getValue('change_type');
    if (newValue === 'Yes' && changeType === 'Normal') {
        // 创建弹窗容器
        var modalDiv = document.createElement('div');
        modalDiv.className = 'modal-dialog';
        modalDiv.style = 'width: 500px; margin: 10% auto; background: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,0.3);';
        
        // 添加标题
        var title = document.createElement('h3');
        title.textContent = 'AI功能确认';
        title.style = 'margin-top: 0; color: #1f2d3d;';
        
        // 添加内容
        var content = document.createElement('div');
        content.innerHTML = '<p>请查看相关文档：<a href="https://your-internal-guide.com" target="_blank">AI配置指南</a></p>' +
                           '<p>如有疑问，请联系：<a href="mailto:ai-support@yourcompany.com">ai-support@yourcompany.com</a></p>';
        
        // 添加确认按钮
        var button = document.createElement('button');
        button.textContent = 'Acknowledged';
        button.className = 'btn btn-primary';
        button.style = 'margin-top: 15px;';
        button.onclick = function() {
            document.body.removeChild(modalDiv);
            document.body.removeChild(overlay);
        };
        
        // 组装弹窗
        modalDiv.appendChild(title);
        modalDiv.appendChild(content);
        modalDiv.appendChild(button);
        document.body.appendChild(modalDiv);
        
        // 添加背景遮罩
        var overlay = document.createElement('div');
        overlay.style = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9998;';
        document.body.appendChild(overlay);
        modalDiv.style.zIndex = '9999';
    }
}

四、关键注意点 #

• 客户端脚本需设置正确的应用范围，确保能访问目标字段。
• 测试需在表单页面触发字段变更，避免在列表等非表单页面测试导致脚本失效。
• 若使用自定义UI页面作为弹窗内容，需在GlideModal中传入页面名称，而非直接设置HTML内容。

内容的提问来源于stack exchange，提问作者Chitra D