申請書を表示した時に申請ステータスによって項目を非表示にする

申請書を表示した際に、申請ステータスによって項目を非表示にするサンプルをご紹介します。

サンプルについて

本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。

利用するAPI

• 申請書閲覧・判定画面イベント
• 申請書の概要を取得する REST API
• コラボフロー REST APIを実行する

サンプルフォーム

サンプルで利用するフォームには、以下のパーツを配置しています。

パーツID	パーツタイプ	補足
fidQuantity	テキスト（一行）パーツ	数値 数量
fidUnitPrice	テキスト（一行）パーツ	金額 単価
fidPrice	テキスト（一行）パーツ	金額 金額

カスタマイズコード

(function () {
    'use strict';

    collaboflow.events.on('request.detail.show', function (e) {

        const path = '/v1/documents/' + e.document_id;
        const parameters = {
            "app_cd": e.app_cd
        };

        // コラボフローAPIで申請書情報を取得
        return collaboflow.api.get(path, parameters)
            .then(function (response) {

                if (response.status !== 200) {
                    throw new Error(response.body.messages);
                }

                // 決裁か却下なら金額を表示しない
                const isDisplay = !/decision|reject/.test(response.body.flow_status);
                e.parts['fidPrice'].display = isDisplay;
            })
            .catch(function (err) {
                console.error(err);
            });
    });

})();

動作の確認手順

1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定＞フォーム設定から新規にフォームを作成します。
3. サンプルフォームに、先で記載されている必要な項目を配置します。
4. サンプルフォームを再度表示し、カスタマイズタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定＞経路設定から新規に経路を作成します。
7. 任意に経路アイテムを配置して、経路を作成します。
8. 新規文書から作成した経路名をクリックします。
9. 申請時は、金額の項目が入力可能で表示されています。
10. 申請し、決裁します。
11. 決裁後の申請書を一覧や検索から表示します。
12. 金額の項目が非表示状態となります。

補足

申請のステータス値について

今後、イベント内のデータとして提供予定です。