Tips

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

目次

はじめに

固定リンクがコピーされました

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

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

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

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

information

Internet Explorerの場合は次の記事で紹介しているwebpackやPolyfillを使用する必要があります。
webpackとBabel、Polyfillを導入してkintoneカスタマイズを効率化する

申請フローのイメージ

固定リンクがコピーされました

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

アプリ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で動作を確認しています。