【ServiceNow PDI】Integration Hubで作った連携機能をフローで呼び出すカスタムアプリの実装手順まとめ

前回、ServiceNow Integration Hubの連携機能（アクション）をノーコードで作成しました。

今回は、この連携機能を呼び出すフローを作成し、この機能を使って金融機関情報を検索し簡単に登録できるカスタムアプリを作成してみようと思います。

また、今回もIntegration Hubの投稿と同様に、無償で技術学習できる環境としてのPDI(Personal Development Instance)で作成を行ってみます。

そして今回のチャレンジにも”ノーコード”を基本として、できる限りローコード（スクリプティング）要素を少なくし、設定だけでアプリを作れるようにしてみます。

１．作成した環境と開発ツール

・ServiceNow Platform環境：Xanadu バージョン版 PDI
・開発ツール：App Engine Studio

２．App Engine Studioを使ったアプリケーションの作成

App Engine StudioはServiceNowのノーコードによるカスタムアプリケーション開発を様々な開発ビルダーツールを呼び出して作業が行えるツールです。
この開発ツールでは、以下３つのメニューステップでアプリケーションを作成してゆきます。
①データモデルの定義：テーブルとフィールドの定義
②エクスペリエンス（画面）の作成：カタログ（起票や申請）、ワークスペース（業務対応）、モバイルなどの画面作成
③ロジックと自動化：フロー、Process Automation Designerによるプレイブックアプリの作成

では、App Engine Studio画面を起動します。
ファイルナビゲータより、[app e]と入力し、リストされた[App Engine Studio]メニューを選択します。

App Engine Studio画面の[アプリを作成]より今回利用するアプリケーションの作成を開始します。

カスタムアプリケーションの設定は以下のような形です。
・アプリケーション名：Bank Info Management
・ロール定義：admin、user

追加されたアプリケーションには、アプリケーションファイルなどが何も含まれていない状況です。

ステップ①のデータモデルの定義を開始します。

今回のアプリは申請・承認を要すいわゆるワークフロー・アプリケーションとは異なるアプリ構成にしようと思います。したがって、タスクテーブルから拡張したテーブルではなく、スクラッチでカスタムテーブルを作成してゆきます。

[データ]メニューの[追加]ボタンより、テーブルの作成を開始します。
・空白のテーブルを作成

・新テーブルの作成

・テーブルラベル：Bank Info Management
・自動番号を有効化
・プリフィックス：BANIFMG

作成されたテーブルに対して、フィールドの追加を行ってゆきます。
・金融カナ：APIサービスからのデータ格納用
・金融ローマ字：APIサービスからのデータ格納用
・金融機関コード：金融機関コード（4桁）入力用
・金融機関名：APIサービスからのデータ格納用

続いて画面を作成します。今回の画面は業務側のワークスペースを利用しします。
エクスペリエンスメニューの[追加]より、ワークスペースを作成します。
・ワークスペース

・↓デフォルトの設定を受け入れて次の画面へ

・↓デフォルトの設定を受け入れて次の画面へ

作成されたワークスペースで開くレコード詳細画面（明細画面）のフォームを編集します。

テーブル定義を行った画面で、[フォーム]タブに移動します。
デフォルトビューメニューより、
・Workspace Bank info Management 0
を選択します。
※ビューのメニューに表示されない場合には、ブラウザのリロード（更新）を行うことで表示されるようになります。

フォーム表示を２列コンテナに切り替えます。

続いて、左側のカスタムテーブルフィールドより、
・金融機関コード
・金融機関名
・金融カナ
・金融ローマ字
をドラッグ＆ドロップで配置していきます。

続いて、今回の技術的な要所となる、フローの作成に入ります。
App Engine Studioのアプリホーム画面のロジックと自動化メニューの[追加]よりフローを作成してゆきます。
・フローを選択

・ゼロから構築を選択

・名前：Bank Info Management
・実行方法：システムユーザー
フローの作成が完了した後、[フローの編集]を押下し、Flow Designerを起動します。

ここから、Flow Designerを使いフローステップの定義を行います。

フローが実行される条件イベント（トリガー）を指定します。
・トリガー：作成時または更新時
・テーブル：Bank Info Management
・トリガー実行：更新ごと
これで、テーブルにレコードが新規作成されたタイミング、またはレコードの更新時にフローが実行されます。

フローアクションを定義してゆきます。

金融機関コードのデータ有無を評価する分岐を定義します。
フローロジックより[If]ステートメントを追加します。
・条件ラベル：金融機関コードが挿入された場合
・条件1：トリガーレコードの[金融機関コード]データピル
※ドラッグ＆ドロップで配置します。
・演算子：（空）でない

IFステートメントの条件が真の場合のステップへ連携機能アクションを呼ぶステップを定義します。アクションの追加より、
・Bankと入力し、[Get Bank Name]を選択
※Integration Hubを使って作成したカスタム連携用アクション

・Bank Codeにトリガーレコードの[金融機関コード]データピルを挿入
※右側のデータピルより、ドラッグ＆ドロップで配置。

このステップによって、画面から入力された「金融機関コード」を連携アクションに引き渡し、金融機関情報をAPIサービスから受領できるようになるわけです。

続けて、この受領した金融機関情報をレコードのデータとして更新する処理を作ってゆきます。

Get Bank Nameステップに続く経路に、アクションメニューより[レコードを更新]を追加します。
・レコード：Bank Info Managementレコードをドラッグ&ドロップで配置
・フィールドを以下の３つを追加
　１）金融機関名：Get Bank Nameの出力値 BankNameを指定
　２）金融機関カナ：Get Bank Nameの出力値 BankKanaを指定
　３）金融機関ローマ字：Get Bank Nameの出力値 BankRomaを指定
※右側のGet Bank Nameステップで取得した出力値をそれぞれドラッグ＆ドロップで配置

カスタム作成した連携機能アクション側で、きちんと出力変数を定義していましたので、フローステップ上でこのように簡単に入力値として指定できます。

最後に、金融機関情報が入力されなかった場合の経路を追加します。

IFのもう１つの分岐箇所にElseステートメントを追加し、こちらに入った場合にはフローを停止するステップを追加しておきます。

ここまでの機能は、「金融機関コードが入力される場合」だけの想定の機能となってます。しかし実際には、金融機関名を使って登録を行うケースもあるでしょう。

よって、今後の機能拡張用途にこのElseの分岐ステップは使えそうです。
例えば、

・金融機関コードではなく、金融機関名が入力された場合に、その情報を基にAPIサービスから、金融機関コードやその他の金融機関情報を受領しにゆく振る舞いの機能

などを、カスタム連携アクションで作成し、Else経路へステップを追加することで、ユーザー要求に応じた機能を追加できると思われます。

フローの設定を保存し、[有効化]を行います。

４．UIアクションの追加と金融機関コードの入力チェック

もう、すでにアプリの基本機能としては動作するようになっています。ここからは少し本番利用に向けた機能追加をローコード技術を使って実装してゆきます。

まず、ワークスペースのフォーム画面は、デフォルトでは[保存]ボタンと[削除]ボタンしかありません。[保存]ボタンで金融情報を取得しにゆく画面機能のふるまいとしては、違和感があると思います。

そこで、
・UIアクション(ボタン)で[金融機関コード入力で登録]を追加
することで、見栄えの良い画面にしてゆきます。

ファイルナビゲータに[UI アクション]と入力し、UI アクションメニューを選択します。

[新規]ボタンよりUIアクションを追加します。
・名前：金融機関コード入力で情報登録
・テーブル：Bank Info Managment
・アクション名：register_by_fincode
・クライアント：有効化

画面をスクロールし、以下の条件フィールドを設定します。
・条件： current.canWrite()

さらに画面をスクロールし、ワークスペース定義に以下を設定します。
・ワークスペースフォームボタン：有効化
・スクリプト：以下のコードを挿入

function onClick(g_form) {

 // フォームを保存
 g_form.save();

}

このUIアクションの定義によって、レコードを保存する動作は既存の[保存]ボタンと変わりませんが、ボタンの表示上で「金融機関コードの入力」で金融情報が登録されると直感的に分かりやすい画面機能になるのではと思います。

最後に、金融機関コードの4桁文字列の入力チェック機能です。
ここは、フィールドに入力された文字列を4桁の数字がどうかをチェックする機能を作成します。

ファイルナビゲータより、[スタジオ]と入力し、ローコード開発ツールのStudio IDEを起動し、[Bank Info Management]アプリケーションを開きます。

アプリケーションファイルの追加より、[クライアントスクリプト]を作成します。
・名前：Check Financial Code
・テーブル：Bank Info Management
・UIタイプ：すべて
・タイプ：OnChange
・フィールド：金融機関コード
・スクリプト：以下のコードを挿入します。

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

	var bankCodeField = g_form.getValue('bank_code'); // bank_codeの値を取得
	var fourDigitPattern = /^\d{4}$/; // 4桁の数字のみを許可する正規表現

	// bank_codeが4桁の数字でない場合、アラートを表示
	if (!fourDigitPattern.test(bankCodeField)) {
		alert('4桁の金融機関コードを数字で入力してください');
		return false;
	}
	return true;
}

スクリプトを保存して完成です。

５．アプリケーションの動作確認

App Engine Studioのアプリホーム画面で、エクスペリエンスにある、ワークスペースの[プレビュー]を開きます。
Bank Info Mangementのリスト画面へ遷移します。
リスト上の[新規]ボタンを押下します。

まず、金融機関コードに4桁の数字以外を入力すると、入力チェックが機能し、アラートメッセージが表示されます。

保存ボタンの横に、[金融機関コード入力で情報登録]というUIアクションも正しく表示されていることが確認できます。

では、正しい、金融機関コードを入力し、
例）0005
[金融機関コード入力で情報登録]を押下します。

実行後、金融機関情報が受領され、それぞれのフィールドの値として更新されたことが確認できます。

今回のチャレンジ投稿は以上となります。

Integration Hubを使った他システム連携をフローから呼び出すカスタムアプリをノーコード（一部はローコード）を基本に作ってみました。
本投稿が、皆様のServiceNow開発を進める上でのご参考になれば幸いです。