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

目次

はじめに

kintone のプロセス管理を利用していて、次のように思ったことはありませんか?

「〇〇アプリの申請が済んでいるか確認してから xx アプリで承認したいな〜」

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

このような場合、承認者がわざわざ別アプリの申請レコードを探すか、申請者が都度別アプリのレコードの URL を伝えることになったりと、やりとりが面倒ですよね。
本記事では関連する別アプリのプロセスが完了したら、自動でそれがわかるようなカスタマイズを紹介したいと思います!

information

Internet Explorer の場合は webpack入門 のように webpack や Polyfill を使用する必要があります。

申請フローのイメージ

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

アプリ A を親プロセスアプリ、アプリ B は子プロセスアプリという立ち位置で利用します。
カスタマイズで実現するプロセス管理は次のようなフローになります。

  1. 申請者がアプリ A にレコードを作成し、プロセスを進める。
  2. アプリ A で入力した内容で、自動的にアプリ B にもレコードを作成し、プロセスが進む。
    アプリ A のレコードはアプリ B のレコードが承認されるまでプロセスを進めることはできない。
  3. アプリ B の承認者がレコードの内容を承認する。
  4. アプリ A のレコード内にある「アプリ B の承認完了フラグ」が自動で完了になり、プロセスが進む。
  5. アプリ A の承認者がレコードの内容を承認する。

今回、新たにカスタマイズで実現する範囲は、2 の「アプリ A のレコードはアプリ B のレコードが承認されるまでプロセスを進めることはできない」の部分と 4 の処理になります。

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

下準備

アプリの準備

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

アプリ A
フィールド名 フィールドコード フィールドタイプ 項目
アプリ B の承認完了フラグ アプリ B の承認完了フラグ チェックボックス 完了
アプリ B
フィールド名 フィールドコード フィールドタイプ
アプリ A のレコード ID アプリ A のレコード ID 文字列(1 行)

プロセス管理の設定

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

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

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

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

JavaScript カスタマイズ

ここまでの準備ができたら JavaScript カスタマイズを加えていきます。
まず、アプリ A に下の JavaScript を適用します。20 行目はアプリ B のアプリ ID に修正してください。

  • アプリ B のアプリ ID が 2 の場合
    • 修正前:const appId = 'xxx';
    • 修正後:const appId = '2';
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/*
 * プロセスを進めると自動で別アプリのレコードを作成し、ステータスを進めるサンプルプログラム
 * Copyright (c) 2021 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/

(() => {
  'use strict';

  // アプリBの承認完了フラグを画面上で編集できないようにする
  kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.index.edit.show'], event => {
    event.record['アプリBの承認完了フラグ'].disabled = true;
    return event;
  });

  kintone.events.on('app.record.detail.process.proceed', event => {
    const action = event.action.value;
    const appId = 'xxx'; // アプリBのアプリIDに書き換えてください
    const record = event.record;
    const paramRecordPost = {
      app: appId,
      record: {
        申請タイトルB: {
          value: record['申請タイトルA'].value
        },
        申請内容B: {
          value: record['申請内容A'].value
        },
        アプリAのレコードID: {
          value: record.$id.value
        }
      }
    };

    if (action !== '処理開始') {
      return event;
    }

    return kintone.api(kintone.api.url('/k/v1/record.json', true), 'POST', paramRecordPost).then(resp => {
      const recordId = resp.id;
      const paramStatusPut = {
        action: action,
        app: appId,
        id: recordId
      };
      return kintone.api(kintone.api.url('/k/v1/record/status.json', true), 'PUT', paramStatusPut);
    }).then(() => {
      alert('アプリBのレコードを作成し、プロセスを進めました。');
      return event;
    }).catch(err => {
      console.log(err);
      return event;
    });
  });
})();

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

  • アプリ A のアプリ ID が 1 の場合
    • 修正前:const appId = 'xxx';
    • 修正後:const appId = '1';
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/*
 * プロセスを進めると関連する別アプリのレコードを更新とステータスを進めるサンプルプログラム
 * Copyright (c) 2021 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/

(() => {
  'use strict';

  kintone.events.on('app.record.detail.process.proceed', event => {
    const actionB = event.action.value;
    const appId = 'xxx'; // アプリAのアプリIDに書き換えてください
    const recordId = event.record['アプリAのレコードID'].value;
    const paramsRecordPut = {
      app: appId,
      id: recordId,
      record: {
        アプリBの承認完了フラグ: {
          value: ['完了']
        }
      }
    };

    if (actionB !== '完了する') {
      return event;
    }

    return kintone.api(kintone.api.url('/k/v1/record.json', true), 'PUT', paramsRecordPut).then(resp => {
      const actionA = '最終承認者へ申請する';
      const paramStatusPut = {
        action: actionA,
        app: appId,
        id: recordId
      };
      return kintone.api(kintone.api.url('/k/v1/record/status.json', true), 'PUT', paramStatusPut);
    }).then(() => {
      alert('アプリAのレコードのプロセスを進めました。');
      return event;
    }).catch(err => {
      console.log(err);
      return event;
    });
  });
})();

動作確認

カスタマイズを反映させたら、動作確認をしていきます。
アプリ A でレコードを作成し「処理開始」をクリックし「実行」を選択してプロセスを進めましょう。
アプリ B のレコード作成とプロセスの進行が成功すると「アプリ B のレコードを作成し、プロセスを進めました」とメッセージが表示されます。

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

なお、アプリ A に作成した「アプリ B の承認完了フラグ」は、カスタマイズによりレコードの追加・編集画面やレコード一覧画面のインライン編集からは変更できないようになっています。

次に、プロセスの作業者として割り当てられたユーザーでアプリ B を開き、カスタマイズにより作成されたレコードを確認します。
プロセス管理のステータスが「処理中」になっていて、申請タイトルと申請内容にアプリ A で記入した内容が記入されていることを確認し「完了する」のアクションを実行しましょう。

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

アプリ A のレコードを開くと、プロセスのステータスが「処理中(アプリ B 承認済み)」に進み、「アプリ B の承認完了フラグ」が「完了」になっていることが確認できます。

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

おわりに

いかがでしたでしょうか?
プロセス管理でアクションを実行するときのイベント」や「 1 件のレコードのステータスを更新する」を活用することで、このように他のアプリとプロセス管理を連携できます。

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

注意事項

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

information

この Tips は、2021 年 8 月版 kintone で動作を確認しています。