[ServiceNow] リストやフォームを編集する

例えば従業員の管理をしようとすると、従業員を登録する画面や、一覧表で確認できる画面なんかが必要となる。

ただ、同じ従業員一覧を確認するにしても、ある人は名前と所属だけが見たい人もいれば、ある人は住所や生年月日を見たいなど、利用の仕方によってほしい情報は異なってくるだろう。

ServiceNowでは1つのテーブルに対して複数のリスト(一覧画面)やフォーム(入力画面)を登録することができ、それぞれのユーザーに目的に応じた画面を提供することができる。

本書では「ユーザー」テーブルを例に、リストやフォーム画面を作成/編集する方法について述べる。

## リストを編集

### 自分だけに反映される設定変更

リスト画面を表示すると、ヘッダーの一番左に歯車マークが表示されているはず。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/45301dfe-3e0c-1e13-1215-b87cb3566777.png)

これをクリックすると列をカスタマイズするモーダルが表示される。
「利用可能」から「選択済み」に項目を移すことで、リスト画面で表示させる列を増やすことができる。
また、列の順番は「選択済み」の上から順に左から並べられる。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/20331567-122c-16a5-6b98-18093228aca9.png)

例えば「部門」を選択し、OKをクリック。
リストの一番右に列が追加されている事が確認できる。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/7fd897c0-f538-39bb-fecc-91c8ac760d59.png)

※ この設定方法はあくまで現在のユーザーにだけ反映されるものであり、他のユーザーには影響しない。  

### 他ユーザーにも反映される設定変更

リストのヘッダー部分で右クリックし、「構成」⇒「リストレイアウト」をクリックする。  
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/8cf16de0-0229-cde0-d725-96fce9860dbf.png)

先ほどと同じように、表示したい項目を「選択済み」に移動させて「保存」をクリックする。
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/37a3a0f3-b103-31ac-e663-31560cfcdfc3.png)

今回は「タイムゾーン」を表示するようにしてみる。
リストに項目が追加されたことが確認できる。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/b526303e-90f9-831a-c83e-535162ab0744.png)

## ビューの切り替え

リストやフォームの設定には**ビュー**という名前がついて保存されている。
リストレイアウトの画面を見てみると「ビュー名」を選択する項目があることがわかる。

デフォルトでも「ユーザー」テーブルには複数のビューが用意されている。
リスト画面左上のハンバーガーをクリックし、「ビュー」にカーソルを合わせると、そのテーブルで設定されているビューを切り替える事ができる。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/a5325a8c-440d-51fb-7220-623aa67d48a1.png)

## ビューの新規作成

ユーザーテーブル用のビューを新規に作成する。

リストレイアウトを開き、ビュー名で「新規」を選択する。
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/b502a0b8-668a-bf0d-cd27-616bf286b2ee.png)

適当な名前を付けて保存をクリック
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/a5051c65-e99d-9f8e-0371-fef9d4fdeb62.png)

表示する項目をカスタマイズし「保存」をクリック。
リスト画面からビューの選択メニューを見ると、先ほど追加したビューが表示されている。  
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/a708d306-3fc8-5924-6a4a-a1bdc7fb1698.png)

## フォームの編集

フォームの編集メニューは以下の2種類ある。

* フォームデザイン: ドラッグ&ドロップで表示させる項目や場所を編集することができる。
* フォームレイアウト: リストレイアウトと同じような編集画面で項目や表示位置を設定する。

直感的にわかりやすいのはフォームデザインだと思うので、今回はフォームデザインで編集を行う。

### フォームデザイン

フォーム画面のハンバーガーメニューを開き、「構成」⇒「フォームデザイン」をクリック。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/39f2e2f1-467c-54d9-6bcb-4bdf23223d0b.png)

以下のような編集画面が表示される。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/40a79841-140d-4cdd-8f37-8d110fd4cf58.png)

画面上部に編集するテーブルとフォームの選択枠がある。  
左側から表示させたい項目を右側に移し、各項目の表示順もドラッグ&ドロップで編集することが可能。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/4c7af440-8b9c-b354-e2c5-a681232482a8.png)

## ビューとリスト/フォームの関係性

先ほども述べたように、リストやフォームはビューという名前が付けられ保存されている。
その関係性は実際にビューのレコードを確認するとわかりやすい。

「システム UI」⇒「ビュー」を開く。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/49d71a68-11e8-2b83-872d-398ea4357845.png)

ビューの一覧が表示されるので適当なものを開いてみる。

フォーム画面下のタブに「フォーム」や「リスト」が存在する。
つまりフォームとリストをビューという単位でまとめて管理することができ、複数テーブルのフォームやリストも同様にビューで関連付け/種類分けすることができる。
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/e20b435d-569d-6696-09f4-afde8423e638.png)

フォーム/リスト/ビューの設定方法や関係性を理解することで、よりユーザーに利用しやすい画面を提供/運用できることに繋がるので、まだまだここの範囲は深堀してまとめたい。