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

ServiceNow Portal前端页面实战讲解

news 2025/7/13 11:30: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.dtcms.com/a/276453.html

相关文章：

  • [案例八] NX二次开发长圆孔的实现（支持实体）
  • C++中Lambda表达式 [ ] 的写法
  • Redis面试精讲 Day 1：Redis核心特性与应用场景
  • 浅谈 Python 中的 yield——生成器对象与函数调用的区别
  • 2025必问46道软件测试面试题（答案+文档）
  • Armstrong 公理系统深度解析
  • 网络安全初级第一次作业
  • super task 事件驱动框架
  • Openpyxl：Python操作Excel的利器
  • 浅谈npm,cnpm,pnpm,npx,nvm,yarn之间的区别
  • Python 数据建模与分析项目实战预备 Day 3 - 特征工程基础与数据预处理（针对简历结构化数据）
  • 使用iso制作ubuntu22.04docker镜像
  • 处理日期与时间
  • 【嵌入式电机控制#13】PID参数整定的全面步骤
  • ClickHouse 25.6 版本发布说明
  • 【华为机试】HJ68 成绩排序
  • 从0设计一个短链接服务：如何实现尽可能短、可变长的短网址系统？
  • 过拟合 跷跷板 幻觉 混合精度
  • 计算机毕业设计springboot影视周边推荐系统 基于SpringBoot的电影衍生品智能推荐平台 JavaWeb实现的影视文化周边个性化服务系统
  • git版本发布
  • 黑客工具Nessus介绍及其安装使用教程
  • 使用Kali Linux hydra进行密码爆破(仅供学习)
  • 质量属性场景(Quality Attribute Scenario)深度解析
  • mybatis模糊匹配采用concat与#{}，动态sql讲解
  • 模拟专家协作网络——重塑LLM专业内容生成
  • C语言基础知识--枚举
  • 商业智能（BI）系统深度解析
  • Matlab R2024b下载及详细安装教程，附中文免费Matlab安装包（含离线帮助文档）
  • 为什么一个 @Transactional 注解就能开启事务？揭秘 Spring AOP 的底层魔法
  • 维基艺术图片： python + scrapy 爬取图片