ServiceNow CAD项目实战详细解析

我要学c加加！2025-07-06 8:31

目录

前言：

项目需求：

项目设计：

​项目实施

前言：

这个项目的话主要是涉及一些代码的编写（UI page,script include ,UI action里的代码从而实现在图形页面里新增狗和用户选择领养狗的时候会有邮件通知adoption center）,对于表格的建立的话就会交给用户自己去解决，不会的可以参考我的另一篇文章
https://blog.csdn.net/m0_65018431/article/details/144238529?spm=1001.2014.3001.5501

同时本文章参照视频链接如下：
https://www.udemy.com/course/servicenow-201-development/learn/lecture/7606184#overview

项目需求：

我们会利用ServiceNow做一个发布和领养狗的界面

具体功能如下：

作为用户：

1.可以查看所有的可以领养的狗

2.有这个能力可以发送一个领养请求到领养中心去

作为领养中心

1.可以发布新的狗

2.有能力接受关于新的领养请求

3.有能力去编辑狗的信息

项目设计：

1.首先的话会做两张表

Dogs ,Adoption Centers

2.然后的话做一个的UI Page用于新增狗

3.在狗的form视图里面新增一个领养狗的按钮

4.一个事件event

5.邮件通知

表的设计：

项目实施

详细步骤

首先来到这个创建应用的界面

我们创建好一个名为fetch的应用，不需要tables ,roles等等

这里注意一下如果我们直接在创建应用的地方创建表格是会有很多限制的，比如说选不到image这个类型，所以我推荐就是只建立应用，后面自己建立表格

2.创建两个表格

注意因为我们会勾选auto number的选项，所以的话不需要手动创建number的字段只需要用系统提供的就好了，number字段会是readonly哦


3.完善表格里面的字段

比如说一些choice里面的list之类的等等（其他的choice你可以不加，但是Dogs表格里面的status一定要加上一个active的选项，因为后面的话会用到）

4.然后的话配置配置一下表单视图

这一步只是为了美观可以不做

以上4步都很简单和常规

第5步

Create UI Page

我们还是在studio里面点击create application file,输入ui page

我们来到UI page的界面

在html内容框输入以下代码

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">
    <h1>Add a new dog</h1>
    <form class="form-horizontal">
        <div class="form-group">
            <label for="dogName" class="col-sm-2 control-label">Name of dog:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="dogName" />
            </div>
        </div>
        <div class="form-group">
            <label for="dogAge" class="col-sm-2 control-label">Age of dog</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="dogAge" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input id="dogShots" type="checkbox" /> Shots
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input id="dogNeutered" type="checkbox" /> Neutered
                    </label>
                </div>
            </div>
        </div>
        <button type="button" id="addDog" class="btn btn-default">Add Dog</button>
        <div id="msg"></div>
    </form>
</j:jelly>

代码解释：

简单的来讲就是定义了两个文本框用来输入name和age，两个checkbox勾选框用来接受shots和neutered的状态，一个button按钮用于后续的触发函数

然后的话在client script内容框留下如下代码

javascript 复制代码 
jQuery("#addDog").click(function(e) {
    e.preventDefault();
    
    var ga = new GlideAjax("fetchUtils");
    ga.addParam("sysparm_name", "createDog");
    ga.addParam("sysparm_dog_name", jQuery("#dogName").val());
    ga.addParam("sysparm_dog_age", jQuery("#dogAge").val());
    ga.addParam("sysparm_dog_neutered", jQuery("#dogNeutered").is(":checked"));
    ga.addParam("sysparm_dog_shots", jQuery("#dogShots").is(":checked"));
    ga.getXML(function(response) {
        var answer = response.responseXML.documentElement.getAttribute("answer");
        var parts = answer.split("|");
        jQuery("#msg").html(
            '<p class="text-success">' + parts[0] + ' has successfully been created. Dog ID: ' + parts[1] + 
            '</p><br/><a href="' + parts[2] + '">View new dog</a>'
        );
        // 清空表单
        jQuery("#dogName, #dogAge").val("");
        jQuery("#dogShots, #dogNeutered").prop("checked", false);
    });
});

代码解释：

这6行代码是调用这个"fetchUtils" script include里面的createDog,并且给这个函数传递参数

javascript 复制代码 
    var ga = new GlideAjax("fetchUtils");
    ga.addParam("sysparm_name", "createDog");
    ga.addParam("sysparm_dog_name", jQuery("#dogName").val());
    ga.addParam("sysparm_dog_age", jQuery("#dogAge").val());
    ga.addParam("sysparm_dog_neutered", jQuery("#dogNeutered").is(":checked"));
    ga.addParam("sysparm_dog_shots", jQuery("#dogShots").is(":checked"));

然后的话我们是会获取到"fetchUtils" script include里面的createDog这个方法运行成功的返回值

javascript 复制代码 
 ga.getXML(function(response) {
        var answer = response.responseXML.documentElement.getAttribute("answer");
        var parts = answer.split("|");
        jQuery("#msg").html(
            '<p class="text-success">' + parts[0] + ' has successfully been created. Dog ID: ' + parts[1] + 
            '</p><br/><a href="' + parts[2] + '">View new dog</a>'
        );
        // 清空表单
        jQuery("#dogName, #dogAge").val("");
        jQuery("#dogShots, #dogNeutered").prop("checked", false);
    });
  1. 获取服务器响应
  • getXML() 发送 AJAX 请求到服务器
  • function(response) 是回调函数，当服务器返回数据时执行
  • response 包含服务器返回的 XML 响应
  1. 提取返回值
  • ServiceNow 的 GlideAjax 返回的数据是 XML 格式
  • 从 XML 中获取 "answer" 属性的值
  • 这个值来自 Script Include 的 return 语句
  1. 分割返回值

  • 用 | 分割字符串

  • parts[0] = 狗的名字 (如 "Max")

  • parts[1] = 狗的编号 (如 "DOG0001007")

  • parts[2] = 查看链接 (如 "https://...")

    1. 显示成功消息
      jQuery("#msg").html( '<p class="text-success">' + parts[0] + ' has successfully been created. Dog ID: ' + parts[1] + '</p><br/><a href="' + parts[2] + '">View new dog</a>' );

    2. 清空表单
      jQuery("#dogName, #dogAge").val(""); jQuery("#dogShots, #dogNeutered").prop("checked", false);

  • 清空文本框：将 dogName 和 dogAge 的值设为空

  • 取消勾选：将 dogShots 和 dogNeutered 复选框设为未选中

  • 为下次输入做准备

然后我们转到script include里面去

记得勾上client callable

注意代码里面的表名要改成自己的

javascript 复制代码 
var fetchUtils = Class.create();
fetchUtils.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {
  createDog: function () {
    var dogName = this.getParameter("sysparm_dog_name");
    var dogAge = this.getParameter("sysparm_dog_age");
    var dogShots = this.getParameter("sysparm_dog_shots");
    var dogNeutered = this.getParameter("sysparm_dog_neutered");

    //insert dog
    var newDog = new GlideRecord("表名，如x_1581062_fetch_dogs");
    newDog.newRecord();
    newDog.name = dogName;
    newDog.age = dogAge;

    if (dogShots) {
      newDog.shots = true;
    }
    if (dogNeutered) {
      newDog.neutered = true;
    }

    var dogNumber = newDog.number.getDisplayValue();
    var sysID = newDog.insert();
    var dogLink = newDog.getLink();

    //return values
    return dogName + "|" + dogNumber + "|" + dogLink;
  },

 
  type: "fetchUtils",
});

代码解释：

下面这段代码先是获取到name,age,shots,neutered等等信息存到 dogName这些变量里面去

然后的话

再把这些变量赋给我们建立的record里面去，然后我们获取到这个新建狗的record的number,sysId,指向的链接link等等，最后的话再返回给客户端（客户端是用户使用的浏览器，主要是负责处理前端页面渲染请求和一些安全性要求不高的，而script include属于官方服务器后端，我们没有权限进去也无法篡改数据，会用于做数据的处理，增删改查等等）

javascript 复制代码 
 var dogName = this.getParameter("sysparm_dog_name");
    var dogAge = this.getParameter("sysparm_dog_age");
    var dogShots = this.getParameter("sysparm_dog_shots");
    var dogNeutered = this.getParameter("sysparm_dog_neutered");

    //insert dog
    var newDog = new GlideRecord("表名，如x_1581062_fetch_dogs");
    newDog.newRecord();
    newDog.name = dogName;
    newDog.age = dogAge;

    if (dogShots) {
      newDog.shots = true;
    }
    if (dogNeutered) {
      newDog.neutered = true;
    }

    var dogNumber = newDog.number.getDisplayValue();
    var sysID = newDog.insert();
    var dogLink = newDog.getLink();

    //return values
    return dogName + "|" + dogNumber + "|" + dogLink;

然后到这里我们实现了一个新增狗的页面

可以在UI Page去测试一下

如果成功的话我们是可以拿到返回的生成狗的number编号的

如图

接下来我们要实现的功能是，用户在dogs表里面点击adopt按钮可以给dogs所属的adoption center发邮件（所以注意要我们adopt的dog是要有所对应的adoption center哦）

流程图如下

  1. UI Action (adoptDog)

↓ (通过 GlideAjax)

  1. Script Include (fetchUtils.createEmailNotification)

↓ (gs.eventQueue)

  1. Event (x_1581062_fetch.adoption_email)

↓ (触发)

  1. Notification

↓ (创建)

  1. Email

我们来到第7步

Create event

在这里搜索选择最下面一个system policy里的

新建一个event registration

suffix为adoption_email

fired by是UI action

table选择none

然后我们来到notification这里
新建一个Adopt Dog Email，table为空就好

然后when to send里面

send when是Event is fired

event Name 是adoption_email

然后的话

who will receive里面吧param1设为收件人

what it will contain里面自己写好模版

比如 received a email from ${event.param2}

然后的话去script include里面补充notifications 的相关方法

最后总代码为

javascript 复制代码 
var fetchUtils = Class.create();
fetchUtils.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {
 createDog: function () {
var dogName = this.getParameter("sysparm_dog_name");
var dogAge = this.getParameter("sysparm_dog_age");
var dogShots = this.getParameter("sysparm_dog_shots");
var dogNeutered = this.getParameter("sysparm_dog_neutered");
//insert dog
var newDog = new GlideRecord("表名");
 newDog.newRecord();
 newDog.name = dogName;
 newDog.age = dogAge;
if (dogShots) {
 newDog.shots = true;
 }
if (dogNeutered) {
 newDog.neutered = true;
 }
var dogNumber = newDog.number.getDisplayValue();
var sysID = newDog.insert();
var dogLink = newDog.getLink();
//return values
return dogName + "|" + dogNumber + "|" + dogLink;
 },
 createEmailNotification: function () {
var adopterEmail = this.getParameter("sysparm_adopter_email");
var adoptionCenter = this.getParameter("sysparm_adoption_center");
var adoptionCenterEmail = "";
var ac = new GlideRecord("表名，如x_1581062_fetch_adoption_center");
 ac.get(adoptionCenter);
 adoptionCenterEmail = ac.email.getDisplayValue();
 gs.eventQueue("表名，如x_1581062_fetch.adoption_email", ac, adoptionCenterEmail, adopterEmail);
return;
 },
 type: "fetchUtils",
});

这里的话就是加了一个新的函数给ui action用

先获取到这两个参数

adopterEmail，adoptionCenter

然后利用adoptionCenter去找 adoptionCenterEmail

然后触发我们刚刚注册的事件

gs.eventQueue("表名", ac, adoptionCenterEmail, adopterEmail);
gs.eventQueue() 是 ServiceNow 的全局 API，用于触发事件

javascript 复制代码 
 createEmailNotification: function () {
var adopterEmail = this.getParameter("sysparm_adopter_email");
var adoptionCenter = this.getParameter("sysparm_adoption_center");
var adoptionCenterEmail = "";
var ac = new GlideRecord("表名");
 ac.get(adoptionCenter);
 adoptionCenterEmail = ac.email.getDisplayValue();
 gs.eventQueue("表名", ac, adoptionCenterEmail, adopterEmail);
return;
 },

然后的话我们来到第9步

回到dog表的视图

右击找到configure ,ui action

填写名字Adopt

取消勾选 show insert

勾选clinet

然后的话

onclick 填写adoptDog()

condition 填写current.status=='active'

还有勾选一个form button

script区填写如下代码

javascript 复制代码 
function adoptDog() {
  var email = prompt("Please enter your email address");
  if (email != "") {
    var ga = new GlideAjax("fetchUtils");
    ga.addParam("sysparm_name", "createEmailNotification");
    ga.addParam("sysparm_adoption_center", g_form.getValue("adoption_center"));
    ga.addParam("sysparm_adopter_email", email);
    ga.getXMLAnswer(ajaxProcessor);
  } else {
    alert("The email address you entered does not appear to be valid.");
  }
}

function ajaxProcessor(answer) {
  alert("Thank you for your request. Someone will be with you shortly.");
}

代码解释:

就是把表单的数据给到scirpt include 的fetchUtils里去处理，同时加一些alert警示语句

然后的话我们就可以把状态调为active后点击adopt按钮来测试了

我们可以在system policy ，event ,event log里面找到相关记录

也可以在system log,emial里面找到相关记录

如

相关推荐
熙云学院1 个月前
ServiceNow培训第1期
低代码·salesforce·servicenow
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03vue数据变化但页面不变04KGG转MP3工具|非KGM文件|解密音频05sqli-labs 靶场 less-8、9、10 第八关到第十关详解：布尔注入，时间注入06扣子开源本地部署教程 丨Coze智能体小白喂饭级指南07干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！08【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致09ChatGPT Agent 完全使用指南：2025年7月最新功能详解10《魔兽世界》提示lua警告的含义及解决方法