当前位置： 首页 > ds >正文

ServiceNow Portal前端页面实战讲解

ds 2025/7/13 6:22:28

目录

前言：  

Portal  

Homepage

Create my Incidents  

View my incidents  

Profile

Ticket  

前言：  

我们最终实现的是这样的一个自定义页面（HelpNow Portal），用户可以在这个页面新建incident或者查看和自己有关的incidents



项目架构：
Portal是用来给使用的用户做一个门户的，用户可以通过ServiceNow实例名加上Portal的后缀suffix来访问指定页面，Portal的话会绑定一个主页，用户点击主页里的内容会跳转到其他页面

由一个主页面homepage加上
create a new incident 新建incidents
view my incidents 查看和自己有关的incidents
profile 自定义用户主页
ticket 查看incidents的详细信息

那么接下来我会分1个portal和5个pages去完成这个项目

同时感谢本文参考链接
https://www.udemy.com/course/the-complete-guide-to-service-portal-in-servicenow/?couponCode=KEEPLEARNING#overview

作者还有关于CSA和CAD的教程可以帮助你查缺补漏
ServiceNow基础练手项目，入门全解，手把手超详细教程（万字长文，适用于CSA认证考试）_servicenow教程-CSDN博客
 ServiceNow CAD项目实战详细解析-CSDN博客

那让我们开始吧！


Portal



首先的话我们输入portals找到如下的界面


然后的话我们新建一个portal
Tile:HelpNow
URL suffix:hn

然后的话我们来补充homepage,Main menu,Theme这几栏
homepage的话我们在首页输入pages

然后的话新建一个page

按照如图输入Title 和ID
然后去portal里面关联上

然后点击Main Menu这一栏
新建一个 title为HelpNow Menu，剩下的后面再完善

同样的新建一个theme

名字和Header如图所示
不要勾选 Fixed header和Fixed footer

CSS variables代码如下:

$font-family-base: 'Montserrat', sans-serif;$help-now-primary: #20b9ac;
$help-now-secondary: #1d9085;$brand-primary: $help-now-primary;
$brand-success: #1f8476;$panel-bg: #fdfdfd;$navbar-inverse-bg: $help-now-primary;
$navbar-inverse-link-color: white;
$sp-navbar-divider-color: $help-now-secondary;

然后的话我们需要在下面的css includes里面创建两个数据（设置字体和HelpNow的全局样式）



链接如下 https://fonts.googleapis.com/css?family=Montserrat&display=swap

第二个

这里的话Style sheet记得新建一个名为HelpNow Style
如图所示

其中代码为
 

.panel {
background-color: #f7f7f7;
border: none
border-radius: 3px;
box-shadow: none;
}
.panel-default >.panel-heading {
color: #3a3f51;
border-color: $help-now-primary;
}body.padding-top {
padding-top: 0;
}
a.top_icon {
margin-top: 30px;
margin-bottom: 30px;
background: $brand-primary;
color: white;
border-radius: 3px;
}
a.top_icon .fa {color: white;
}
a.top_icon .fa:hover {color: white;
}
.breadcrumbs-container{
margin-bottom: 20px;
}


Homepage

我们首页搜索pages
  


然后我们找到hn_index这个page

点击related links里面的open in designer

首先我们拖两个Continer到右边，然后再拖一个12到上方的container，再拖一个6|6的到下方的Container



然后的我们找到第二个homePage Search

拖动到第一个容器里变成这样

接着搜索icon link

分别拖动到下面容器的左右两个栏里面
然后我们分别点击左右两个icon link的铅笔图片

如图填写




就会变成这样子


然后我们点击home search的蓝色铅笔


按照下图所示填写



接着选中这里最外层的Container点击右上角的灰色铅笔


上传如下的图片

Background style选择cover

点击save，最后homepage就会变成这个样子

然后的话你只需要在浏览器的地址栏找到你的ServiceNow实例的url
如https://dev?????.service-now.com/ 加上你的portal后缀hn就好了
就可以看到这样子的界面



 

Create my Incidents
  

要实现自己创建一个incident的功能，我们需要自定义一个组件，因为系统并没有提供开箱即用的（out of box）的widgets,
我们现在首页搜索到Service Portal Configuration然后点击widget editor


再点击 create a  new widget再按照如下的方式填写


接下来按照我说给的代码分别填写html,clinet script, server script

  

html
 

<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title">Submit an Incident</h4></div><div class="panel-body"><form><div class="form-group"><label for="issue">Issue</label><input type="text"class="form-control"id="issue"placeholder="Sharepoint is down"ng-model="data.newIncident.issue" /></div><div class="form-group"><label for="urgency">Urgency</label><select id="urgency"class="form-control"ng-model="data.newIncident.urgency"><option value="1">High</option><option value="2">Medium</option><option value="3">Low</option></select></div></form></div><div class="panel-footer"><button class="btn btn-success"ng-click="c.submit()">Submit</button></div>
</div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title">{{data.title}}</h4></div><div class="panel-body"><ul class="list-group"><li class="list-group-item"ng-repeat="item in data.items">{{item.number.display_value}}<span class="text-muted"><small>{{item.short_description.display_value}}</small></span></li></ul></div>
</div>

  

client script
  

function (spUtil) {/* widget controller */var c = this;c.submit = function () {// 简单校验：Issue 和 Urgency 必填if (!c.data.newIncident.issue || !c.data.newIncident.urgency) {spUtil.addErrorMessage('Issue and urgency is required.');return;}// 设置服务器动作并提交c.data.action = 'createIncident';c.server.update().then(function () {spUtil.addInfoMessage(c.data.message);});};
}

server script
 

(function () {/* populate the `data` object *//* e.g., data.table = $sp.getValue('table'); */data.title  = options.title  || 'My Incidents';data.fields = options.fields || 'number,short_description,sys_created_on';data.items  = getRecentIncidents();data.newIncident = {issue:   '',urgency: ''};// 前端请求创建工单if (input && input.action === 'createIncident') {createIncident(input.newIncident);data.message = 'An incident has been created';}// ───────── 内部函数 ─────────function createIncident(inc) {var incidentGR = new GlideRecord('incident');incidentGR.newRecord();incidentGR.setValue('caller_id', gs.getUserID());incidentGR.setValue('short_description', inc.issue);incidentGR.setValue('urgency', inc.urgency);incidentGR.insert();}function getRecentIncidents() {var items = [];var incidentGR = new GlideRecord('incident');incidentGR.setLimit(5);incidentGR.orderBy('sys_created_on');incidentGR.query();while (incidentGR.next()) {var obj = {};$sp.getRecordElements(obj, incidentGR, data.fields);items.push(obj);}return items;}
})();

然后点击save
然后的话你只需要在浏览器的地址栏找到你的ServiceNow实例的url
如https://dev?????.service-now.com/后面加上sp?id=create_an_incident.   

https://dev?????.service-now.com/sp?id=create_an_incident来到创建incident的页面
测试后可以再首页搜索incident.list按下回车，点opened排序看到你生成的incidents

接着我们来到
我们现在首页搜索到Service Portal Configuration

然后的话点击designer


  


  点击Add a new Page

输入  




然后进去上面是6｜6
下面是12的布局
分别找breadcrumbs,typeahead Search,create an incident
breadcrumbs,typeahead Search拖到上面的两个栏里面
create an incident拖到下面的栏里面

最后变成这样


我们继续给上面的container加上 parant calss为breadcrumbs-container。

点击最外层的container出现蓝色虚线框然后点击右上角灰色铅笔
  

然后的话我们需要给homepage的icon link链接到这个页面去，这样的话我们首页点击图标才能跳转到创建incidents的页面
  

  首页搜索pages找到hn_index这个页面,

点击open in designer

我们给create a new incidents的icon link链接到这个页面

点击蓝色铅笔，page这栏填上，保存

  

  然后的话我们还希望在homepage的header上面可以显示一个快捷入口，如这里的my incidents（没有很正常，因为我是先做的my incidents的快捷入口，正常就没有我这里只是为了方便理解）

我们找到
点击这里的main menu,点后面的i图标然后等待一会点击open record

在这里的下方的menu items点击new   




点击submit就可以看到header上create an incident的字样



View my incidents
  

  



同样的我们现在首页搜索到Service Portal Configuration
然后的话点击designer
然后create a new page
如图输入

输入




然后进去上面是6｜6
下面是12的布局
分别找breadcrumbs,typeahead Search,data table from instance definition
breadcrumbs,typeahead Search拖到上面的两个栏里面
data table from instance definition拖到下面的栏里面



先首页搜索incident.list


设置如图的搜索条件，然后点击run
接下来你点击all后面的条件然后点击copy query


然后的话点击data table from instance definition右上角蓝色小铅笔
  




按照如图所示的填写就好


我们继续给上面的container加上 parant calss为breadcrumbs-container





然后的话我们还希望在homepage的header上面可以显示一个快捷入口，如这里的my incidents

我们找到
点击这里的main menu,点后面的i图标


在这里的下方的menu items点击new 


新建一个如图所示的item,就可以成功在header上面可以显示一个快捷入口my incidents


最后记得和create my incidents一样去homepage的page designer里面给view my incidents的icon link添加hn_my_incidents的链接

 

Profile

然后的话我们就进行下一个步骤
自定义我们的porfile

同样的我们现在首页搜索到Service Portal Configuration
然后的话点击designer
然后create a new page
如图输入


也是上面是6｜6
下面是12的布局

上面同样是breadcrumbs和typeahead search(同样记得给上面的container加上 parant calss为breadcrumbs-container)
下面是user profile


结果为这个样子

然后的我们还需要做一步就是把点击后出现的系统自带的profile换成自己的profile
首页搜索 page route maps



新建一个record如下

这样子的话我们点击这里的profile就出现的是自定义的页面




  

Ticket

  

然后
同样的我们现在首页搜索到Service Portal Configuration
然后的话点击designer
然后create a new page
如图输入


布局是
上面6|6
下面9｜3｜3｜3（也就是9｜3）的布局
如图所示


上面同样是breadcrumbs和typeahead search(同样记得给上面的container加上 parant calss为breadcrumbs-container)
下面分别拖入
ticket conversation,ticket field,ticket location, ticket attachment

然后的话需要和incident展示出的表格做一个链接
具体方式如下

首页搜索page 然后找到hn_my_incidents

在related links 里面找到open in designer

然后点击data table的蓝色铅笔


然后这里的最下方behavior的 link to this page填写上hn_ticket后保存


然后你就能够在这个界面点击任意incident记录跳转到对应的ticker页面了

http://www.xdnf.cn/news/15346.html

相关文章：

  • GGE Lua 详细教程
  • 【6.1.1 漫画分库分表】
  • c#中生成随机数的三种方法
  • pgsql模板是什么？
  • Kafka——聊聊Kafka的版本号
  • 【理念●体系】从零打造 Windows + WSL + Docker + Anaconda + PyCharm 的 AI 全链路开发体系
  • 1Panel V1 无缝升级到 V2 版本 实现多个 PHP 网站共享一个容器
  • Spring Boot整合MyBatis+MySQL实战指南（Java 1.8 + 单元测试）
  • AIStarter新版重磅来袭！永久订阅限时福利抢先看
  • ARM架构CPU的市场和生态
  • 使用云虚拟机搭建hadoop集群环境
  • Claude Code是什么？国内如何使用到Claude Code？附国内最新使用教程
  • 四、神经网络——正则化方法
  • 喷涂机器人cad【1张】＋三维图＋设计说明书＋降重
  • redis数据结构和数据类型
  • vector之动态二维数组的底层
  • 2025年亚太中文赛B题第一版本超详细解题思路
  • C++：非类型模板参数，模板特化以及模板的分离编译
  • Java大厂面试故事：谢飞机的互联网医疗系统技术面试（Spring Boot、MyBatis、Kafka、Spring Security、AI等）
  • FastAPI + SQLAlchemy （异步版）连接数据库时，对数据进行加密
  • 【字节跳动】数据挖掘面试题0016：解释AUC的定义，它解决了什么问题，优缺点是什么，并说出工业界如何计算AUC。
  • UE5多人MOBA+GAS 18、用对象池来设置小兵的队伍的生成，为小兵设置一个目标从己方出生点攻打对方出生点，优化小兵的血条UI
  • （补充）RS422
  • 【每日刷题】x 的平方根
  • 2D下的几何变换（C#实现，持续更新）
  • Elasticsearch混合搜索深度解析（下）：执行机制与完整流程
  • 【AI News | 20250710】每日AI进展
  • 2025年DevSecOps工具全景图：安全左移时代的国产化突围
  • 深入探索Kafka Streams：企业级实时数据处理实践指南
  • 11. TCP 滑动窗口、拥塞控制是什么，有什么区别