【ServiceNow】Client Scriptでのフォーム画面カスタマイズ（装飾、メッセージ）

## 概要
ServiceNowのフォーム画面について、ディクショナリの設定でフィールドの必須入力化や文字数上限設定などができますが、
他にもClient Scriptでフィールドを装飾したりメッセージを表示させることなどが可能になります。
カスタマイズにはGlideForm APIを用います。

以下、どのAPIでどのような見た目になるのか、備忘録的にまとめていきます。

### 環境
PDIで作成しています。
バージョンはSan Diegoです。
System Administrator（admin）で操作しています。

## 1.フィールド名の横にアイコンを表示させる
### addDecoration('フィールド名', 'アイコン', 'タイトル','色')
|パラメータ|説明|タイプ|
|:---|:---|:---|
|フィールド名|アイコンを表示させたいフィールド名|String|
|アイコン|フィールド名の左側に表示させるアイコンの種類（下記の画像参照）|String|
|タイトル|カーソルをアイコンにあてた際に表示させる文言|String|
|色|アイコンの色（color-RGBカラー名、もしくはCSSカラーで入力）|String|

**画面のイメージ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1984141/a4d571c6-2441-c6a0-ae76-98277b4cec39.png)

**Client Scriptのイメージ**
```
function onLoad(){
    g_form.addDecoration('number','icon-star','星のアイコンです','color-yellow');
}
```

上記イメージでは、Numberフィールド名の横にアイコンを設定し、アイコンにカーソルを当てた際に「星のアイコンです」と表示、またアイコンの色を黄色にする、といった設定を行っています。

星以外にも、アイコンには以下のようなものを設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1984141/aadde84e-096b-309e-2365-0f43f82e3bd4.png)

## 2.フィールド名を点滅させる
### flash('フィールド名', '色', 'カウント')
|パラメータ|説明|タイプ|
|:---|:---|:---|
|フィールド名|背景色を点滅させたいフィールド名。次の形式で入力する。<br>'<テーブル名>.<フィールド名>'|String|
|色|フィールド名の背景で点滅させたい色（RGBカラー名もしくはCSSカラーで入力）|String|
|カウント|以下の数字を入力してフィールド名が点滅する秒数を指定する。<br>2 : 1秒間点滅<br>0 : 2秒間点滅<br>-2 : 3秒間点滅<br>-4 : 4秒間点滅|Number|

**画面のイメージ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1984141/50681f3a-64d1-8112-b2d8-0c0238af8c26.png)
**Client Scriptのイメージ**
```
function onLoad(){
	g_form.flash('incident.number','yellow',-4);
}
```
上記イメージでは、Numberフィールド名の背景が黄色に4秒間点滅する、といった設定を行っています。

## 3.フォーム上部にメッセージを表示する
### addErrorMessage('メッセージ')
|パラメータ|説明|タイプ|
|:---|:---|:---|
|メッセージ|フォーム上部に表示させたいエラーメッセージの内容|String|

**画面のイメージ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1984141/fca62415-b6da-b47e-3ae2-8384247fd0b0.png)
**Client Scriptのイメージ**
```
function onLoad(){
    g_form.addErrorMessage('エラーメッセージです');
}
```
上記イメージでは、画面上部に「エラーメッセージです」と赤枠内にメッセージを表示します。

### addInfoMessage('メッセージ')
|パラメータ|説明|タイプ|
|:---|:---|:---|
|メッセージ|フォーム上部に表示させたいインフォメーションメッセージの内容|String|

**画面のイメージ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1984141/89ead61f-8f9b-1873-9943-385186866df1.png)

**Client Scriptのイメージ**
```
function onLoad(){
    g_form.addInfoMessage('インフォメーションメッセージです');
}
```
上記イメージでは、画面上部に「インフォメーションメッセージです」と青枠内メッセージを表示します。

## 4.画面上にメッセージウィンドウを表示する
### alert('メッセージ')
|パラメータ|説明|タイプ|
|:---|:---|:---|
|メッセージ|ウィンドウに表示させたい警告メッセージの内容|String|

**画面のイメージ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1984141/f9a9ea62-e98a-5641-1cf3-225f59be1241.png)

**Client Scriptのイメージ**
```
function onLoad(){
    alert('警告ウィンドウを表示します');
}
```
上記イメージでは、ブラウザ画面の上部に「警告ウィンドウを表示します」というメッセージが表示されたウィンドウを表示します。ウィンドウ内には「OK」ボタンが表示されます。

### confirm('メッセージ')
|パラメータ|説明|タイプ|
|:---|:---|:---|
|メッセージ|ウィンドウに表示させたい確認メッセージの内容|String|

**画面のイメージ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1984141/52df7e3c-1e84-d10b-c57b-d5bcaa7cff40.png)
**Client Scriptのイメージ**
```
function onLoad(){
    confirm('確認ウィンドウを表示します');
}
```
上記イメージでは、ブラウザ画面の上部に「確認ウィンドウを表示します」というメッセージが表示されたウィンドウを表示します。ウィンドウ内には「OK」ボタンと「キャンセル」ボタンが表示されます。

### showFieldMsg('フィールド名','メッセージ','タイプ')
|パラメータ|説明|タイプ|
|:---|:---|:---|
|フィールド名|メッセージを表示させたいフィールド名|String|
|メッセージ|フィールドの下に表示させるメッセージの内容|String|
|タイプ|以下の文言を入力してメッセージの枠の種類を指定する。<br>error：赤枠<br>info：青枠<br>warning：黄枠|String|

**画面のイメージ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1984141/890f8003-eea8-5853-be4c-9d52c3915685.png)
**Client Scriptのイメージ**
```
function onLoad(){
	g_form.showFieldMsg('number','エラーフィールドメッセージです','error');
	g_form.showFieldMsg('number','インフォメーションフィールドメッセージです','info');
	g_form.showFieldMsg('number','警告フィールドメッセージです','warning');
}
```
上記イメージでは、Numberフィールドの下に「エラーフィールドメッセージです」という赤枠メッセージ、「インフォメーションフィールドメッセージです」という青枠メッセージ、「警告フィールドメッセージです」という黄色枠メッセージが表示されます。

## 5.ファイル添付ができないようにする
### disableAttachments()
**画面のイメージ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1984141/01fa5b84-d128-57fa-a86d-347a5ac276cd.png)
**Client Scriptのイメージ**
```
function onLoad(){
    g_form.disableAttachments();
}
```
上記イメージでは、フォームのタイトルバーのクリップアイコンが非表示になり、ファイル添付ができなくなります。
## 参考
そのほかにもFormのメッセージを非表示にしたり、入力値を受け取るAPIなど多数用意されています。
詳細は以下を参照ください。
[GlideForm](https://developer.servicenow.com/dev.do#!/reference/api/sandiego/client/c_GlideFormAPI)
[Scripting alert, info, and error messages](https://docs.servicenow.com/bundle/sandiego-application-development/page/script/general-scripting/reference/r_ScriptingAlertInfoAndErrorMsgs.html)