ServiceNow でフォーム送信後に完了ページに遷移する方法

• 概要
• 環境
• 完了ページの用意
• ページ遷移用のクライアントスクリプトの追加
• フォームにイベントを追加する
• 動作確認
• 最後に

概要

過去に独自のフォームを作成してフォームのデータを登録できるようにしました
今回は登録後に完了ページに遷移する方法を紹介します

環境

• ServiceNow (2024/08/05 時点)
  • Release Washington DC

完了ページの用意

何でも OK です
ポータルを作成した際に自動で作成されたものがあるのでそれでも OK です

不要なボタンなどがあれば削除しましょう
とりあえず今回はトップページに移動するボタンのみにします

ページ遷移用のクライアントスクリプトの追加

フォームのページ (Record Page(request)) に追加します

名前は何でも OK です
スクリプトの内容は以下になります

フォームのアクションが inserted なら登録完了とみなし画面を遷移します

/*
 * @param {params} params
 * @param {api} params.api
 * @param {any} params.event
 * @param {any} params.imports
 */
function handler({
    api,
    event,
    helpers,
    imports
}) {
    // フォーム情報の取得
    const name = api.data.glide_form_1.nowRecordFormBlob.formFieldValues.name.value;
    // アクションの結果が inserted になっているかチェック
    const {
        status: action
    } = event.payload;
    if (action !== 'inserted') {
        return;
    }
    // name が空じゃないなら成功とみなしページを成功ページに遷移する
    console.log("move page!!"); 
        helpers.navigate.to('order_success', {
            // 必要な場合は次のページに context.props を渡す
            // sysId: event.payload.screenParams.sys_id,
            // table: event.payload.screenParams.table
        });
}

遷移先の画面情報は route 情報を文字列として渡します
route 情報は各ページの Settings から確認することができます

フォームにイベントを追加する

次にフォームにイベントを追加します
フォームのテキスト情報がサーバに登録されたり内容が変更された場合のイベントを取得することができます

フォームはデータリソースにあるので出たリソースから Events タグで Add event mapping で追加します

「Screen Status Changed」というイベントがあるのでこれを選択します

Screen Status Changed のイベント時に発火するクライアントスクリプトを選択します
先ほど作成したクライアントスクリプトを選択します

フォームにイベントを追加できたら完了です

動作確認

Preview から確認しましょう
フォームにデータを入力し Submit すると自動で画面が遷移することが確認できます
もし画面が遷移しない場合は action などの条件が正しいか event.payload のなどを確認してみましょう

最後に

フォームでデータ登録後に画面を遷移する方法を紹介しました
過去に Link to destination イベントで画面を遷移する方法を紹介しましたが今回はクライアントスクリプトで遷移する方法を紹介しました

クライアントスクリプトで遷移する場合は helpers.navigate.to を使います