如何用OnSubmit客户端脚本实现ServiceNow自定义弹窗与新建任务？

一、配置触发用的UI Action #

1. 进入System Definition > UI Actions，新建UI Action：
   • 名称：自定义为“创建关联任务”（或其他你需要的名称）
   • 关联表：选择你要添加按钮的主表（比如Incident）
   • Action name：设置唯一标识，如create_related_task
   • 勾选Client，将OnClick设置为触发函数showCustomDialog()
   • 根据场景勾选Form button或List button
   • 不要勾选Submit，提交逻辑将由客户端脚本控制

二、创建自定义对话框UI页面（可选，用于灵活布局） #

如果需要自定义字段布局，新建UI Page：

1. 进入System UI > UI Pages，新建UI Page：
   • 名称：custom_task_dialog
   • HTML内容：

     <div class="modal-body">
       <div class="form-group">
         <label>任务描述</label>
         <textarea id="task_description" class="form-control"></textarea>
       </div>
       <div class="form-group">
         <label>优先级</label>
         <select id="task_priority" class="form-control">
           <option value="1">高</option>
           <option value="2">中</option>
           <option value="3">低</option>
         </select>
       </div>
       <!-- 按需添加其他incident_task字段 -->
     </div>
     <div class="modal-footer">
       <button class="btn btn-default" onclick="GlideModal.prototype.get('custom_task_dialog').destroy()">取消</button>
       <button class="btn btn-primary" onclick="createNewTask()">确认</button>
     </div>
     

   • Client Script内容：

     // 初始化对话框字段（从关联的incident_task获取默认值）
     function initDialog() {
       // 替换为实际字段名，示例从当前表单获取关联的incident_task描述
       var taskDesc = g_form.getValue('incident_task_description');
       if (taskDesc) {
         document.getElementById('task_description').value = taskDesc;
       }
     }
     window.onload = initDialog;
     

三、编写客户端脚本处理对话框与提交逻辑 #

在UI Action的Client script区域添加以下代码：

// 弹出自定义对话框
function showCustomDialog() {
  var modal = new GlideModal('custom_task_dialog', false, 500);
  modal.setTitle('创建新任务');
  modal.render();
}

// 确认后创建新记录
function createNewTask() {
  // 获取对话框输入值
  var desc = document.getElementById('task_description').value;
  var priority = document.getElementById('task_priority').value;
  
  // 必填字段验证
  if (!desc) {
    alert('请填写任务描述');
    return;
  }
  
  // 通过GlideAjax调用服务器端脚本创建记录
  var ga = new GlideAjax('CreateTaskAjax');
  ga.addParam('sysparm_name', 'createNewTask');
  ga.addParam('sysparm_description', desc);
  ga.addParam('sysparm_priority', priority);
  ga.addParam('sysparm_incident_id', g_form.getUniqueValue()); // 关联主记录ID
  
  ga.getXMLAnswer(function(response) {
    if (response === 'success') {
      alert('任务创建成功');
      GlideModal.prototype.get('custom_task_dialog').destroy();
      g_form.refresh(); // 刷新表单展示新任务
    } else {
      alert('任务创建失败：' + response);
    }
  });
}

四、编写服务器端脚本处理记录创建 #

创建可客户端调用的Script Include：

1. 进入System Definition > Script Includes，新建Script Include：
   • 名称：CreateTaskAjax
   • 勾选Client callable
   • Script内容：

     var CreateTaskAjax = Class.create();
     CreateTaskAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
       createNewTask: function() {
         // 获取客户端传递的参数
         var desc = this.getParameter('sysparm_description');
         var priority = this.getParameter('sysparm_priority');
         var incidentId = this.getParameter('sysparm_incident_id');
         
         // 创建incident_task记录
         var task = new GlideRecord('incident_task');
         task.initialize();
         task.description = desc;
         task.priority = priority;
         task.incident = incidentId; // 关联主记录
         // 按需设置其他必填字段
         
         var taskId = task.insert();
         return taskId ? 'success' : '插入记录失败';
       },
       
       type: 'CreateTaskAjax'
     });
     

关键注意事项 #

• 确保所有字段名、表名与你的ServiceNow实例一致
• 若不需要复杂布局，可直接用confirm()简化对话框，但自定义UI Page支持更丰富的交互
• 服务器端脚本必须勾选Client callable才能被GlideAjax调用
• 可根据需求添加更多字段验证、错误处理逻辑

内容的提问来源于stack exchange，提问作者sravya chipilla