（著者：サイボウズ 北川 恭平）
はじめに
今回は、レコードのステータス更新APIを使って、複数のレコードのステータスの更新をボタンクリック一回で実行してみたいと思います。
準備
シナリオとしては、ステータスが「申請中」で作業者が「ログインユーザー」のレコードで絞り込んだ後に、一括承認するというシーンを想定します。
使うアプリはどのアプリでも問題ないですが、今回はアプリストアの中から「旅費清算申請」を選びます。
絞り込みの設定を以下のようにしておきます。
これで準備は完了です。
JavaScript カスタマイズ
まず今回作成したソースコードの全容です。いたってシンプルな処理となっています。
適用する際は、5行目のXXXXの個所を自身の環境の一覧のIDに書き換えてください。その際シングルクォーテーションで囲む必要はありません。
※一覧のIDは、eventオブジェクト内もしくはURLにてご確認ください。viewに続く番号が一覧のIDになります。
例：https://sample.cybozu.com/k/13327/?view=5341206
[approval-button.js]
以下は処理の流れです。
- 一覧IDによってボタンを出すか出さないを制御する。全ての一覧に出したい場合は不要です。(11行目-)
- jQueryでボタンを生成します。あとで、装飾するようにクラス名を与えておきます。(22行目-)
- Cybozu CDNにもあるSweetAlertを使って、確認ダイアログを出します。(28行目-)
- レコードのステータス更新APIで、画面に表示されている全レコードに対して「承認リクエスト」を送ります。(49行目-)
- 生成したボタンを、レコード一覧メニューの下側の空白部分に追加します。参考。(64行目)
CSS カスタマイズ
以下のCSSでボタンを中央に寄せます。
[approval-button-design.css]
JavaScript / CSSファイルを適用
サンプルコード「approval-button.js」「approval-button-design.css」と一緒に、Cybozu CDNにあるjQuery、SweetAlertも読み込みます。
JavaScript
- jQuery v3.6.1
- https://js.cybozu.com/jquery/3.6.1/jquery.min.js
- SweetAlert v1.1.3
- https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.min.js
- アップロードして追加
- approval-button.js
CSS
- SweetAlert v1.1.3
- https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.css
- アップロードして追加
- approval-button-design.css
JavaScriptとCSSを適用すると、中央にボタンが表示されます。
動作確認
では実際にいくつかのレコードを用意して、承認してみたいと思います。
ボタンを押して実行してみましょう。
実行した結果がこちら。
実際に、一覧で表示されているレコードがすべて承認されました！
※ステータス欄が、ステータスによって色が変わっていますがこれは「条件書式プラグイン」を適用しています。サンプルコードのみでは、色は変わらないのでご注意ください。
注意事項
- 一覧にて絞り込み設定をおこなわず、「申請中」以外のものを出して実行するとエラーになります。
終わりに
今回は、レコード一括承認を試してみました。
一括で承認するのがちょっとこわいので、選択式にしたいという方はこちらのブログにアイディアを書いていますのでご参考ください。
また、実際に使う場合は承認ボタンを使えるユーザーを制御したりする必要があるかと思います。
ユーザーエクスポートAPIを利用することでそういった制御もできるかと思いますので、ぜひチャレンジしてみてください。
このTipsは、2022年12月版で確認したものになります。
5行目のXXXXの他に、使用するアプリに合わせて32行目の"承認"の部分も修正する必要がある事を
書いた方がよろしいかと思います。
私のJavaScriptのスキルが低いせいもありますが、その点に気が付かず、自分のアプリで成功する
まで時間がかかりました。
tsu-takeda様
フィードバックいただきありがとうございます。
内容にわかりにくい箇所があり、申し訳ございませんでした。
JavaScriptカスタマイズのサンプルコードの下記の部分にコメントを追加させていただきました。
｜ 32行目 obj["action"] = "承認"; //プロセス管理で設定されたステータス名を指定
今後ともよろしくお願いいたします。
対応、ありがとうございます。
ただ、32行目にプロセス管理で設定したステータス名を記述したらうまくいきませんでした。
（『承認』or『やっぱりやめる』の選択が表示されるが『承認』を選んでも動作しない、エラーも
表示されない）
それで色々試しているうちに、３２行目にアクション名を記述したらうまくいきました。
ステータス名で本当にあっているのでしょうか？
tsu-takeda様
大変失礼いたしました。こちらアクション名の誤りでした。
記事の方も修正しております。
何度もお手数をおかけし申し訳ありませんでした。
度々の対応、ありがとうございました。
後、もう一つ質問があります。記述が曖昧で申し訳ないのですが、ご存じでたら教えて下さい。
本JavaScriptサンプルコードを個人で使っている環境で作ったアプリに導入したらうまくいった
ので、別の環境で作ったアプリにも導入したのですが、『承認』or『やっぱりやめる』の選択で
『承認』を選んでも動作しない、という問題が発生しました。
2度目に導入しようとしている環境は何人かの開発者による共用環境で、様々なプラグインや
サンプルコードが導入されていますが、それらが悪影響を及ぼすといったことは起きないので
しょうか？（IDやアクション名のミスでは無い事は確認済み）
何かこのサンプルコードの導入に当たって制限事項等があったら教えて下さい。よろしくお願いします。
tsu-takeda様
ご質問をありがとうございます。プラグインや他のコードファイルも適用されている場合、
カスタマイズしようとしているフィールドが被ってしまうと上手く動かないケースがあります。
その点をご確認いただいてもよろしいでしょうか？
よろしくお願いします。
こちらこそ、回答ありがとうございます。
ですが、うまく動作するアプリと動作しないアプリの双方に対し、適用するプラグインやコードファイルを同一にして
試したのですが、やはり正常に動作するのは『本当に承認しても大丈夫ですか？』までで、その後うまく動作する方は
動作し、しない方はしないままでした。
もしかして『Kintoneシステム管理→プラグイン』の「読み込んだプラグイン」は、アプリにインストールしていなくても
一括承認に影響を与えますか？
それと、可能でしたら一つ要望があります。
一括承認の対象となるレコードがない状態で、一括承認ボタンを押すと『承認に成功しました！』と表示されます。
この場合『レコードがありません』という類のエラーメッセージが出たらよいと思います。
tsu-takeda様
ご質問いただいた点は環境に依存するものになるので、すみませんがこちらの方では再現できず分かりかねます。
＞もしかして『Kintoneシステム管理→プラグイン』の「読み込んだプラグイン」は、アプリにインストールしていなくても一括承認に影響を与えますか？
この点に関しましては、アプリにプラグインを追加しない限りそのアプリには影響を与えません。それとはまた別の点の要因があるかと思います。
お力添えできずすみません。
＞一括承認の対象となるレコードがない状態で、一括承認ボタンを押すと『承認に成功しました！』と表示されます。
＞この場合『レコードがありません』という類のエラーメッセージが出たらよいと思います。
こちら対応検討させていただきます。ご意見ありがとうございます。
tsu-takeda様
連投で失礼します。
＞一括承認の対象となるレコードがない状態で、一括承認ボタンを押すと『承認に成功しました！』と表示されます。
＞この場合『レコードがありません』という類のエラーメッセージが出たらよいと思います。
こちら対応させていただきました。18行目・48行目～52行目に分岐文を追加しております。
サンプルコードをご確認ください。
わかりました、こちらの環境を見られない状態で、質問にご回答頂き、ありがとうございました。
調査は引き続き行いますが、何かわかったらコメントさせて頂きます。
それから、要望にご対応頂きまして、誠にありがとうございました。
tsu-takeda様
ご確認いただきありがとうございます。
また何か詳細分かりましたらご質問ください。引き続きどうぞよろしくお願いします。
このサイトを見て4月に一括承認機能を作成しました。
問題なく運用出来ていたのですが、ここに来て機能しなくなってしまいました。
本当に全て承認して大丈夫ですか？のメッセージ画面で”承認”を押下しても、ウントもスンとも言わなくなってしまいました。
6月10日のサイボウズアップデートに影響されたのでしょうか？
皆さんからのお助けをお待ちしております。
枯れ木様
フィードバックありがとうございます。
確認したところ、SweetAlert v1.xでは動作し、その他のSweetAlert v2.x および SweetAlert2 では動作しない状態であることを確認しました。
恐れ入りますが SweetAlert の下記バージョンを設定し、動作するかをご確認いただけますでしょうか？
https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.min.js
https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.css
記事に SweetAlert のバージョン表記がなく、ご不便をおかけして申し訳ございません。
こちらのサイトを見て一括承認ボタンの実現に着手しているのですが
ステータスが「申請中」となっていないとエラーになると記載がありますが
ステータス名が「申請中」となっていなくても、絞り込みでステータスが
同一のものであれば実行可能にならないのでしょうか。
例えば「部長申請中」というステータス名のものを次のステータス「部長承認済」という
ステータスに一括して承認したい、というケースになります。
絞り込み設定にて「部長申請中」という一覧IDにしてもPUT にてhttps://nissenad.cybozu.com/k/v1/records/status.json 404 (Not Found)に
なってしまいます。
どなたかお助けいただけますでしょうか。。。
HI様
実際に試していただきありがとうございます。
記事のフィードバックではなく広く意見を求める場合、今後はコミュニティを活用いただけると良いかと存じます。
その上で見解を述べさせていただくと、コードで、以下の行のステータス名の変更ができていないのではないかと推察しております。
いつもお世話になっております。
こちらのコードを試したところ、いわゆる「増殖バグ」が発生してしまいました。
（ソート時に一括承認ボタンが増えていく）
こちらを回避するためにはどのようなコードを追記すれば
よろしいでしょうか。
なお、kintone UI Componetも使ってみましたが、
こちらでも増殖バグが出てしまっています。
自己レスになりますが、kintone UI Componetの方は、
id要素を追加することで増殖バグを防ぐことができました。
しかし、この方法が将来に亘って通用するのか、という不安があります。
if (kintone.app.getHeaderMenuSpaceElement(body).id !== '') {
return;
}
＜中略＞
body.appendChild(dropdown.render());
body.id = 'no';//適当なフラグでOK
また、このページのソースコードの方は解決していません。
引き続き、回避方法についてご教授をお願いいたします。
小野間明子 様
if ($('.header-contents').length !== 0) {return;
}
更に自己レスになりますが、結局こちらのページのソースコードでも
if (kintone.app.getHeaderSpaceElement(el).id !== '') {
return;
}
var el = kintone.app.getHeaderSpaceElement();
el.id = 'no';
を追記して回避しました。
すみません…レスが行き違いになってしまったようです。
ご対応いただき、ありがとうございます。
お世話になっております。
「旅費清算申請」の環境で試しているのですが、
アクション名「承認」では成功したのですが、（申請→承認）
アクション名「申請」では成功しません。（未処理→申請）
jsのアクション名は変更済みですが利用できないのでしょうか？（obj["action"] = "申請"）
デバック：the server responded with a status of 404 (Not Found)
{"code":"CB_JH01","id":"36cZbnnN8pkbvNbRTiTq","message":"認証に失敗しました。セッション認証には、「X-Requested-With」ヘッダーが必要です。"}青山昌司 様
お世話になっております。
こちらの環境で試してみたところ、ご指摘のエラーが出ずにステータスを更新できました。
環境依存ではないかと思います。
ご存知かと思いますが、次のステータスに指定可能な作業者が存在する場合、
Action以外に、assigneeも指定する必要があります。
詳細はステータスの更新をご参考ください。
また、こちらは記事に対するフィードバックの欄となっております。
記事の内容の発展などのご質問は、お手数ですがcybozu developer コミュニティにお願いできますでしょうか。
よろしくお願いいたします。
お世話になっております。
アクション名 承認（申請→承認）
アクション名 完了（承認→完了）
どちらも一括でステータス更新したいのですがご教授いただけないでしょう？
くわえてステータスに指定可能な作業者も入れたいのですがそちらもよろしくお願いします
ヤマダ様
>アクション名 承認（申請→承認）
>アクション名 完了（承認→完了）
>どちらも一括でステータス更新したいのですがご教授いただけないでしょう？
このプログラムでは、同一ステータスにしぼりこんだ上で、すべてのレコードに同じアクションを設定する前提での処理となっております。
複数のアクションを想定すると、一覧上でREST APIでレコードを取得し、そのステータスに応じて処理をわけるといった複雑な処理になります。
一覧を2つに分け、それぞれに別のJavaScriptコードを適用するのが簡単かと思います。
>くわえてステータスに指定可能な作業者も入れたいのですがそちらもよろしくお願いします
作業者のプロパティはassigneeになりますので以下のように指定可能です。
obj["assignee"] = "user1";
詳細はステータスの更新をご参考ください。
また、こちらは記事に対するフィードバックの欄となっております。
記事の内容の発展などのご質問は、お手数ですがcybozu developer コミュニティにお願いできますでしょうか。
よろしくお願いいたします。
お世話になっております。
こちらを参考に設定を行いましたが、確認画面で「承認」をクリックしても何も変化しない状況です。
調べたところ下記のようなエラーで変更がされないようでした。
{"code":"xx-xxxx","id":"xxxxxxxxxxxxxxxxx","message":"認証に失敗しました。セッション認証には、「X-Requested-With」ヘッダーが必要です。"}
何をどう設定すればよいか行き詰っております。
このエラーの場合、何が不足していると考えられますか？
obj["assignee"] = "テスト太郎" ⇐追加してあります。
アドバイスいただけますと幸いです。
yana 様
お世話になっております。
こちらの環境で試してみたところ、ご指摘のエラーが出ずにステータスを更新できました。
ステータスの一括更新 API では、プロセス管理の設定にて、次のステータスに指定可能な作業者が存在する場合、
action 以外に、assignee も指定する必要があります。
上記のように追記されたとのことですが、本記事のサンプルコードに追記したという認識でお間違いないでしょうか？
その場合、こちらは記事に対するフィードバックを目的としたコメント欄になっているため、
記事の内容の発展などのご質問は、お手数ですがcybozu developer コミュニティにお願いできますでしょうか。
お手数をおかけいたしますが、どうぞよろしくお願いいたします。
お世話になります。
新しくアプリを作成し既存顧客データをファイル読み込みにて取り込んだ後にステータスを顧客CD発番状態にステータスを一括更新したく本JSを取り込んでいます。
ファイル取り込みした段階では、「未申請（下書き）」状態となるのですが
ここからプロセス管理の次のアクション「申請する」を設定しても動かないのですが、最初の段階から一括更新は難しいのでしょうか？
御指南いただければ幸いです
ちなみにアクション（ステータス）は
申請する（未申請→発番中）
発番する(発番中→発番完了）
発番するの一括更新はうまくいきました
渡邉英助（開発）様
お世話になっております。cybozu developer network 運営でございます。
ステータスの変更自体は、どのステータスからでも操作は可能です。
ただし、権限がなかったり、変更にあたって条件を満たしていないなどの可能性が考えられます。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。