ダイアログ表示でアプリのフィールド値を警告する

やりたいこと

kintone UI Component v1を利用して、アプリのフィールド値が入力規則に違反している場合の警告ウィンドをkintoneライクなデザインのダイアログで表示します。

デモ画面 

デモ画面では「登録日 < 実行予定日」で日付を指定する入力規則を設定していますので、入力規則に違反した日付の指定をすると、ダイヤログで警告を表示しています。
入力規則の設定とダイアログ表示は、Javascriptによるカスタマイズで実現しています。
Javascriptのalert関数との違いは、ダイヤログがkintoneライクなデザインで画面の中央に出力されることです。

KCNダイアログ表示のデモ画面

kintoneの標準機能では、フィールド単体の入力必須、文字数上限、数値範囲制限等のチェック機能はありますが、フィールド間の入力規則を設定したりチェックする機能はありません。

以前フィールド間の入力規則をチェックするカスタマイズ方法を紹介しましたが、今回はkintone UI Componentのダイアログ（dialog）表示機能で警告メッセージを出す方法を紹介しています。

KUC版ダイアログの詳しい仕様は、以下のサイトを参照して下さい。

Dialog | kintone UI Component · Be a smart kintone developer.

アプリの設定方法

（１）アプリの準備

KUC版のダイヤログを表示するアプリを準備します。
必要なフィールド名（フィールドコード）は以下の通りです。
フィールド名は自由ですが（）内のフィールドコードは、Javascriptの設定と合わせる必要が有ります。
＜KUC版ボタンを設置するアプリ＞
・日付型　　　：フィールド名：登録日（DATE_登録日）
・日付型　　　：フィールド名：実行日（DATE_実行日）

フォームの設定画面

（２）入力規則のKUC版ダイアログ表示のJavascriptコード

/*  日付フィールド間の入力規則設定とダイアログ表示 */
(() => {
  'use strict';

  // 初期設定
  const fieldCode1 = 'DATE_登録日'; // FIELD1のフィールドコード
  const fieldCode2 = 'DATE_実行日'; // FIELD2のフィールドコード

  // ダイアログの部品を作成し、表示する関数
  const createDialogComponents = () => {
    const okButton = new Kuc.Button({
      text: 'OK',
      type: 'submit'
    });

    okButton.addEventListener('click', () => {
      dialog.close();
    });

    const divEl = document.createElement('div');
    divEl.appendChild(okButton);

    const dialog = new Kuc.Dialog({
      title: '日付確認',
      content: `<div>登録日 < 実行予定日となるように入力して下さい。</div>`,
      footer: divEl,
      icon: 'warning',
      container: document.body
    });
    dialog.open();
  };

  // 日付フィールドの入力規則の設定
  const checkDateFields = (event) => {
    const fieldDate1 = new Date(event.record[fieldCode1].value);
    const fieldDate2 = new Date(event.record[fieldCode2].value);

    if (fieldDate1 >= fieldDate2) {
      createDialogComponents();
    }
    return event;
  };

  // フィールド変更イベントの設定
  kintone.events.on([
    'app.record.create.change.' + fieldCode1,'app.record.create.change.' + fieldCode2,
    'app.record.edit.change.'   + fieldCode1,  'app.record.edit.change.' + fieldCode2
  ], checkDateFields);
})();

（３）アプリの設定＞JavaScript / CSSでカスタマイズ

「KUC版ボタン」を設置するアプリの、アプリの設定＞JavaScript / CSSでカスタマイズの画面で、kintone UI ComponentのCDNをURL指定で追加し、次に初期設定済のJavascriptコードをアップロードして追加します。

最新版の kintone UI Component は、以下のCDNで利用できます。https://unpkg.com/kintone-ui-component/umd/kuc.min.js

https://kintone-ui-component.netlify.app/ja/docs/getting-started/quick-start/

JavaScript / CSSでカスタマイズ画面

---

最後に、アプリの更新を完了させれば、設定は完了です。
もしエラーで動作しない場合は、フィールドコードやスペース要素IDの設定が正しいか見直してください。

【注意事項】　2024/04/16加筆

kintone UI ComponentのCDN版は動作試験の目的でのみご利用ください。
本番環境で利用する際はUDM版が推奨です。
詳しくは、以下の記事を参照して下さい。

---

カスタマイズした感想

今回のkintone UI Componentを利用したダイヤログの表示のカスタマイズは、入力値の保存や読込の処理が不要なので簡潔なコードになりました。
KUC版ダイヤログは、Kintoneライクなデザインで画面中央に表示できることから、Javascriptのalert関数よりも目立つメッセージになります。
また、アイコンの種類、タイトル、テキスト等のプロパティがありますので、プロパティを変更すれば色々なダイヤログ表示ができます。

今回も、最後まで読んで頂いてありがとうございました。