ServiceNow でポータルに独自のフォーム画面を作成する方法
概要
データテーブルを作成するとそれに付随する簡易的なフォーム画面は作成してくれますがそれをポータルで使うことができません
今回はポータルで使える独自のフォーム画面を作成してみます
なお データリソースや Glide From、Client Script といったやや応用の技術を使うので少し複雑な処理になります
環境
- ServiceNow (2024/08/05 時点)
まずは App Engine Studio から Experience で作成してあるポータルを開きます
ポータルは UI Builder で開きます
Record Page (request) というページがあるのでこれを使います
左下にデータリソースを管理するボタンがあるので選択します
データリソースを追加するので Add を選択します
そしてデータリソースの一覧から Glide Form を選択し追加します
画面にないですがデータリソースの追加ボタンは検索画面の下の方にあります
Glide Form の設定をします
- Table -> @context.props.table
- Sys ID -> @context.props.sysId
とりあえずデータリソースの設定は以上です
フォームコンポーネントの追加
次に UI のフォームコンポーネントを追加します
好きなところに Form を追加します
フォームの設定をします
- Preset -> None
- Table -> @context.props.table
- Sys ID -> @context.props.sysId
- Sections -> @data.glide_form_1.nowRecordFormBlob.sections
- Fields -> @data.glide_form_1.nowRecordFormBlob.fields
- Disable section collapsing -> ON
ここで参照している glide_form_1 変数は先程作成した Glide Form データリソースを識別するために自動で振られた ID になります
UI Builder 内で使用するテスト変数の設定
UI Builder がプレビューで表示するためのテーブル情報やテスト用の ID を設定します
右上の警告マークから設定します
テーブルはテーブルを識別するための ID を入力します
これはデータテーブルから確認でき Properties から確認できます
確認できたらテーブル ID と一緒に Sys ID も入力します
とりあえずテストなので存在しない -1 という値を入力しておきます
テスト値が設定できると警告マークが消えるのが確認できると思います
クライアントスクリプトの追加
ServiceNow には Glide クラスという機能がありクライアント側からサーバ側のデータを操作するための便利クラスがあります
その中の Glide Form というクラスを UI Builder で使用します
使用する Glide Form は冒頭で作成したデータリソースから参照することができます
クライアントスクリプトは右下のスクリプトボタンから追加できます
クライアントスクリプトの追加画面になるので Add を選択し追加します
そしてクライアントスクリプトの名前を入力し以下の内容でクライアントスクリプトを登録します
function handler({
api,
event,
helpers,
imports
}) {
api.data.glide_form_1.setMandatory({
fieldName: 'name',
mandatory: false
});
api.data.glide_form_1.save();
console.log("saved!!");
}
glide_form_1 はデータリソースで定義した Glide Form クラスのオブジェクトです
フォームに入力されているデータを save するだけでサーバ側にデータを登録することができます
これでクライアントスクリプトの登録は完了です
あとはボタンを設置しこのスクリプトを紐づけるだけです
ボタンコンポーネントの設定
先程のフォームの下にでも登録すれば OK です
ラベルや色などを適宜調整しましょう
- Label -> Send
- Variant -> Primary
- Size -> Medium
- Disable -> OFF
そしてイベントを登録します
Add Event handler から先ほど作成したクライアントスクリプトの Send を選択し追加します
動作確認
設定を保存し Preview から確認しましょう
Preview がうまく表示されない場合はデータリソースに Form Controller が追加されていないか確認しましょう
ボタンを押してちゃんとデータテーブルに登録されていることを確認しましょう
今回は以下を考慮していないので追加で実装してみてもいいかもしれません
- 登録後に登録完了画面に移動しないので何度も登録できてしまう
- 同一 Preview 内では同一 Sys ID が使われるためボタンを複数回押しても別の Preview でなければ同一レコードの書き換えになる
最後に
ServiceNow でポータルに独自のフォームを実装しデータリソースとクライアントスクリプトを使ってデータを登録する方法を紹介しました
Glide 関連のクラスは ServiceNow でのコア技術になっているので応用したアプリなどを作りたい場合は必須かもしれません
参考サイト
