cybozu developer network

カテゴリー内の他の記事

プロセス管理の承認フローを連動させる!アプリ間でプロセス管理を連携させてみよう

Index

はじめに

kintone のプロセス管理を利用していて

「〇〇アプリ(※「〇〇」は別のアプリ名)の申請が済んでいるか確認してから承認したいな〜」

と思ったことはありませんか?

 (例)営業部内の出張申請で承認を得ているのを確認してから、経理部側で出張旅費の承認をしたい

このような場合、承認者がわざわざ別アプリの申請レコードを探すか、

申請者が都度別アプリのレコードのURLを伝えることになったりと、やり取りが面倒ですよね。

本記事では関連する別アプリのプロセスが完了したら、自動でそれがわかるようなカスタマイズをご紹介したいと思います!

IE で使用する場合は webpack入門 ~Babel,Polyfillを使って快適ES6ライフ~ のように Webpack や Polyfill を使用する必要があります。

申請フローのイメージ

今回のカスタマイズでは「同じような内容の申請は一発で済ませる!複数アプリのプロセス管理を一度に進めよう」で作成したアプリ、

プロセス管理の設定を使ってカスタマイズを実装していきます!

アプリAを親プロセスアプリ、アプリBは子プロセスアプリという立ち位置で利用します。

カスタマイズで実現するプロセス管理は次のようなフローになります。

  1. 申請者がアプリAにレコードを作成し、プロセスを進める
  2. アプリAに入力した内容をもとに、自動的にアプリBにもレコードが作成され、プロセスが進む
    ※アプリAのレコードはアプリBのレコードが承認されるまでプロセスを進めることはできない
  3. アプリBの承認者がレコードの内容を承認
  4. アプリAのレコード内にある「アプリBの承認完了フラグ」が自動で完了になり、プロセスが進む
  5. アプリAの承認者がレコードの内容を承認
    (今回、新たにカスタマイズで実現する範囲は2の※部分と4の処理になります。)

flow_image.png

以降の説明では、上記の記事で設定したアプリの状態から変更がある点を中心に説明していきます。

事前準備

アプリの準備

アプリAとアプリBに以下のフィールドを追加します。

アプリA

フィールド名 フィールドコード フィールドタイプ 項目
アプリBの承認完了フラグ アプリBの承認完了フラグ チェックボックス 完了

アプリB

フィールド名 フィールドコード フィールドタイプ
アプリAのレコードID アプリAのレコードID 文字列(1行)

プロセス管理の設定

アプリA、アプリBでそれぞれ以下の通りにプロセス管理の設定を変更します。

アプリA:プロセス管理の設定

processA.png

  1. 「2. ステータス」の設定
    1. ステータス「処理中」を「処理中(アプリB未承認)」に変更します。
    2. 「処理中(アプリB承認済み)」を追加します。
  2. 「3. プロセス」の設定
    1.  未処理の実行後のステータスを「処理中(アプリB未承認)」に設定します。
    2. 「未処理」の次の行にプロセスを1件追加し、アクション実行前のステータスを「処理中(アプリB未承認)」に設定します。
    3. ステータス「処理中(アプリB未承認)」でアクションが実行できる条件を「アプリBの承認完了フラグ:次のいずれかを含む:完了」に設定します。
    4. ステータス「処理中(アプリB未承認)」でのアクション名を「最終承認者へ申請する」に設定します。
    5. ステータス「処理中(アプリB未承認)」での実行後のステータスを「処理中(アプリB承認済み)」にします。
    6. ステータス「処理中(アプリB承認済み)」の作業者は「次のユーザーのうち1人」を選択し、任意のユーザーを設定します。

アプリB:プロセス管理の設定

processB.png

ステータス「処理中」の作業者は「次のユーザーのうち1人」を選択し、任意のユーザーを設定します。

JavaScript カスタマイズ

ここまでの準備ができたら JavaScript カスタマイズを加えていきます。

まず、アプリAに下の JavaScript を適用します。20行目はアプリBのアプリIDに修正してください。

(アプリBのアプリIDが2の場合)

修正前:const appId = 'xxx';

修正後:const appId = '2';

次に以下の JavaScript をアプリBに適用します。14行目はアプリAのアプリIDに修正してください。

(アプリAのアプリIDが1の場合)

修正前:const appId = 'xxx';

修正後:const appId = '1';

動作確認

カスタマイズを反映させたら、動作確認をしていきます。

アプリAでレコードを作成し「処理開始」をクリックし「実行」を選択してプロセスを進めましょう。

アプリBのレコード作成とプロセスの進行が成功すると「アプリBのレコードを作成し、プロセスを進めました。」

とメッセージが表示されます。

ここまでは「同じような内容の申請は一発で済ませる!複数アプリのプロセス管理を一度に進めよう」と同じ挙動になっています。

check1.png

なお、アプリAに作成した「アプリBの承認完了フラグ」は、カスタマイズにより

レコードの追加・編集画面やレコード一覧画面のインライン編集からは変更できないようになっています。

check2.png

次にプロセスの作業者として割り当てられたユーザーでアプリBを開き、カスタマイズにより作成されたレコードを確認します。

プロセス管理のステータスが「処理中」になっていて、申請タイトルと申請内容にアプリAで記入した内容が

記入されていることを確認し「完了する」のアクションを実行しましょう。

「アプリAのレコードのプロセスを進めました。」とブラウザ上に表示されれば、カスタマイズが実行された証拠です!

check3.png

アプリAのレコードを開くと、プロセスのステータスが「処理中(アプリB承認済み)」に進み、

「アプリBの承認完了フラグ」が「完了」になっていることが確認できます。

check4.png

最後に、承認の担当ユーザーが「完了する」のアクションを実行することで申請のプロセスは完了です!

おわりに

いかがでしたでしょうか?「プロセス管理のアクションイベント」や「レコードのステータスの更新 API」を

活用することで、このように他のアプリとプロセス管理を連携できるようになります。

標準機能では実現できない申請フローがあった際には「カスタマイズで実現できないか?」と考えるヒントになれば幸いです!

注意事項

  • 本カスタマイズは PC のみで動作します。

このTipsは、2021年8月版 kintoneで確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。