【ServiceNow】ServicePortalのIconLinkをGlyphではなく独自画像を設定する

# Service Portal
ServiceNowのプラットフォームではなく、利用者目線のCMS。
プラットフォームは管理者向けだとして、一般使用ユーザ向けの画面。

下記は、デフォルト(OOTB:Out of the box)のサービスポータルの画面です。まじめ。
![portal default.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/94a1a1d1-b05b-49d0-696e-a514554b1cb1.png)
一般ユーザは、上記画面から承認・問い合わせ・ナレッジベース(イントラ知識サイト)にアクセスするなどの用途があります。

自分が個人インスタンスでいじっているポータル画面は下記です。なんかめちゃくちゃ。
![FireShot Capture 026 - Service Portal - The Greatest HP - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/5b3ae302-3d0b-0531-e158-6011f785fa98.png)

# 今回やりたいこと
ここに注目ください。
![icon link.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/8178a952-43a1-71af-fefa-42933d75cf08.png)

こういったアイコンは既存の設定アイコンが用意されており、選択方式で好みのアイコンを設定できるのです。
しかし、独自の画像を設定したい場合はどうすればよいのか、、、と調べました！発見しました！下記です！
![original.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/111d86b0-0325-5350-d553-e301912b9850.png)
今回は普通の画像の差し替え方と、オリジナル画像の差し替え方について書きます。

# 普通の画像差し替え(glyph)
サービスポータルのページで**Ctrl+右クリック**するとリストが出るので、
![FireShot Capture 027 - Service Portal - The Greatest HP - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/508bae13-a584-6802-b321-f481534bd2e6.png)
そこの**Instance in Page Editorをクリック**する。
するとインスタンスの階層構造にアクセスできる。
![FireShot Capture 028 - Page Edit - SP Configuration - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/6e235b14-7fca-bf4f-e1e5-f3c28bc5bd8e.png)
階層構造のInstance部分(ここではRequest Something)を選択して、
設定項目にGlyphがあるので、ここのアイコンを自由にいじれば、その内容が即時反映される。
![gggg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/850f012d-a0a9-7242-18f5-1d6f21de7194.png)
これでアイコンが変更される。

# オリジナル画像の差し替え
### 1)画像のアップロード
**db_image**テーブルにアクセス(Platformのメニューでdb_image.list)する。
db_imageテーブルが画像のストレージなので、ここに今回使用する画像をアップロードする。
![FireShot Capture 030 - rocket.png - Images - ServiceNow - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/ad259791-60d9-81b0-20b2-1acb34c1e0a3.png)

### 2)インスタンスを変更する
再度、サービスポータルのページで**Ctrl+右クリック**して、
![FireShot Capture 027 - Service Portal - The Greatest HP - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/508bae13-a584-6802-b321-f481534bd2e6.png)
今度は**Widget in Editor**をクリックします。
するとエディターに遷移します。
![FireShot Capture 031 - Editing_ clone icon link - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/dc580799-dc68-d66d-34e1-20613835fc02.png)
そこで変更するインスタンスを選択できるので、Icon Linkのインスタンスを選択してから、それをcloneします。
これでスクリプトを変更可能となったので、下記変更を加えます。

サーバー側

```javascript: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');
	}
})();
```

クライアント側

```html: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](https://community.servicenow.com/community?id=community_question&sys_id=7d040be5dbd8dbc01dcaf3231f9619ea)