SweetAlertを使って、kintoneでメッセージをスタイリッシュに表示させよう!
はじめに
今回は Cybozu CDN で配信されているSweetAlertを使ったメッセージ表示について、サンプルを通してその基本的な使い方をお届けしたいと思います。
デモ環境
デモ環境
で実際に動作を確認できます。
ログイン情報は
cybozu developer networkデモ環境
で確認してください。
SweetAlert
SweetAlert は、JavaScriptで標準サポートしているいわゆるalert関数やconfirm関数をスタイリッシュに表示してくれるライブラリです。
SweetAlertの勘所
公式ページ
にサンプルもたくさんありますので、基本的にはこちらを見ればOKです。
しかし、kintoneでの利用で「メッセージを出した後に画面更新」といった際にサンプルを見ながら書くと、おそらく同期処理をイメージした書き方をしてしまい、あれ?となってしまう方多いのではないでしょうか(もともとのalert関数も同期処理ですので)。
そして、サンプルを読み進めていくと、非同期(コールバック)を利用した書き方が必要ということに気付きます。
ですが、実はこの最もシンプルな書き方はサンプルにはありませんので、今回は
レコード詳細画面の表示イベント
におけるREST APIによるレコード更新の例を通して紹介します。
kintoneアプリの準備
今回は、レコード詳細画面を開いた際に、生年月日から年齢を計算し、必要ならフィールド値を更新するというシナリオを例にしたいと思います。
次のフィールドを含むアプリをご準備ください(私はアプリストアの社員名簿アプリに修正を加えました)。
フィールド名(例) |
フィールドコード |
フィールドタイプ |
---|---|---|
生年月日 |
birthday |
日付 |
年齢 |
age |
数値、文字列(1行)等 |
JavaScriptソースコード(calcAge.js)
|
|
JavaScript/CSSの設定
今回は、SweetAlertのJavaScriptをCybozu CDNからURL指定して、上のサンプル(calcAge.js)をファイルアップロードします。
次の順でリンクおよびファイルを追加してください。
- PC用のJavaScriptファイル
- https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js
- calcAge.js
動作確認
レコード詳細画面を開いて、その時点で年齢の更新が必要(計算値 > 既存値)なら更新します。
しばらく詳細画面を開いてない間に誕生日を迎えていると、以下のように更新されます。
サンプルを見ながら書くと、やってしまいがちなのは次のような書き方だと思います。
|
|
これで、あれ?となるのは、OKも押していないのに画面がリロードされてしまうところです。
理由は非同期処理だからです。
最後に
今回は、SweetAlertの実は一番シンプルな使い方ながら、公式サンプルに載っていないサンプルをお届けしました。
また、しばしばご質問いただくレコード詳細画面でのレコード・フィールド更新(
レコード詳細画面の表示イベント
とREST APIの組み合わせが必要です)の例でもありますので、他のユースケースにも転用できると思います。
ぜひお試しいただければと思います!
このTipsは、2022年10月版kintoneで動作を確認しています。