ワンクリックで一括承認をしてみよう

フォローする

(著者:サイボウズ 北川 恭平

はじめに

今回は、レコードのステータス更新APIを使って、複数のレコードのステータスの更新をボタンクリック一回で実行してみたいと思います。

準備

シナリオとしては、ステータスが「申請中」で作業者が「ログインユーザー」のレコードで絞り込んだ後に、一括承認するというシーンを想定します。

使うアプリはどのアプリでも問題ないですが、今回はアプリストアの中から「旅費清算申請」を選びます。

絞り込みの設定を以下のようにしておきます。 

これで準備は完了です。

JavaScript カスタマイズ

まず今回作成したソースコードの全容です。いたってシンプルな処理となっています。
適用する際は、5行目のXXXXの個所を自身の環境の一覧のIDにかきかえてください。

※一覧のIDは、eventオブジェクト内もしくはURLにてご確認ください。viewに続く番号が一覧のIDになります。
例:https://sample.cybozu.com/k/13327/?view=5341206

[approval-button.js]

処理の流れは簡単に以下のような流れです。

  1. 一覧IDによってボタンを出すか出さないを制御する。全ての一覧に出したい場合は不要です。(5-7 行目)
  2. jQueryでボタンを生成します。あとで、装飾するようにクラス名を与えておきます。(13行目-)
  3. Cybozu CDNにもあるSweetAlertを使って、確認ダイアログを出します。(17行目-)
  4. レコードのステータス更新APIで、画面に表示されている全レコードに対して「承認リクエスト」を送ります。(39行目-)
  5. 生成したボタンを、レコード一覧メニューの下側の空白部分に追加します。参考。(46行目)

動作確認

では実際にいくつかのレコードを用意して、承認してみたいと思います。

サンプルコード「approval-button.js」と一緒に、Cybozu CDNにあるjQuery、SweetAlertも読み込むのを忘れずに。
JavaScriptを適用すると、ヘッダー下部分にボタンが現れると思います。

…しかし、端に寄りすぎて見た目がかっこよくないので、以下のCSSで見た目を整えます。

[approval-button-design.css]

適用するとボタンが真ん中にきて、ボタンの親要素のdivタグに枠ができると思います。

見た目をかっこよくしたら、ボタンを押して実行してみましょう。
実行した結果がこちら。

https://gyazo.com/e74d86d341c6eb8afe9027b9c445c2c0

実際に、一覧で表示されているレコードがすべて承認されました!

※ステータス欄が、ステータスによって色が変わっていますがこれは「条件書式プラグイン」を適用しています。サンプルコード「approval-button.js」のみでは、色は変わらないのでご注意ください。

注意事項

  • 一覧にて絞り込み設定をおこなわず、「申請中」以外のものを出して実行するとエラーになります。

終わりに

今回は、レコード一括承認を試してみました。
一括で承認するのがちょっとこわいので、選択式にしたいという方はこちらのブログにアイディアを書いていますのでご参考ください。

また、実際に使う場合は承認ボタンを使えるユーザーを制御したりする必要があるかと思います。
ユーザーエクスポートAPIを利用することでそういった制御もできるかと思いますので、ぜひチャレンジしてみてください。

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
tsu-takeda

5行目のXXXXの他に、使用するアプリに合わせて32行目の"承認"の部分も修正する必要がある事を

書いた方がよろしいかと思います。

私のJavaScriptのスキルが低いせいもありますが、その点に気が付かず、自分のアプリで成功する

まで時間がかかりました。

 

Avatar
cybozu Development team

tsu-takeda様

フィードバックいただきありがとうございます。
内容にわかりにくい箇所があり、申し訳ございませんでした。

JavaScriptカスタマイズのサンプルコードの下記の部分にコメントを追加させていただきました。
| 32行目  obj["action"] = "承認"; //プロセス管理で設定されたステータス名を指定

今後ともよろしくお願いいたします。

Avatar
tsu-takeda

対応、ありがとうございます。

ただ、32行目にプロセス管理で設定したステータス名を記述したらうまくいきませんでした。

(『承認』or『やっぱりやめる』の選択が表示されるが『承認』を選んでも動作しない、エラーも

表示されない)

それで色々試しているうちに、32行目にアクション名を記述したらうまくいきました。

ステータス名で本当にあっているのでしょうか?

 

Avatar
cybozu Development team

tsu-takeda様

大変失礼いたしました。こちらアクション名の誤りでした。

記事の方も修正しております。

何度もお手数をおかけし申し訳ありませんでした。

Avatar
tsu-takeda

度々の対応、ありがとうございました。

後、もう一つ質問があります。記述が曖昧で申し訳ないのですが、ご存じでたら教えて下さい。

本JavaScriptサンプルコードを個人で使っている環境で作ったアプリに導入したらうまくいった

ので、別の環境で作ったアプリにも導入したのですが、『承認』or『やっぱりやめる』の選択で

『承認』を選んでも動作しない、という問題が発生しました。

2度目に導入しようとしている環境は何人かの開発者による共用環境で、様々なプラグインや

サンプルコードが導入されていますが、それらが悪影響を及ぼすといったことは起きないので

しょうか?(IDやアクション名のミスでは無い事は確認済み)

何かこのサンプルコードの導入に当たって制限事項等があったら教えて下さい。よろしくお願いします。

Avatar
cybozu Development team

tsu-takeda様

ご質問をありがとうございます。プラグインや他のコードファイルも適用されている場合、
カスタマイズしようとしているフィールドが被ってしまうと上手く動かないケースがあります。
その点をご確認いただいてもよろしいでしょうか?
よろしくお願いします。

Avatar
tsu-takeda

こちらこそ、回答ありがとうございます。

ですが、うまく動作するアプリと動作しないアプリの双方に対し、適用するプラグインやコードファイルを同一にして

試したのですが、やはり正常に動作するのは『本当に承認しても大丈夫ですか?』までで、その後うまく動作する方は

動作し、しない方はしないままでした。

もしかして『Kintoneシステム管理→プラグイン』の「読み込んだプラグイン」は、アプリにインストールしていなくても

一括承認に影響を与えますか?

それと、可能でしたら一つ要望があります。

一括承認の対象となるレコードがない状態で、一括承認ボタンを押すと『承認に成功しました!』と表示されます。

この場合『レコードがありません』という類のエラーメッセージが出たらよいと思います。

Avatar
cybozu Development team

tsu-takeda様

ご質問いただいた点は環境に依存するものになるので、すみませんがこちらの方では再現できず分かりかねます。

>もしかして『Kintoneシステム管理→プラグイン』の「読み込んだプラグイン」は、アプリにインストールしていなくても一括承認に影響を与えますか?

この点に関しましては、アプリにプラグインを追加しない限りそのアプリには影響を与えません。それとはまた別の点の要因があるかと思います。
お力添えできずすみません。

>一括承認の対象となるレコードがない状態で、一括承認ボタンを押すと『承認に成功しました!』と表示されます。
>この場合『レコードがありません』という類のエラーメッセージが出たらよいと思います。

こちら対応検討させていただきます。ご意見ありがとうございます。

Avatar
cybozu Development team

tsu-takeda様

連投で失礼します。

>一括承認の対象となるレコードがない状態で、一括承認ボタンを押すと『承認に成功しました!』と表示されます。
>この場合『レコードがありません』という類のエラーメッセージが出たらよいと思います。

こちら対応させていただきました。18行目・48行目~52行目に分岐文を追加しております。
サンプルコードをご確認ください。

Avatar
tsu-takeda

わかりました、こちらの環境を見られない状態で、質問にご回答頂き、ありがとうございました。

調査は引き続き行いますが、何かわかったらコメントさせて頂きます。

それから、要望にご対応頂きまして、誠にありがとうございました。

 

Avatar
cybozu Development team

tsu-takeda様

ご確認いただきありがとうございます。

また何か詳細分かりましたらご質問ください。引き続きどうぞよろしくお願いします。

ログインしてコメントを残してください。
Powered by Zendesk