ServiceNow アプリケーションを作成する その４

[前回](http://qiita.com/Kisaragi13/items/891bcb1f3b1bad97c815)は、アプリケーションにテーブルをすべて作成し終えた。
今回はそのアプリケーションのユーザインタフェースを整理する。
インスタンスのビルドタイプはIstanbul。

具体的には次の設定を追加/修正する。

- アプリケーションナビゲータ
- フィルタ
- ビュー（リスト）
- フォーム
- 関連リスト

# アプリケーションナビゲータの整備
前回までの手順でテーブルを作成すると、アプリケーションナビゲータは各テーブル毎にグループが分かれており、また名前もおかしい。なのでこれを整備する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/5eed64cc-bc8a-d5e2-c8d1-b1ac8350b2a8.png)

<font color="red">★ 2017年6月時点では、インスタンスを日本語化しているとアプリケーションナビゲータを変更できない。そのため言語設定を一時的に英語に戻す。</font>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/8f4ec5b2-d9a2-6c06-51c0-c951d68eda14.png)

ServiceNow Studioを開く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/cb8d158e-6b5e-95da-7d25-b02a5186532e.png)

画面左側のアプリケーションエクスプローラのNavigationが以下のようになっていることが見てとれる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/3131f648-2009-826d-afa6-e3d0849b5e5f.png)

この画面上で「**アプリケーションメニュー**」がグループ、「**モジュール**」がグループ要素となっているので、これを修正すれば良い。

はじめにモジュールから「**出席者s**」をクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/d04a967b-eac4-fce8-2531-860fbd384dc3.png)

「**タイトル**」項目から”s”を消し、「**アプリケーションメニュー**」項目を”マーケティングイベント”に切り替え「**Update**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/4000a416-5f29-ee9e-c25c-a4b5187898b2.png)

機器利用申請も同様に更新する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/025dac6f-5d88-f755-db18-7d262a666a59.png)

これでアプリケーションナビゲータが統一された。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/ed052866-1f49-3a9e-60b1-b2e2451bb756.png)

あと、不要なアプリケーションメニューは忘れずに削除。
![sample2.gif](https://qiita-image-store.s3.amazonaws.com/0/175688/c7e63f03-367f-adfa-77b2-651b04fcb02c.gif)

# フィルタの整理
登録されたレコードが増えてくると目的のレコードを探すのが難しくなってくる。個々のユーザで自作フィルタを作成することも出来るが、全員が使いそうなものはシステム側で用意する方が良い。

作り方は個人用のフィルタと同じ。
アプリケーションナビゲータから、目的のテーブルを開く（通常は下図のように、デフォルトのリストビュー画面が開く）。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/6267036d-0a67-50f1-2d4f-cf9eeccc75b3.png)

<ruby>ろうと<rp>（</rp><rt>・・・</rt><rp>）</rp></ruby> マークをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/28fda97f-ff73-5e30-020e-f0df34df4755.png)

目的の条件を付け、<font color="red">表示対象を「**全員**」</font>にして保存する。
![sample2.gif](https://qiita-image-store.s3.amazonaws.com/0/175688/79976507-e1ba-1c81-1416-5bfdd83d3b46.gif)

これでフィルタが追加された。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/4aff8b6f-95a8-de6b-63ab-e064720154bb.png)

# ビュー（リスト）の整理
前記の通り、フィルタはレコードを絞り込む機能である、一方、ビュー（リスト）は表示するカラムを切り替える機能である。

今回は、デフォルトのビュー（リスト）の修正と、新規ビュー（リスト）の追加の両方を行う。

## デフォルトビューを整理
ServiceNow Studioを開く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/8a266416-ca83-efd0-37d0-cd14e7ff57c7.png)

画面左側のアプリケーションエクスプローラのNavigationが以下のようになっていることが見てとれる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/09d07d20-5f33-9db9-b847-93ebc3dc92db.png)

この画面上で「**List Layouts**」がビュー（リスト）となっているので、これを修正すれば良い。

List Layoutsから「**マーケティングイベント**」をクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/dc4052ce-65dd-d8a4-6864-98d31bf80580.png)

リストに表示したい項目を「**選択済み**」に移動し、「**保存**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/0000cbe4-837d-c2b2-ac21-0fee4b6ed51d.png)

以上で、デフォルトビューの修正は終了です。
続いて新規ビュー（リスト）を作成します。

## 新規ビュー（リスト）を作成

アプリケーションナビゲータの中から、システム UI → ビューを選択（<font color="red">赤枠</font>）。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/6dc2877d-75e4-3b7e-8b39-1b1deddc7427.png)

「**新規**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/31b1f033-a8f3-c41c-5927-e9cc16465354.png)

名前、タイトル、アプリケーションを設定し「**送信**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/e1052f3f-7307-770d-7355-3f949662514c.png)

作成したビューレコード画面下部の、リストタブから「**新規**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/d4545177-577e-33c1-da11-8dc907ca4908.png)

テーブル項目に「**マーケティングイベント**」を入力し、「**送信**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/1aa2dc25-1f18-7e83-fdd7-1f1dbbf2d743.png)

ServiceNow Studioにサンプルビューが追加されたことを確認できる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/ed933bfb-0afb-d005-9670-cefe7a893d72.png)

後はデフォルトビューの時と同様に表示するカラムを選択、修正する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/bfae6d8b-ddb0-11d9-792a-7591e5265c79.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/cc7a5fe1-169f-c795-60b5-d8a81435c289.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/736beab5-bbc1-a3b4-4529-55c1e8f2c2fe.png)

# フォームの整理
レコード画面のことをフォームと呼ぶ。今回はビュー（リスト）と同様に、デフォルトのフォームと新規フォームの両方を作成する。

## デフォルトフォームを整理
ServiceNow Studioを開く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/8a266416-ca83-efd0-37d0-cd14e7ff57c7.png)

画面左側のアプリケーションエクスプローラのNavigationが以下のようになっていることが見てとれる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/09d07d20-5f33-9db9-b847-93ebc3dc92db.png)

フォームから「**マーケティングイベント**」をクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/35985ea0-5f1a-f28e-ae7c-4dcdd8155fee.png)

フォームデザイン画面が開く。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/5e9555a7-a79e-d3c9-cfe9-61c8f5f1739a.png)

必須や読み取り専用などは以下のように設定できる。
![sample.gif](https://qiita-image-store.s3.amazonaws.com/0/175688/ede2ce69-f965-4f76-5aee-74799a53dddf.gif)

編集後、「**保存**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/7b2bccad-45f2-8c63-e0f1-5fecc2726e67.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/820968fa-f8b1-2a4d-ce7f-cfe8292d41f0.png)

以上で、デフォルトフォームの修正は終了です。
続いて新規フォームを作成します。

## 新規フォームを作成

ビュー（リスト）のとき作成したビューレコード画面下部の、フォームタブから「**新規**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/9e1983df-7a3c-5f8d-096c-c411c51bfb56.png)

テーブルを選択して「**送信**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/88cf8bbd-bcaa-06d1-2865-45b5d8a2c21f.png)

次にマーケティングイベントのビュー画面に移動する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/65dc1611-af76-d504-cb92-69f19cf54acd.png)

ビューを今回作成したサンプルビューに切り替える。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/67ed657c-cfcd-b8b7-b494-1e7a930e2d9a.png)

この状態でレコードを開く。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/72d8b402-e57f-6c43-4901-b8b2afd74ad9.png)

メニューから 設定 -> フォームデザイン をクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/77b62790-c4d3-422c-856a-0e1df5ffe42a.png)

後はデフォルトビューを編集した時と同様。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/8ae3ed90-47fe-7d3d-f730-53d6cbac7c16.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/2e5891f7-79aa-7a63-1ef8-9992c087d18c.png)

# 関連リストの設定
関連リストを設定すると、リレーションが貼られたテーブルをレコード画面に表示することが出来、今回で言えばマーケティングイベントの出席者などを見ることが出来る。

ServiceNow Studioを開く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/8a266416-ca83-efd0-37d0-cd14e7ff57c7.png)

ショートカットキー『 **Ctrl + Shift + C** 』
「**Forms & UI**」タブから「**関連リスト**」を選択し「**次へ**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/b80d0afe-3181-3bd1-9c26-abe5a22eabb8.png)

テーブルを選択し「**作成**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/da62b10a-96b4-4a17-4495-5e8d0dd3551c.png)

利用可能なテーブルが一覧で表示されるので、表示したいテーブルを選択し「**保存**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/c256acf7-feb6-9e45-3578-962ec7eb78af.png)

レコード画面に関連リストが追加される。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/988607fe-ec02-6152-da00-88819128a1ec.png)

（補足）関連リストに「s」が付いてしまうのはテーブルの翻訳に原因がある。
ServiceNow Studioからテーブルを開き、ラベルタブから「**複数形**」項目の値を修正すれば良い。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/5782d804-ff9a-671c-23aa-767b475653d0.png)

# まとめ
日本語を使っていたために（恐らく翻訳テーブルが原因で）UI関連は非常にエラーになりやすく、幾つかの設定はStudioで出来なかった。またエラー発生後のリカバリーも非常に大変だった。基本的にUI関係はStudioでは追加出来ないと考えても良さそう。

|  | Studio | やること | 注意 | エラーリカバリ手順 |
|:-:|:-:|:-:|:-:|:-:|
| アプリケーションナビゲータの編集 | ○ | Studioのモジュールを編集 | 言語を英語に切り替える必要あり | システム定義->モジュールを更新日時の降順で確認し、変なものがあったら削除 |
| フィルタの追加・編集 | × | 1. 対象テーブルのビュー画面を開く <br/> 2. フィルタ条件を編集し、全体に向けて保存 |  |   |
| ビュー（リスト）の編集 | ○ | StudioのList Layoutsを編集 |   |   |
| ビュー（リスト）の追加 | × | 1. システムUI->ビューを新規作成 <br/> 2. そのビューにリストを新規作成 |   | システムUI->リストを更新日時の降順で確認し、変なものがあったら削除 |
| フォームの編集 | ○ | Studioのフォームを編集 |   |   |
| フォームの追加 | × | 1. システムUI->対象のビューを開く <br/> 2. そのビューにフォームを新規作成 <br/> 3. 対象テーブルのビュー画面に移動 <br/> 4. ビューを切り替える <br/> 5. レコード画面を開く <br/> 6. フォームデザインを編集、保存  |   | システムUI->ビューから対象のビューを開き、そのフォームを削除する |
| 関連リストの編集 | ○ | Studioの関連リストを作成・編集 |   |   |

# Next
次回はメール通知を設定します。
> - ServiceNow メール通知を実装する(作成中)

# 関連記事
> - [ServiceNow アプリケーションを作成する その１](http://qiita.com/Kisaragi13/items/c5f3a0f42b703affea01)
> - [ServiceNow アプリケーションを作成する その２](http://qiita.com/Kisaragi13/items/cd2eb97100c103a675ef)
> - [ServiceNow アプリケーションを作成する その３](http://qiita.com/Kisaragi13/items/891bcb1f3b1bad97c815)

# 参考サイト

> ServiceNow Community - How do I delete 'List Layouts'? -
https://community.servicenow.com/thread/226719
> 『ServiceNow Developers ― Training』
https://developer.servicenow.com/app.do#!/training/landing