ServiceNow Portal前端页面实战讲解

发布于：2025-07-13 ⋅ 阅读:(21) ⋅ 点赞:(0)

目录

前言：  

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页面了

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布