[ServiceNow]データテーブルウィジェットについて

## はじめに
ServiceNowのポータル上でレコード情報を参照する場合、
データテーブルウィジェット（インスタンス定義からのデータテーブルまたは、URL定義からのデータテーブル）か簡易リストを利用するか、カスタムでウィジェットを作成する必要がある。
ポータルではレポートも表示できるがリスト形式のレポートは配置できないようになっている
※レコード選択時に内部情報にアクセスできてしまうためと思われる。

今回はデータテーブルウィジェットについて利用方法と小ネタを記載する。

## 動作環境
Rome
## 設定方法（インスタンス定義からのデータテーブル）
　1.Service Portal > Pagesから対象のポータルページを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/69250038-203b-1e7a-ceaf-2aad1bd6cc8f.png)
　2.画面下部にあるRelated Linksから[Open in Deginer]を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/5bdd34af-45fc-ba34-bc79-2187909a70fa.png)
　3.WidgetsタブのFilter WidgetにData Tableと入力し、下記ウィジェットを追加する。
　　Data Table from Instance Definition（インスタンス定義からのデータテーブル）
　　Data Table from URL Definition（URL定義からのデータテーブル）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/b7c08c77-0666-ac1a-05a7-68817ed5d1a8.png)
　4.Data Table from Instance DefinitionはPreviewタブからページを参照するとエラーになってしまうため設定を行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/45c88b68-4348-bf47-881d-948d67f8cc4a.png)
　5.Data Table from Instance Definitionを配置したインスタンスを選択し、鉛筆マークを押下する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/caf27a95-4254-0832-91fa-09fb37a201eb.png)
　6.下記項目を設定していきます。

|項目|説明|
|:---|:---|
|Table|リストを表示するテーブルを選択|
|Filter|項目名(ラベルではない)=値で設定する。複数条件ある場合は^で繋ぐ|
|Fields|リストに表示する項目を選択|
|Maximum entries|1ページあたりの表示件数|
|Order by|並び順の項目|
|Order direction|昇順or降順|
|Title|リストのタイトルを記載|
|Bootstrap color|色を選択|
|Glyph|アイコンの選択|
|Link to this page|レコード選択時に遷移するページを選択する。何も選択しない場合Formに遷移する|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/e381c246-443e-8a83-180c-ab4bb6716350.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/5487dbfa-6c16-1a43-28b3-b10cdad593b3.png)

　7.ポータルで表示してみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/7201142b-9c96-0b90-7e3c-ccfc5a3ebc00.png)

　8.レコードを押下すると404に遷移する。
　　ブロック崩しができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/dd3333fe-39fa-247c-8b16-38a3cba4c26d.png)

　9.Link to this pageを空欄にした場合、フォーム画面に遷移する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/478cf759-bcc4-d183-5d8d-c58b9899cc21.png)
## 設定方法（URL定義からのデータテーブル）
　1.Data Table from URL Definitionは編集画面を開いて下記項目を設定していきます。

|項目|説明|
|:---|:---|
|Title|リストのタイトルを記載|
|Bootstrap color|色を選択|
|Glyph|アイコンの選択|
|Use Instance Title|チェックをつけた場合、タイトルが表示される|
|Enable Filter|独自フィルタを利用する場合チェックを行う<br>ここは詳しくないので省きます。|
|Link to this page|レコード選択時に遷移するページを選択する。何も選択しない場合Formに遷移する|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/6d7cc9f3-c3f0-0dcd-0609-6f1d99385fa6.png)
　2.ポータルで表示してみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/50f19fef-c97b-1ca5-d2c8-8b76f40b4c80.png)

　3.URLに「&table=sc_request」を追加し更新する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/ed4f293b-c068-3a12-b205-e79014308484.png)

レコードが表示される。

## 小ネタ

#### インスタンス定義からのデータテーブル
フィルタ条件をユーザーで変更できるようにする
##### 手順
対象Pageレコードの[Instance with Table]を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/0ec51bc3-2371-fc76-2250-a69ab48e3ad1.png)
MiscタブのAdditional options, JSON formatに下記文言を追加し[Update]を押下する。

```
{
"enable_filter": {
"value": "true",
"displayValue": "true"
}
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/c99c5230-0589-5781-ef29-c425fe860d7a.png)

フィルタ条件を変更できるようになった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/b54d5371-8804-5359-81a3-43cad5c0bdd0.png)


#### URL定義からのデータテーブル

「&filter=条件」を記載することで絞り込みを行うことも可能です。
表示件数や表示項目もURLで制御できるはず。。。
詳しい方いたら教えてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946893/aa629032-ef44-114b-c6cb-9c98c4f96ebf.png)