概要

次ぎの2つの仕様を実装する：
1. サービスポータルに自分が管理している資産を表示されるウイジェットを作成する。

メニューに自分が管理している資産を表示させ、クリックすると資産ウィジェットを配置してページを表示させる。

手順

ウィジェットで自分の資産を表示させる手順とメニューに自分の資産を表示させる手順を分けて説明します。

ウィジェットで自分の資産を表示させる

アプリケーションナビゲータから「ポータル」を検索してService Portal下の「サービスポータル設定」を選択する。
「デザイナー」を選択する。
「従業務員ポータル」アイコンを選択する。
「データ」を検索する。
「インスタンス定義からのデータテーブル」をページ設定領域にドラッグ＆ドロップする。
ドラッグ＆ドロップした「インすんタンス定義からのデータテーブル」ウィジェットの右上の編集アイコンを選択する。

次のように入力した後に「保存」ボタンを押下する。

項目名	値
テーブル	資産[alm_asset]
フィルター	assigned_to=javascript:gs.getUserID()
フィールド	「asset_tag」、「model_category」、「display_name」
最大エントリ	10
順番	表示名
ソート方向	昇順
タイトル	自分の資産

次のように自分の資産がウィジェットに表示します。
サービスポータルページを表示してウィジェットに自分の資産が正しく表示していることを確認します。

メニューに自分の資産を表示する項目を追加する

メニューで自分の資産を表示するようにします。
1. サービスポータル設定の右上の「ポータルテーブル」を選択します。

2. 「メニュー付きインスタンス」を選択します。

3. 「SPヘッダーメニュー」を選択します。

1. 右側にSPヘッダーメニューが表示されます。下の関連リストの「メニューアイテム」リンクをクリックします。

4. メニューに自分の資産項目を追加するので「新規」ボタンを押下します。

5. 次のように入力した後に「保存」ボタンを押下します。

項目名	値
ラベル	自分の資産
種類	スクリプト化済みリスト

スクリプト

var max = 10;
var t = data;
data.count = 0;
var items = data.items = [];

var user = gs.getUser().getID();
items.record_watchers = [];
items.record_watchers.push({'table':'alm_asset','filter':'assigned_to=' + user.toString()});

var gr = new GlideRecord('alm_asset');
gr.addQuery("assigned_to", user);
gr.orderBy('display_name')
gr.setLimit(max);
gr.query();

while (gr.next()) {
  var a = {};
  var title = gr.display_name.toString() ;
  addCI(title, gr.sys_id);
}

function addCI(title, query) {
    data.count++;
    var link = {};
    link.title = title;
    link.type = 'link';
    link.href='?id=index'; // ホームページを開く
    // link.href='nav_to.do?uri=alm_hardware.do?sys_id=' + query; // 当該資産ページを開く
    items.push(link);
}

6. メニューに「自分の資産」が追加されて選択すると資産一覧が表示されることを確認します。

資産一覧ウィジェットを自作する

ServiceNowから標準で提供されている「インすんタンス定義からのデータテーブル」ウィジェット」を利用することもできますが、自分でもウィジェットを作成することもできます。例として、自分の資産一覧を表示するウィジェットを作成します。

アプリケーションナビゲータから「ポータル」を検索してService Portal下の「サービスポータル設定」を選択します。
「ウィジェットエディター」アイコンを選択します。
「新規ウィジェットの作成」をクリックします。
ウィジェット名を入力します。
下の例では名前を「MyAsset」にしています。上が表示名で下が内部で利用される名前です。内部名は小英数、アンダースコア、ハイフンにします。

ウィジェットのコードを入力します。
HTMLテンプレート

<div class="panel panel-primary">
<div class="panel-heading">自分の資産</div>
<div class="panel-body">
    <table>
  <tr>
    <th class="tableHeader">タグ</th>
    <th class="tableHeader">カテゴリ</th>
    <th class="tableHeader">名前</th>
  </tr>
 <tr ng-repeat="asset in data.assets | orderBy: display_name">
   <td>{{asset.asset_tag}}</td>
   <td>{{asset.model_category}}</td>
   <td><a href ="nav_to.do?uri=alm_hardware.do?sys_id={{asset.sysid}}">{{asset.display_name}}</a></td>

</tr>

</table>
</div>
</divクライアントスクリプト

api.controller=function() {
  /* widget controller */
  var c = this;
};

サーバースクリプト

(function() {
  data.userID = gs.getUserID();
  data.assets = [];
  var gr = new GlideRecordSecure('alm_asset');
  gr.addQuery('assigned_to', gs.getUserID());
    gr.setLimit(20);
    gr.orderByDesc("display_name")
  gr.query();
  data.recordCount = gr.getRowCount();
  data.assets = [];
  while (gr.next()) {
    var asset = {};
    asset.asset_tag = (gr.asset_tag != null) ? gr.asset_tag + '' : '';
    asset.model_category = gr.model_category.getDisplayValue();
    asset.display_name = gr.display_name + '';
    asset.assigned_to = gr.assigned_to.getDisplayValue();
    asset.sysid = gr.sys_id + '';
    data.assets.push(asset);
  }
})();

6. 「CSS-SCSS」をチェックしてCSS-SCSSを入力します。入力した後に「保存」ボタンを押下します。

table  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
th, td {
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #e5e5e5;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
.tableHeader {
  text-align:center;
  padding:5px;
  background-color:#dcdcdc;
}

7.保存されると次のようにメッセージが表示されます。

8.ウィジェットをポータルに配置します。
メニューから「デザイナー」を選択します。

9.「従業員ポータル」アイコンを選択します。

10.配置するウィジェットを検索します。
今回は作成したウィジェットを配置するので「my」を検索して「MyAsset」を探します。

11.ドラッグ＆ドロップして「MyAsset」ウィジェットをポータルページに配置します。

portal_my_asset_widget_23.png
12.自分資産一覧が表示されます。

ウィジェット名を日本語にする

国際化対応する場合は名前は英語の方がよいですが、日本語のみのサイトを構築する場合はウィジェット名を日本語に変更することができます。日本語に変更するとウィジェットを日本語で検索することができます。
1. アプリケーションナビゲータから「ウィジェット」を検索して、Service Portal下の「ウィジェット」を選択します。

1. 名前を変更するウィジェットを検索する。
下の例では名前が「MyAsset」で検索しています。

1. 名前を変更するウィジェットを選択します。
下の例では「MyAsset」を選択します。

1. ウィジェットの名前を日本語に変更して「更新」ボタンを押下します。

1. 名前を日本語にすると日本語でウィジェットを検索することが出来ます。

自分の資産用のページにウィジェットを配置する

メニューや既存のページにウィジェットを配置するのではなく、自分の資産用のページを作成してメニューからページに移動できるようにします。

自分の資産用のページを作成する

アプリケーションナビゲータから「ポータル」を検索して、Service Portal下の「サービスポータル設定」を選択します。
「デザイナー」アイコンを選択します。
「新規ページを追加する」リンクをクリックします。
ページ名を入力します。ページタイトルは表示される名前で、ページIDは内部で利用される識別子です。ページを選択する場合などはページIDを使います。
ページレイアウトを選択します。
今回は自分の資産ウィジェットのみを配置するので「12」を選択します。
ページにウィジェットを配置します。
左メニューからウィジェットを選択してページ領域にドラッグ＆ドロップします。
「インスタンス定義からのデータテーブル」を配置する場合は「ウィジェットで自分の資産を表示させる」の手順4を実施します。
ウィジェットがページに表示されます。メニューから「プレビュー」を選択してポータルでどのように表示されるかを確認します。
ポータルのプレビューページが表示されます。

メニューからページを開くようにする

作成した自分の資産ぺーじをメニューから開くようにします。
1. 「サービスポータル設定」ページのメニューから「ポータルテーブル」を選択して、「メニュー付きインスタンス」を選択します。

2. 「SPヘッダーメニュー」を選択して、右側に表示されるメニュー設定の下にある「メニューアイテム」リンクをクリックします。

3. 新しいメニュー項目を追加します。
「新規」ボタンを押下します。

4. 次のように設定した後に「保存」ボタンを押下します。