【コラボフロー × kintone】検索APIでkintoneからの画面遷移を楽に！？

なな👾

2022年12月14日 22:43

コラボフロー Advent Calendar 2022 15日目の記事です🌈🌈🌈

今年も残り半月ですね！こないだ夏満喫してた気がするのに…😎
あっちゅーまに2023年ですね。

ところで。
我が家では今年から猫を飼い始めたのですが・・・

猫はコタツで丸くなる
猫は土鍋に入って丸くなる

あいにくウチにはコタツも土鍋もないので
実証してみたいのですが、できません😭

毎年この季節はコタツが欲しくなります・・・
嗚呼コタツ・・・小さいの買って自分の部屋に置こうかしら

コラボフローの検索API、使ってますか？

唐突に本題です。

10月にリリースされたコラボフロー2.18.13 で
申請書の検索APIがREST APIに加わったのですが、ご存知でしょうか！

コラボフロー JavaScript API と組み合わせて使うもヨシ
外部のAPIからたたいて気軽に申請書の情報を検索するもヨシ

「使い方無限大なんじゃないか」と密かに愛を寄せている私です。

と、思っていたら8日目の記事でこにおさんが
検索APIへの愛を書き起こしているじゃないか……ッッ

先を越されました　ｼﾞｪﾗｼｰ

こにおさんはコラボフローの中でもっと申請書の使い方を
よりよくするカスタマイズを作ってくれていますが

わたしはコラボフロー for kintone を使って、kintoneからコラボフローへアクセスできるカスタマイズを作ってみました！

中身は8日目のこにおさんと同じような感じなので
「kintoneつかってないよ～」という方や別システム利用されてる方でも
応用できる内容なのかなぁと思っています🥳✨

処理の中身と流れ

このカスタマイズでは「kintone連携」アイテムを利用します。
※設置する前にデータソース設定が必要です。

コラボフローで申請をおこなう
申請した内容がkintoneへ自動登録される

自動登録されたkintoneのレコード詳細画面をひらくと、
ボタンが出現して元のコラボフローに遷移することができる…という流れです！

このボタンを出現するために役立つのが申請書の検索APIですが、
コラボフローで申請したときに発番される「文書番号」が必要です！

なので、kintoneに「文書番号」フィールドを用意してあげましょう。

そして、コラボフローの「kintone連携」アイテムで
申請時に「文書番号」を一緒にkintoneへ登録してもらうように設定します。

カスタマイズを公開

JavaScript

(() => {
  'use strict';
  // レコード詳細画面が表示された後に発生するイベント
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;
    kintone.app.record.setFieldShown('文書番号', false);

    const url = 'https://cloud.collaboflow.com/{インスタンス名}/api/index.cfm/v1/documents/search';
    const authKey = 'アクセストークン';

    const header = {
        'Content-Type': 'application/json',
        'X-Collaboflow-Authorization': `${authKey}`
    }
    const requestBody = {
      'app_cd': 1,
      'query': `document_number = '${record["文書番号"].value}'`,
      'offset': 0,
      'limit': 1
    };

    kintone.proxy(url, 'POST', header, requestBody, function(body, status, headers) {
      const responseBody = JSON.parse(body);      
      if(status >= 200 && status < 300) {
        console.log("Success");

        const documentUrl = responseBody.records[0].link;
        // 任意のスペースフィールドにボタンを設置
        const mySpaceFieldButton = document.createElement('div');
        mySpaceFieldButton.className = 'collaboflow_button';
        mySpaceFieldButton.innerHTML = `<a href="${documentUrl}" target="_blank">コラボフローを開く</a>`;
        kintone.app.record.getSpaceElement('space_collaboflow_button').appendChild(mySpaceFieldButton);
      }else{
        console.log("Error");
      }
    });
  });
})();

CSS（ボタン用です）

.collaboflow_button a {
    background: #DEEAED;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 220px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.collaboflow_button a:before {
    content: "\f15c";
    position: relative;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
    color: #999;
}
.collaboflow_button a:hover {
    background: #64C0D3;
    color: #FFF;
    font-weight:bold;
}