アプリに現在日時を入力するボタンとダイアログを実装する

やりたいこと

kintone UI Component v1を利用したボタンとダイヤログ（情報ウィンド）を組み合わせて、ボタンクリック時の現在日時をアプリの日時フィールドにセットする処理を実装してみました。
「現在日時取得」ボタンをクリックしたら、ダイヤログ（情報ウィンド）を表示してダイヤログの［OK］ボタンを押したら、現在日時を取得してセットし［キャンセル」ボタンを押したら現在日時の値を空白にリセットします。

デモ画面 

現在日時セットのボタンとダイヤログ

以前、現在日時を記録するボタンを設置するカスタマイズ方法を紹介しましたが、今回はkintone UI Componentのパーツを用いたKintoneライクなUIで似た様な機能を実現する方法を紹介しています。

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

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

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

アプリの設定方法

（１）アプリの準備

KUC版のボタンとダイヤログで現在日時をセットするアプリを準備します。
必要なフィールド名（フィールドコード）は以下の通りです。
フィールド名は自由ですが（）内のフィールドコードは、Javascriptの設定と合わせる必要が有ります。
＜KUC版のボタンとダイヤログを設置するアプリ＞
・日付型　　　：フィールド名：現在日時（DATE_現在日時）
・スペース　　：要素ID：KUC_Button

（２）KUC版ボタン＆ダイアログ設置のJavascriptコード

下記のコードは、kintone UI Componentのボタンとダイヤログをアプリのフォーム上に表示してクリック動作を割り当てる一例です。
ボタンクリックには、ダイヤログの表示処理を割り当てています。
ダイヤログのOKボタンをクリックした時の動作の部分に任意の処理コードを追加することで、色々な機能を割り当てられます。

/* KUCボタンとダイヤログ表示で現在日時をセット */
(() => {
  'use strict';

  // 初期設定
  const dateTimeField = '現在日時';        // 現在日時をセットするフィールドコード
  const buttonSpaceID = 'KUC_Button';     // ボタンを配置するスペース要素IDコード

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

    const cancelButton = new Kuc.Button({
      text: 'Cancel',
      type: 'normal'
    });

  //ダイヤログのOKボタンをクリックした時の動作
    okButton.addEventListener('click', () => {
      // ここにＯＫボタンクリック時の処理を記述します
      dialog.close();
    });

    cancelButton.addEventListener('click', () => {
      console.log('キャンセルされました');
      dialog.close();
    });

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

    const dialog = new Kuc.Dialog({
      title: '現在日時をセットします！',
      content: `<div>よろしいですか？</div>`,
      footer: divEl,
      icon: 'info',
      container: document.body
    });

    dialog.open();
  };

  // KUCボタンの作成＆表示
  const createButton = () => {
    const button = new Kuc.Button({
      text: '現在日時取得',
      type: 'submit',
      className: 'options-class',
      id: 'options-id',
      visible: true,
      disabled: false
    });

    // KUC版ボタンクリック動作の定義
    button.addEventListener('click', () => {
      const record = kintone.app.record.get().record;
      createDialogComponents(record);
    });

    return button;
  };

  // レコード新規登録画面とレコード編集画面でボタンを表示するイベントを設定
  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
    const buttonSpace = kintone.app.record.getSpaceElement(buttonSpaceID);
    if (buttonSpace) {
      buttonSpace.innerHTML = '';  // 既存の要素をクリア
      const button = createButton();
      buttonSpace.appendChild(button);
    } else {
      console.error('指定されたスペース要素が見つかりません。');
    }
    return event;
  });
})();

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

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

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

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

---

カスタマイズした感想

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

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