(著者:サイボウズ 北川 恭平)
はじめに
本記事は、テーブルデータをCSVでインポートしてみよう!の続編です。
リクエストにお応えして今回は、CSVファイルからテーブルのアップデートを行ってみたいと思います。
テーブルデータを一気に更新したい時などにご参考ください!
準備
基本的には、前回の記事と同様のアプリを使っていきます。
更新した際に分りやすいようにサンプルデータを登録し、CSVファイルで書き出しておきます。
サンプルデータを2件ほど登録
CSVファイルに書き出す
書き出したCSVファイル
これで準備は完了です!書き出したCSVファイルはあとで書き換えてアップデート用に使うので、分りやすい所に保存しておきましょう。
JavaScript
基本的には、こちらも前回のサンプルコードを参考にしていきます。
ポイントは、レコードを更新する際は登録時のリクエストパラメータに加えて、どのレコードを更新するか?という情報を含めてあげる必要があります。
その他細かい点に関しては下記のドキュメントを参考にしましょう。
では、サンプルコードを紹介します。更新処理に加えてSweetAlertを使い、UIを少しお洒落にしてみました。
サンプルに加えてCybozu CDNより、下記を読み込ませてお試しください。
- https://js.cybozu.com/jquery/3.4.0/jquery.min.js
- https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js
6行目のビューIDは、それぞれの環境に合わせて書き換えましょう。また、更新するテーブル行数は仮置きとして100件を上限にしました。
それでは、kintoneアプリに適用して実際に動きを確認していきたいと思います。
動作確認
先ほど書き出した、CSVファイルを更新用に以下のように変更しておきます。
ファイル名は分りやすいように「TestUpdate.csv」としました。
分りやすいように、kintoneと親和性の高いバナナを両ストアに大量に入荷したことにします。もはや誤発注レベルに入荷させます。
では、実際にStockアプリのカスタマイズビューからCSVファイルを読み込ませて、テーブルデータを更新してみたいと思います。
更新前のレコード(レコード番号 19)
更新前のレコード(レコード番号 20)
トップの画面より読み込む
「POST」ボタンを押す
成功!
更新後のレコード(レコード番号 19)
更新後のレコード(レコード番号 20)
無事に、バナナの大量確保に成功しました!
尚このサンプルの場合、CSVに記述の無いテーブル行については削除されるのでご注意ください。
今回はCSVファイルのインポートから、テーブル行を更新してみました。
これをきっかけにテーブルマスターを目指して、テーブルカスタマイズに挑戦してみてください!
このTipsは、2019年5月版で確認したものになります。
記事更新ありがとうございます!
早速質問なんですが、
「日付」「ユーザー」「ドロップダウン」の項目の更新は可能でしょうか?
こちらのTIPSを参考にいじってみたのですがうまくいかず…。
Erikoさん
cybozu.com developer network事務局です。
いずれも更新可能かと思います。
リクエストを送る際のフォーマットを変える必要があります。
以下のドキュメントをご参考に変更してみてください。
https://cybozudev.zendesk.com/hc/ja/articles/202166330
サンプルのご提供ありがとうございます。大変参考になりました!
質問なのですが、サンプルでは『更新するテーブル行数は仮置きとして100件を上限にしました。』とありますが、テーブル行数についてシステム的な制限はありますでしょうか?
※上限を10000件に変更し3000~4000件で実行していますが、更新画面でOKを押下した後に画面が変化が見られず・・といった状況です。
また、ファイルを小分けにしようとした場合、『CSVに記述の無いテーブル行については削除されるのでご注意ください。』によってうまくいかず、1ファイルでアップする必要がある認識なのですが、間違いないでしょうか?
Tetsuroさん
こんにちは。ご質問いただきありがとうございます。
制限事項としては、一度に更新できるレコードは500件、テーブル行数は5000行になります。
このサンプルでは100件を上限にしているので、その部分を修正していただくと5000行までは更新可能になるかと思います。
Tatsuroさんのおっしゃる通り、このサンプルではCSVに記述のないテーブル行については削除されてしまいます。
ご確認よろしくお願いします。
青山と申します。
CSVを入れPOSTを押した後の動作についてですが、
以下の表示がになります。下のOKを押すと動作としては問題なさそうなのですが何に原因があるのかわかりません。
因みにそもそもな質問かもしれませんが、kintone側のJavaScript / CSSでカスタマイズのアップロード内に下記の順番でjsをアップしていますが、順番を変えるとファイル選択した際に読み込まれません。例 4⇔1など入れ替えると。
そういうものという理解でいいでしょうか?
何かそもそも間違えているのでしょうか?
ご教授頂ければと思います。
1)https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.css
2)https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.min.js
3)https://js.cybozu.com/jquery/1.12.1/jquery.min.js
4)sample.js
青山さん
こんにちは、ご質問ありがとうございます。
返事が遅れまして申し訳ありません。
添付画像のような現象は、恐らくJavaScript / CSSでのURLとJSファイルの指定順番に関係があります。
次のように指定しなおしてみてください。
https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.cssは「PC用のJavaScriptファイル」ではなく、「PC用のCSSファイル」から指定します。
次の3つは「PC用のJavaScriptファイル」から指定します。
並び順について、sampleファイルは一番最後にしてください。
理由は、プログラムを実行するときに、上から下へ実行していきます。
また、sample.jsはjQuery を使っています。
一番上に置くと、sample.jsを実行するときにjQueryがまだ読み込まれていない為、使えないというわけです。
1)https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.min.js
2)https://js.cybozu.com/jquery/1.12.1/jquery.min.js
3)sample.js