【ServiceNow】フォームの表示制御

# フォーム
Nowプラットフォームでの管理者(一次受付、二次対応者)サイドが業務で使うことを想定した入力フォームです。イメージは下記。
![acda.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/6164e085-ae82-e6c0-e951-5770ab00812f.png)
実開発においては、フル機能が提供されている上記フォームから、業務要件に合わせて表示項目を増減させたり、必須入力項目を出したり、バリデーションを行ったりなどの各種制御を施すことが絶対不可欠となる。

## ServiceNowの特徴
そして、フォームのそれぞれの項目は別テーブルで管理されている。
ServiceNowの**Nowプラットフォームを代表する特徴はすべての機能をテーブル単位で格納していること**だと個人的に思っている。資産管理の資産情報、インシデント管理のインシデントなどといった固有データ、承認ワークフローなどの非定型データ、ServicePortakなどのUI部品、クライアント・サーバなどのスクリプト、各種機能別のプラグイン、といった**ありとあらゆるWebアプリケーション開発のすべてがテーブルによって管理されている**のは、慣れるまでは癖があるが、慣れたらその一貫性のゆえにありがたくも感じる。

## テーブルごとの管理、ということ
上の図においては、一枚フォームですら、

- property
- ui action
- contexual search
- form layout

その他などの多数のテーブルがモジュールとして結合しているが故の表示形式なのである。

## 前置きはこれくらいにして、本題
**今回やることは、不要な表示項目を消すオペレーション**です。消す方法は、いろいろありますが(フォームのだしわけ、UIポリシーにスクリプトで制御、ACLで権限を付与しない、部品をActive=Falseで非活性にするなど)
今回はひとつひとつ見ていこうと思います。本質的な対応はACL(Access Control)やViewの作成になるとは思いますが、それ以外の方策を考えます。

### 1.manage attachmentボタン
①下記のフォームボタンを消したい場合
![manage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/2b6ed68f-469c-3bd9-e3a1-2d42c6fe3e5d.png)

**system definition > client scripts**を変更することで消すことが可能
![FireShot Capture 054 - disable attachment button on upper - Client Script - Nowプラットフォーム_ - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/ee09f700-0477-708c-19c2-ed5a43271c98.png)
g_form.disableAttachments()というメソッドを使用すれば消えます。結果↓
![aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/ea3aea01-ba23-02b8-5186-6a1f1ae5c6ab.png)
②条件付きで消したい場合
>callerの入力値がGuestの場合、attachmentを無効にしたい場合

![adfdsf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/20bd78fe-238b-3f7e-b42d-c76bac2e6268.png)
スクリプトを少し改変します

```javascript:condition_change.js
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
        //callerの値によってifconditionで表示を変更しています
	var checkValue = g_form.getDisplayBox('caller').value;
		if (checkValue == "Guest"){
			g_form.disableAttachments();
		} else {
			g_form.enableAttachments();
		}
}
```
これで動きます。
### 2.show activity stream ボタン
次はこれを消したい。
![dfggff.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/8d881c68-bc54-9917-c421-3611588ca8bc.png)
消す方法
system property(sys_properties.list)テーブルに、**glide.ui.activity_stream.form_button**という項目があるので(True/False型)、falseに設定する。
![FireShot Capture 057 - System Properties - Nowプラットフォーム - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/ac0e211b-35e3-f147-e6e0-2d3bff641049.png)
### 3.personalize_form ボタン
次はこれを消したい
![gfsdg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/5acd4dfd-45cb-d048-e53f-d380407d546d.png)
消す方法
前の項目同様、system property(sys_properties.list)テーブルに、**glide.ui.personalize_form**という項目があるので(True/False型)、falseに設定する。

### 4.more optionボタン
![dhtd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/9835089f-5a69-e72a-011f-f03d61a3d6ba.png)
これは1)のattachmentボタンと同様、client scriptにスクリプトを追加することで消すことができます。
DOMで要素を取得して消しましょう。
具体的には、下記のスクリプトを追加します。

```javascript:hide_toggle.js
$('toggleMoreOptions').hide();
```
### 5.followボタン
![FireShot Capture 059 - INC0010035 - Incident - Nowプラットフォーム - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/338d63fb-04a9-c403-6fec-aa8e5595b6fb.png)
上記のfollowボタンはsystem property(sys_properties.list)の**glide.live_feed.task_header_button**を**live_feed**にすることで消すことができます。

### 6.UIアクションたち
![FireShot Capture 059 - INC0010035 - Incident - Nowプラットフォーム - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/338d63fb-04a9-c403-6fec-aa8e5595b6fb.png)
のUpdate,aaaaa,Resolveなどのボタンたちは、ITSMでの運用上に不可欠なボタンです。ですから、UI ActionをActive=Falseとするのではなく、

- 専用のViewを作ってから
- UI ActionにViewのVisibilityを設定してあげること
で表示制限をすることをお勧めします。
![dfasf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/0cca5ac7-2fac-bae4-2880-833a68a6cea6.png)
画面スクロールして、
![FireShot Capture 061 - aaaaaaaaaaa - UI Action - Nowプラットフォーム - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/bcd23295-6094-c934-7fc7-0099954284cb.png)

上記のExclude設定の効果を見ますと、
![FireShot Capture 063 - INC0010035 - Incident - Nowプラットフォーム - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/4ada8903-4215-d02e-5c3d-c661d4a8af68.png)
確かに消えていますね！UI ActionはView設定のinclude/excludeで行いましょう！

### 入力フォームのだしわけ
下記の入力フォームの中身は、FormLayoutで編集が可能です
![aadfs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/520b1d2c-babd-4f89-e922-105f1bf43903.png)
三本線の**configure>formlayout**
![FireShot Capture 065 - INC0010035 - Incident - Nowプラットフォーム - dev74512.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/c97043c5-80cf-22ba-84b2-1eaf892e7bdc.png)
下記の画面に遷移するので左右で編集できます！

![sfgd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190712/f0c21157-7b9d-0a92-3f0f-5a315a43b664.png)
これである程度の項目が出たと思います。
別稿では、contexual searchについて書いていきたいですね。