서비스 포털

ServiceNow의 플랫폼이 아니라 사용자 시선의 CMS.
플랫폼은 관리자 전용으로 일반 사용자를위한 화면.

아래는 기본(OOTB:Out of the box) 서비스 포털의 화면입니다. 진지하게.

일반 사용자는 위 화면에서 승인, 문의, 지식 베이스(인트라 지식 사이트)에 액세스하는 등의 용도가 있습니다.

자신이 개인 인스턴스에서 괴롭히는 포털 화면은 아래와 같습니다. 뭔가 엉망이야.

이번에 하고 싶은 일

여기에 주목하십시오.


이러한 아이콘은 기존의 설정 아이콘이 준비되어 있어 선택 방식으로 좋아하는 아이콘을 설정할 수 있습니다.
그러나 독자적인 이미지를 설정하고 싶은 경우는 어떻게 하면 좋을까, , , 라고 조사했습니다! 발견했습니다! 아래입니다!

이번에는 보통 이미지를 교체하는 방법과 원본 이미지를 교체하는 방법에 대해 씁니다.

일반 이미지 교체(glyph)

서비스 포털 페이지에서 Ctrl+오른쪽 클릭하면 목록이 나오므로

거기의 Instance in Page Editor를 클릭한다.
그러면 인스턴스의 계층 구조에 액세스할 수 있다.

계층 구조의 Instance 부분 (여기서는 Request Something)을 선택하고,
설정 항목에 Glyph가 있으므로, 여기의 아이콘을 자유롭게 만지면, 그 내용이 즉시 반영된다.

이제 아이콘이 변경됩니다.

원본 이미지 교체

1) 이미지 업로드

db_image 테이블에 액세스(Platform 메뉴에서 db_image.list)한다.
db_image 테이블이 이미지의 스토리지이므로 여기에 이번에 사용할 이미지를 업로드합니다.

2) 인스턴스 변경

다시 서비스 포털 페이지에서 Ctrl + 마우스 오른쪽 버튼을 클릭하고,

이제 Widget in Editor를 클릭합니다.
그러면 편집기로 전환됩니다.

거기에서 변경할 인스턴스를 선택할 수 있으므로 Icon Link 인스턴스를 선택한 다음 clone합니다.
이제 스크립트를 변경할 수 있게 되었으므로 아래와 같이 변경합니다.

서버측

server.js

(function(){
    var gr = $sp.getInstanceRecord();
    data.href = $sp.getMenuHREF(gr);
    data.target = options.target || "";
    //db_tableの情報を読み込んでセットする
    var img = new GlideRecord('db_image');
    img.addQuery('name', 'rocket.png');
  img.query()
  if (img.next()){
    data.image = img.getValue('name');
    }
})();

클라이언트측

client.html

<div class="iconlink" ng-class="{'high-contrast': accessibilityModeEnabled}">
  <!--// Top Icon -->
  <a ng-if="::(options.link_template == 'Top Icon' || !options.link_template)" ng-href="{{::data.href}}" class="top_icon {{::options.class_name}}" target="{{::data.target}}">
    <div class="m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}}"></div>
    <h2>{{::options.title}}</h2>
    <span class="text-muted">{{::options.short_description}}</span>
  </a>

  <!--// Circle Icon -->
  <a ng-if="::(options.link_template == 'Circle Icon')" ng-href="{{::data.href}}" class="circle_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
    <span class="fa fa-stack fa-2x">
      <i class="fa fa-circle fa-stack-2x"></i>
      //ここに画像を差し込む
      <img src="rocket.png"/　class="rocket">

    </span>
    <h2>{{::options.title}}</h2>
    <span class="text-muted">{{::options.short_description}}</span>
  </a>

  <!--// Color Box -->
  <a ng-if="::(options.link_template == 'Color Box')" ng-href="{{::data.href}}" class="color_box {{::options.class_name}} icon-link-background-{{::options.color}} text-white" target="{{::data.target}}">
    <div class="fa fa-{{::options.glyph}} fa-3x {{::options.class_name}}"></div>
    <h2>{{::options.title}}</h2>
    <span>{{::options.short_description}}</span>
  </a>
</div>

하는 일 자체는 매우 간단합니다.
db_table로부터의 값을 서버로부터 호출해, 클라이언트에 출력시키고 있을 뿐입니다.

이상의 조작에 의해, 벗겨져 오리지날의 화상이 표시되었습니다! 파치 파치! !

참고

Service Portal - Custom Icons