概要
次の仕様のデータセンタに入室する時の申請フォームを作成します。
- 東京と大阪にデータセンターがある。
- 作業を行うラック番号を指定する。東京と大阪のラック番号は違う。
- 入館カード番号を指定する。東京データセンタは入館カードがあるが大阪データセンタにはない。
- 次の項目がある。すべての項目は入力必須
| No. | 項目 | 説明 |
|---|---|---|
| 1. | データセンタ | 作業を行うデータセンタ |
| 2. | 入室責任者 | 入館責任者。業者のみが入館する場合では業者を手配した責任者 |
| 3. | 予定入館日時 | 入館予定日時。デフォルトは翌日の10:00 |
| 4. | 予定退館日時 | 退館予定日時。デフォルトは翌日の18:00 |
| 5. | ラック番号 | 作業を行うラック番号 |
| 6. | 持ち出しカード番号 | 入館カードが必要な場合はカード番号 |
| 7. | 入室者 | 入館される人の情報 |
| 7.1 | 名前 | 入館者名 |
| 7.2 | 会社名／部署 | 入館される人の会社／部署 |
作成手順
フォームの作成
先ずフォームを作成します。
1.新規にカタログアイテムを作成します。
アプリケーションナビゲータから「アイテムの」を検索して、「アイテムの管理」を選択します。
2.「新規」ボタンを押下します。
3.フォームに関する情報を入力します。
次の情報を入力します。
| No. | 項目 | 値 |
|---|---|---|
| 1. | 名前 | データセンター作業申請 |
| 2. | 簡単な説明 | データセンターへの入室申請 |
4.デフォルトではショッピングサイト用のフォームを作成します。
「ポータルの設定」タブを選択して次の設定を行います。
| No. | 項目 | 値 |
|---|---|---|
| 1. | 要求の方法 | 送信 |
| 2. | [買い物かごに追加]を非表示にする | チェックする |
| 3. | 数量を非表示にする | チェックする |
| 4. | 配送時間を非表示にする | チェックする |
| 5. | [ウッィッシュリストに追加]を非表示にする | チェックする |
| 6. | 添付ファイルを非表示にする | チェックする |
5.フォームに表示するフィールドを続けて定義するために設定を保存します。保存するとフィールドを定義する機能が表示されます。
フォームに表示するフィールドを定義する必要があるのでページを移動しないようにします。
「更新」ボタンを押下すると別ページに移動してフォーム定義が終了します。
ページを移動せずに保存する場合はフォーム定義のヘッダ領域を右クリックして「保存」を選択します。
変数
フォームに表示するフィールドを定義します。ServiceNowではフィールドを「変数」と呼びます。
1.フォームを保存するとページ下にタブが表示されます。フィールドを定義するには「質問」タブを選択して「新規」ボタンを押下します。
2.データセンタ選択フィールドを定義します。東京と大阪のみに限定するためにプロダウンメニューにします。
次のように設定します。項目名を定義するには「質問」タブを選択します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイプ | 選択ボックス | |
| 2. | 必須 | チェックする | |
| 3. | 順序 | 10 | |
| 4. | 質問 | データセンタ | フォームに表示する文字列 |
| 5. | 名前 | infra_dc_data_center | スクリプトなどで利用する文字列 |
3.標準ではフィールドの幅が大きいので幅を狭くします。
「タイプ仕様」タブを選択して変数の幅を「25%」にします。
4.東京のデータセンタで作業をする場合が多いのでデフォルトで東京が選択されるようにします。
「デフォルト値」タブを選択して、デフォルト値に「tokyo」を入力します。値「tokyo」は次に定義する選択項目の東京を表す値です。
5.設定を保存します。設定を保存するる選択項目を定義する機能がページ下に表示されます。
選択可能な項目を定義する必要があるため、ページ移動をせず設定を保存します。
ヘッダ領域を右クリックして「保存」を選択します。
6.新しい選択の値を定義します。
「質問」タブ内の「新規」ボタンを押下します。
7.東京を選択できるようにします。値はデータセンタフィールドのデフォルト値に設定した「tokyo」です。
次のように入力して「送信」ボタンを押下します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | テキスト | 東京 | プルダウンに表示する文字列 |
| 2. | 値 | tokyo | スクリプト等内部で使う文字列 |
8.同じように大阪をプルダウンで選択できるようにします。
「新規」ボタンを押下します。
9.次のように入力した後に「送信」ボタンを押下します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | テキスト | 大阪 | プルダウンに表示する文字列 |
| 2. | 値 | osaka | スクリプト等内部で使う文字列 |
10.これでデータセンタ・プルダウンフィールドの定義は完了です。
入力して設定を保存して次のフィールドを定義するために「変更」ボタンを押下します。
11.「入室責任者」フィールドを定義します。
「変数」タブ内の「新規」ボタンを押下します。
12.責任者は社員のみに限定するので社員一覧から選択するようにします。
次のように設定します。フィールド名の定義は「質問」タグを選択して「質問」と「名前」を設定します。「質問」はフォームに表示される文字列で「名前」はスクリプトなど内部で使う文字列です。
|No.|項目|値|コメント|
|---|---|---|
|1.|タイプ|参照|
|2.|必須|チェックする|
|3.|順序|20|
|4.|質問|入室責任者|フォームに表示する文字列|
|5.|名前|infra_dc_responsible|スクリプトなどで利用する文字列|
13.ServiceNow社員データベーステーブルを参照させます。
[タイプ仕様]タブを選択して次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | 編集の幅 | 25% | フォームで表示するフィールド幅を短くする |
| 2. | 参照 | ユーザー[sys_user] | ユーザテーブル |
| 3. | 参照修飾子の条件 | 内部ユーザを排除する | |
| 3.1 | 「アクティブ」「次の値に等しい」「true」「及び」 | ||
| 3.2 | 「Webサービスへのアクセスのみ」「次の値に等しい」「true」「及び」 | ||
| 3.3 | 「内部統合ユーザー」「次の値に等しい」「false」 |
14.申請を作成しているユーザをデフォルトにする。
「デフォルト値」タグを選択してデフォルト値に「javascript:gs.getUserID();」を入力する。
「ServiceNow - ログインユーザ情報を利用する」ページを参照
15.これで入室責任者フィールドの設定は完了。
「送信」ボタンを押下して次のフィールド定義に移ります。
16.「予定入館日時」フィールドを定義します。
「新規」ボタンを押下します。
17.予定入館日時フィールドフォームではカレンダーが表示される日時フィールドとして定義します。
次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイプ | 日付/時刻 | |
| 2. | 必須 | チェックする | |
| 3. | 順序 | 30 | |
| 4. | 質問 | 予定入館日時 | フォームに表示する文字列 |
| 5. | 名前 | infra_dc_planned_entry_datetime | スクリプトなどで利用する文字列 |
18.フィールドの幅が他フィールドと同じことを確認します。
「タイプ仕様」タブを選択して変数の幅を「システムのデフォルト(25%)」であることを確認します。
19.翌日の10:00をデフォルト値に設定します。
「デフォルト値」タブを選択してデフォルト値に「javascript:{gs.daysAgoLocal(-1).substring(0,10) + ' 10:00:00';}」を入力します。
「gs」はServiceNow内部のクラスであり、daysAgoLocal()は前日を返す関数です。引数に「-1」を指定することで翌日を返すようにします。日時が返されるので日付だけど取得するためにsubstring(0,10)して先頭の10文字を取得します。デフォルトを10時にするため「 10:00:00」を結合します。
20.これで予定入館日時フィルードの設定は完了です。「送信」ボタンを押下して設定を保存して次フィールドの定義に移ります。
21.次フィールドは「予定退館日時」です。設定は「予定入館日時」フィールドを類似しています。
新規フィールドを定義するために「新規」ボタンを押下します。
22.次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイプ | 日付/時刻 | |
| 2. | 必須 | チェックする | |
| 3. | 順序 | 40 | |
| 4. | 質問 | 予定退館日時 | フォームに表示する文字列 |
| 5. | 名前 | infra_dc_planned_exit_datetime | スクリプトなどで利用する文字列 |
23.フィールドの幅が他フィールドと同じことを確認します。
「タイプ仕様」タブを選択して変数の幅を「システムのデフォルト(25%)」であることを確認します。
24.翌日の18:00をデフォルト値に設定します。
「デフォルト値」タブを選択してデフォルト値に「javascript:{gs.daysAgoLocal(-1).substring(0,10) + ' 18:00:00';}」を入力します。
「gs」はServiceNow内部のクラスであり、daysAgoLocal()は前日を返す関数です。引数に「-1」を指定することで翌日を返すようにします。日時が返されるので日付だけど取得するためにsubstring(0,10)して先頭の10文字を取得します。デフォルトを10時にするため「 18:00:00」を結合します。
25.れで予定退館日時フィルードの設定は完了です。「送信」ボタンを押下して設定を保存して次フィールドの定義に移ります。
26.ラック番号フィールドを定義します。
「新規」ボタンを押下します。
27.利用するラックは予めから決められているたのと同時に複数のラックで作業を行う場合があるためラック番号をチェックボックスにします。
先ず、チェックボックスの上に表示するラベルを定義します。ラベルを定義しないと自動で「option」というラベルが挿入されます。これを避けるためにもチェックボックスの上にはラベルを定義します。
次のように定義します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイプ | ラベル | |
| 2. | 順序 | 100 | |
| 3. | 質問 | ラック番号 | フォームに表示する文字列 |
| 4. | 名前 | infra_dc_rack_number |
28.これで予定入館日時フィルードの設定は完了です。「送信」ボタンを押下して設定を保存して次フィールドの定義に移ります。
29.ラック番号用のチェックボックスを定義します。東京データセンタには3つのラックがあると想定します。
「新規」ボタンを押下します。
30.東京ラック１の定義を行います。
次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイプ | 選択ボックス | |
| 2. | 順序 | 110 | |
| 3. | 質問 | 東京ラック１ | フォームに表示する文字列 |
| 4. | 名前 | infra_dc_rack_tokyo_1 | スクリプトなどで利用する文字列 |
31.デフォルトでチェックされているようにします。
「デフォルト値」タブを選択してデフォルト値に「true」を入力します。
32.これで東京ラック１フィルードの設定は完了です。「送信」ボタンを押下して設定を保存して次ラックフィールドの定義に移ります。
33.東京ラック2フィールドを定義します。
「新規」ボタンを押下します。
34.東京ラック2の定義を行います。
次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイプ | 選択ボックス | |
| 2. | 順序 | 120 | |
| 3. | 質問 | 東京ラック2 | フォームに表示する文字列 |
| 4. | 名前 | infra_dc_rack_tokyo_2 | スクリプトなどで利用する文字列 |
35.デフォルトでチェックされているようにします。
「デフォルト値」タブを選択してデフォルト値に「true」を入力します。
36.これで東京ラック2フィルードの設定は完了です。「送信」ボタンを押下して設定を保存して次ラックフィールドの定義に移ります。
37.東京ラック3フィールドを定義します。
「新規」ボタンを押下します。
38.東京ラック3の定義を行います。
次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイプ | 選択ボックス | |
| 2. | 順序 | 130 | |
| 3. | 質問 | 東京ラック3 | フォームに表示する文字列 |
| 4. | 名前 | infra_dc_rack_tokyo_3 | スクリプトなどで利用する文字列 |
39.デフォルトでチェックされているようにします。
「デフォルト値」タブを選択してデフォルト値に「true」を入力します。
40.これで東京ラック3フィルードの設定は完了です。「送信」ボタンを押下して設定を保存します。これで東京ラックフィールドの定義は完了です。次大阪ラックフィールドの定義に移ります。
41.大阪ラックフィールドを定義します。大阪データセンタにはラック1台のを想定します。
「新規」ボタンを押下します。
42.大阪ラックの定義を行います。
次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイプ | 選択ボックス | |
| 2. | 順序 | 200 | |
| 3. | 質問 | 大阪ラック1 | フォームに表示する文字列 |
| 4. | 名前 | infra_dc_rack_osaka_1 | スクリプトなどで利用する文字列 |
43.デフォルトで東京データセンタが選択されるので大阪ラックはデフォルトではチェックされていないようにします。
「デフォルト値」タブを選択してデフォルト値に「false」を入力します。
44.これでラック番号フィルードの設定は完了です。「送信」ボタンを押下して設定を保存します。
45.入館カード番号フィールドを定義します。入館カードは東京のみです。後でスクリプトで東京と大阪の切り替えを行うようにします。
「新規」ボタンを押下します。
46.入館カードの定義を行います。
次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイプ | 選択ボックス | |
| 2. | 順序 | 300 | |
| 3. | 質問 | 持ち出しカード番号 | フォームに表示する文字列 |
| 4. | 名前 | infra_dc_tokyo_card_number | スクリプトなどで利用する文字列 |
47.フィールドの幅を短くします。
「タイプ仕様」タブを選択して変数の幅を「25%」にします。
48.カード番号をデフォルトで「1234」にします。
「デフォルト値」タブを選択してデフォルト値に「1234」を入力します。
49.これで持ち出しカード番号フィルードの設定は完了です。「送信」ボタンを押下して設定を保存します。
50.作業内容を記述するフィールドを定義します。
「新規」ボタンを押下します。
51.入室理由フィールドの定義を行います。
次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイプ | HTML | |
| 2. | 必須 | チェックする | |
| 3. | 順序 | 500 | |
| 4. | 質問 | 入室理由 | フォームに表示する文字列 |
| 5. | 名前 | infra_dc_reason_for_visit | スクリプトなどで利用する文字列 |
52.これで入室理由フィルードの設定は完了です。「送信」ボタンを押下して設定を保存します。
53.すべてのフィールドが定義されていることを確認します。デフォルトでは10フィールドまで表示されるので11番目のフィールドを確認するには▶アイコンを押下して、改ページします。
64.11フィールドすべてが正しく定義されていることを確認したら次に変数セットの定義を行います。
変数セットの作成
責任者以外に入館される人の情報を入力するフィールドを作成します。同時に何人入館されるのか不明なので変数セットとして必要に応じてフィールドを追加できるようにします。
1.「変数セット」タブを選択して「新規」ボタンを押下します。
2.変数セット（表）の列を定義します。
「Add」ボタンを押下します。
3.変数セット（表）の定義を行います。
次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイトル | 入室者 | |
| 2. | 内部名 | infra_dc_visitor_list | |
| 3. | 順序 | 600 |
4.表示の列を定義する必要があるのでページ移動なしで設定を保存します。
ヘッダ領域を右クリックして「保存」を選択します。
5.名前列の定義を行います。
「変数」タブを選択して「新規」ボタンを押下します。
6.名前フィールドの定義を行います。
次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイプ | 1行テキスト | |
| 2. | 順序 | 10 | |
| 3. | 質問 | 名前 | フォームに表示する文字列 |
| 4. | 名前 | infra_dc_vs_entry_person_name | スクリプトなどで利用する文字列 |
7.これで名前列の設定は完了です。「送信」ボタンを押下して設定を保存します。
8.次に所属列を定義します。
「新規」ボタンを押下します。
9.会社名／部署列の定義を行います。
次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | タイプ | 1行テキスト | |
| 2. | 順序 | 20 | |
| 3. | 質問 | 会社名／部署 | フォームに表示する文字列 |
| 4. | 名前 | infra_dc_vs_company_div | スクリプトなどで利用する文字列 |
10.これで会社名／部署列の設定は完了です。「送信」ボタンを押下して設定を保存します。
11.変数セットの定義も完了です。「更新」ボタンを押下します。
12.変更セット「入室者」が定義されていることを確認します。
クライアントスクリプト
5つのスクリプトを作成します。
1つは最初にページが表示されるときに東京データセンタ用のフィールドを表示させて、大阪データセンタ用のフィールドを非表示にするスクリプトです。2つ目は東京データセンタを大阪データセンタを切り替えた場合に表示する項目を変更するスクリプトを作成します。
3つ目は入館日時チェックです。4つ目は退館日時チェックです。5つ目は申請ボタンが押下された場合の日時チェックです。申請ボタンが押下された場合のチェックがないと入力エラーがある場合でも申請が登録されてしまいます。
初期ページ用のスクリプト
1.先ずは初期ページ表示のスクリプトを作成します。
「カタログクライアントスクリプト」タブを選択して「新規」ボタンを押下します。
2.次の処理を行うスクリプトを作成します。
- 東京データセンタのラックチェックボックスを表示して一つ以上の選択を必須にする
- 入館カードフィールドも表示する
- 大阪データセンタのラックチェックボックスを非表示にする
次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | 名前 | infra_dc_cs_initialization | |
| 2. | UIタイプ | すべて | サービスポータルでも実行する |
| 3. | タイプ | onLoad | |
| 4. | スクリプト | 次の内容を入力 |
function onLoad() {
g_form.setDisplay('infra_dc_rack_tokyo_1', true);
g_form.setDisplay('infra_dc_rack_tokyo_2', true);
g_form.setDisplay('infra_dc_rack_tokyo_3', true);
g_form.setMandatory('infra_dc_rack_tokyo_1', true);
g_form.setDisplay('infra_dc_rack_osaka_1', false);
g_form.setMandatory('infra_dc_tokyo_card_number', true);
}
3.内容を保存します。
「送信」ボタンを押下します。
データセンタの切り替え時に実行されるスクリプト
4.2番目のスクリプトを作成します。
「新規」ボタンを押下します。
5.次の処理を行うスクリプトを作成します。
- 大阪データセンタが選択された場合に次の処理を行う
- 東京データセンタラックの選択を不要にする（必須を解除）
- 東京データセンタラックチェックボックスのチェックをすべて外す
- 東京データセンタラックチェックボックスをすべて非表示にする
- 大阪データセンタラックチェックボックスを表示する
- 大阪データセンタラックチェックボックスの選択を必須にする
- 大阪データセンタラックチェックボックスを選択する
- 入館カードフィールドを不要にする（必須を解除）
- 入館カードフィールドを非表示にする
- 大阪データセンタ以外が選択された場合は次の処理を行う
- 大阪データセンタラックチェックボックスを不要とする（必須を解除）
- 大阪データセンタラックチェックボックスを非表示にする
- 大阪データセンタラックチェックボックスのチェックを外す
- 東京データセンタラックチェックボックスをすべてチェックする
- 東京データセンタラックチェックボックスを表示する
- 東京データセンタラックチェックボックスを必須とする
- 入館カードフィードを表示する
- 入館カードフィールドを必須にする
次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | 名前 | infra_dc_cs_setRackNoAndCardNo | |
| 2. | UIタイプ | すべて | サービスポータルでも実行する |
| 3. | タイプ | onChange | |
| 4. | 変数名 | infra_dc_data_center | データセンタフィールドに付けた名前 |
| 5. | スクリプト | 次の内容を入力 |
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}
if (newValue == 'osaka') {
g_form.setMandatory('infra_dc_rack_tokyo_1', false);
g_form.setValue('infra_dc_rack_tokyo_1', false);
g_form.setValue('infra_dc_rack_tokyo_2', false);
g_form.setValue('infra_dc_rack_tokyo_3', false);
g_form.setDisplay('infra_dc_rack_tokyo_1', false);
g_form.setDisplay('infra_dc_rack_tokyo_2', false);
g_form.setDisplay('infra_dc_rack_tokyo_3', false);
g_form.setDisplay('infra_dc_rack_osaka_1', true);
g_form.setMandatory('infra_dc_rack_osaka_1', true);
g_form.setValue('infra_dc_rack_osaka_1', true);
g_form.setMandatory('infra_dc_tokyo_card_number', false);
g_form.setDisplay('infra_dc_tokyo_card_number', false);
} else {
g_form.setMandatory('infra_dc_rack_osaka_1', false);
g_form.setValue('infra_dc_rack_osaka_1', false);
g_form.setDisplay('infra_dc_rack_osaka_1', false);
g_form.setValue('infra_dc_rack_tokyo_1', true);
g_form.setValue('infra_dc_rack_tokyo_2', true);
g_form.setValue('infra_dc_rack_tokyo_3', true);
g_form.setDisplay('infra_dc_rack_tokyo_1', true);
g_form.setDisplay('infra_dc_rack_tokyo_2', true);
g_form.setDisplay('infra_dc_rack_tokyo_3', true);
g_form.setMandatory('infra_dc_rack_tokyo_1', true);
// g_form.addOption('infra_dc_tokyo_card_number', '1234', '1234');
g_form.setDisplay('infra_dc_tokyo_card_number', true);
g_form.setMandatory('infra_dc_tokyo_card_number', true);
}
}
6.内容を保存します。
「送信」ボタンを押下します。
7.2つのスクリプトが作成されていることを確認します。これでフォームの作成は完了です。次のフォームが正しく動作するか確認します。
入館日時チェック
入館日時が今の日時以降であるチェックを行います。また、退館日時を入力した後に再び入館日時を変更することも可能なので、入館日時が退館日時より前であることも確認します。もし問題ない場合は表示していたエラーメッセージを非表示にします。また、同じエラーメッセージを繰り返して表示しないようにメッセージを表示する前に表示していたメッセージを消すようにします。
1. 「新規」ボタンを押下します。
2.次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | 名前 | infra_dc_cs_entryDateCheck | |
| 2. | UIタイプ | すべて | サービスポータルで表示した場合でも実行 |
| 3. | タイプ | onChange | 次の変数の値が変更した場合に実行する |
| 4. | 変数名 | infra_dc_planned_entry_datetime | 値が変更された場合にスクリプトを実行する変数名 |
スクリプト：
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}
var startDate = new Date(newValue); // 入力された入館日時
var curDate = new Date(); // 今の日時
if (startDate < curDate) { // 入館日時が今より前の場合はエラーメッセージを表示
g_form.hideFieldMsg('infra_dc_planned_entry_datetime'); // 以前に表示していたメッセージを消す
g_form.showFieldMsg('infra_dc_planned_entry_datetime', '入館日時を今より後の日時にしてください。', 'error');
} else { // 入館日時が今の日時以降の場合
var endDate = new Date(g_form.getValue('infra_dc_planned_exit_datetime')); // 退官日時を取得
if (startDate > endDate) { // 入館日時が退館日時より後の場合はエラーメッセージを表示
g_form.hideFieldMsg('infra_dc_planned_entry_datetime'); // 以前に表示していたメッセージを消す
g_form.showFieldMsg('infra_dc_planned_entry_datetime', '入館日時を退館日時より前の日時にしてください。', 'error');
} else { // 問題が無い場合は表示していたすべてのエラーメッセージを消す
g_form.hideAllFieldMsgs();
}
}
}
3.設定した内容を保存します。「送信」ボタンを押下します。
退館チェックスクリプト
入館日時チェックと同様に退館日時が入館日時より後であることを確認します。
1.「新規」ボタンを押下します。
2.次のように設定します。
| No. | 項目 | 値 | コメント |
|---|---|---|---|
| 1. | 名前 | infra_dc_cs_exitDateCheck | |
| 2. | UIタイプ | すべて | サービスポータルで表示した場合でも実行 |
| 3. | タイプ | onChange | 次の変数の値が変更した場合に実行する |
| 4. | 変数名 | infra_dc_planned_exit_datetime | 値が変更された場合にスクリプトを実行する変数名 |
スクリプト：
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}
var endDate = new Date(newValue);
var startDate = new Date(g_form.getValue('infra_dc_planned_entry_datetime'));
if (startDate > endDate) {
g_form.hideFieldMsg('infra_dc_planned_exit_datetime');
g_form.showFieldMsg('infra_dc_planned_exit_datetime', '退館日時を入館日時より後の日時にしてください。', 'error');
} else {
var curDate = new Date();
if (startDate < curDate) {
g_form.hideFieldMsg('infra_dc_planned_entry_datetime');
g_form.showFieldMsg('infra_dc_planned_entry_datetime', '入館日時を今より後の日時にしてください。', 'error');
} else {
g_form.hideAllFieldMsgs();
}
}
}
3.設定を保存します。「送信」ボタンを押下します。
申請ボタン押下ときに実行するスクリプト
onSubmitにチェックをしないとエラーがある場合でも申請されてしまいます。本スクリプトは入力エラーがある場合は申請できないようにします。
1.「新規」ボタンを押下します。
2.次のように設定します。
|No.|項目|値|コメント|
|---|---|---|---|
|1.|名前|infra_dc_cs_onsubmit|
|2.|UIタイプ|すべて|サービスポータルで表示した場合でも実行|
|3.|タイプ|onSubmit|申請ボタンが押下された場合に実行する|
スクリプト：
function onSubmit() {
var startDate = new Date(g_form.getValue('infra_dc_planned_entry_datetime'));
var curDate = new Date();
if (startDate < curDate) {
g_form.hideFieldMsg('infra_dc_planned_entry_datetime');
g_form.showFieldMsg('infra_dc_planned_entry_datetime', '入館日時を今より後の日時にしてください。', 'error');
g_form.clearMessages();
g_form.addErrorMessage('入館日時を今より後の日時にしてください。');
return false;
}
var endDate = new Date(g_form.getValue('infra_dc_planned_exit_datetime'));
if (startDate > endDate) {
g_form.hideFieldMsg('infra_dc_planned_exit_datetime');
g_form.showFieldMsg('infra_dc_planned_exit_datetime', '入館日時を退館日時より前の日時にしてください。', 'error');
g_form.clearMessages();
g_form.addErrorMessage('入館日時を退館日時より前の日時にしてください。');
return false;
}
}
3.設定を保存します。「送信」ボタンを押下します。
4.5つのクライアントスクリプトが作成されたことを確認します。
動作確認
サービスポータルに公開する前にフォームが正しく動作することを確認します。
1.フォーム定義ページの右上にある「試行」ボタンを押下します。
2.フォームが表示されますので色々を値を変更して試します。
3.大阪データセンタを選択した場合はラック番号が変わり、入館カードフィールドが表示になることを確認します。問題が無い場合はサービスポータルに登録します。
サービスポータル
一般ユーザが入館フォームを利用できるようにするためにフォームをサービスポータルに登録します。
1.サービスポータルからフォームを開けるようにするためにカタログとカテゴリを指定します。
カタログの右の鍵アイコンをクリックします。
2.入力フィールドに右の虫眼鏡アイコンをクリックします。
3.表示されるカタログ一覧から「サービスカタログ」を選択します。ポップアップウインドウが閉じて、カタログに「サービスカタログ」が追加されます。
4.カテゴリを指定します。
カテゴリフィールドの右の虫眼鏡アイコンをクリックします。
5.一覧から「サービス」を選択します。
6.カタログとカテゴリが設定されたことを確認した後に「更新」ボタンを押下して設定を保存します。
7.サービスポータルからフォームを開きます。
アプリケーションナビゲータから「ポータル」を検索して「サービスポータルホーム」を選択します。
8.表示されたサービスポータルホームページから「要求内容」を選択します。
9.「オフィス」－「サービス」を選択します。
10.「データセンター作業申請」を選択します。
11.作成したフォームが表示されます。再びフォームが正しく動作するか確認します。
12.データセンタを「大阪」に変更した場合はラック番号が変更され、入館カードフィールドが非表示になることを確認します。「東京」を選択した場合は東京ラック番号チェックボックス3つと入館カードフィールドが表示されることを確認します。
実践ServiceNow - データセンタ訪問許可申請 - フローの作成に続く
以上