Kintoneを使用していると、レコードの新規追加や編集の保存時に確認ポップアップを表示させて、ユーザーに重要なフィールドの入力を確認してもらってから保存するようにしたいケースがあります。特に、必須のフィールドや重要なデータが入力されていない場合では、ユーザーに注意を促すことによってデータの一貫性と正確性を担保できます。

この記事では、Javascriptを用いて、レコードの保存前に確認を促すメッセージを表示する方法を詳しく紹介します。

また、この記事を読むにあたって、Kintoneの基本的な操作ができること、Javascriptの基礎知識があると、理解がスムーズです。

コードの追加

今回は「顧客名」と「連絡先」というフィールドを用意して、レコードの保存前に入力したかどうかの確認を促すようなポップアップメッセージを表示させます。

Kintoneの「アプリの設定」から「Javascript/CSSでカスタマイズ」を選択し、以下のコードを追加してください。

(function() {
  'use strict';

  const confirmSave = function(event) {
    const record = event.record;

    // 重要なフィールドの値を取得
    const customerName = record['顧客名'].value;
    const contactNumber = record['連絡先'].value;

    // 確認メッセージの作成
    const confirmMsg = `レコードを保存してもよろしいですか？\n` +
                       `重要なフィールドの入力を確認してください：\n` +
                       `顧客名: ${customerName ? '入力済み' : '未入力'}\n` +
                       `連絡先: ${contactNumber ? '入力済み' : '未入力'}`;

    if (!window.confirm(confirmMsg)) {
      // ユーザーがキャンセルを選択した場合、保存をキャンセル
      event.error = '保存がキャンセルされました。';
    }
    return event;
  };

  kintone.events.on([
    'app.record.create.submit',
    'app.record.edit.submit'
  ], confirmSave);

})();

 

カスタマイズの結果

ファイルを張り付けた結果、レコードの新規追加・編集保存時に以下のようなポップアップが出てきたら、カスタマイズ成功です。

 

コードの解説

確認関数の定義

  • confirmSave関数は、レコードの保存前に呼び出されます。
  • event.recordからレコードのデータを取得して、重要なフィールドの値を変数に格納します。
  • confirmMsg変数にポップアップに表示する確認を促すメッセージを作成します。このメッセージでは、「顧客名」と「連絡先」フィールドが入力済みか未入力かを表示します。
  • window.confirm(confirmMsg)を利用して、ポップアップを表示して、ユーザーの返答を取得します。
  • 「OK」の場合は保存を続行、「キャンセル」の場合は保存をキャンセルして、event.errorにエラーメッセージを設定します。
  const confirmSave = function(event) {
    const record = event.record;

    // 重要なフィールドの値を取得
    const customerName = record['customerName'].value;
    const contactNumber = record['contactNumber'].value;

    // 確認メッセージの作成
    const confirmMsg = `レコードを保存してもよろしいですか？\n` +
                       `重要なフィールドの入力を確認してください：\n` +
                       `顧客名: ${customerName ? '入力済み' : '未入力'}\n` +
                       `連絡先: ${contactNumber ? '入力済み' : '未入力'}`;

    if (!window.confirm(confirmMsg)) {
      // ユーザーがキャンセルを選択した場合、保存をキャンセル
      event.error = '保存がキャンセルされました。';
    }
    return event;
  };

イベントと関数の紐づけ

  • kintone.events.onメソッドを利用して、レコードの新規作成時や編集保存時に、確認関数を呼び出すように設定する。
  kintone.events.on([
    'app.record.create.submit',
    'app.record.edit.submit'
  ], confirmSave);

})();

まとめ

この記事では、Kintoneアプリでレコードの新規追加や編集保存時に確認を促すポップアップを表示し、重要なフィールドの入力を確認する方法を紹介しました。この機能を活用することで、ユーザーに確認を求めることで誤った操作を防いで、データの正確性を高めることができます。Kintoneのカスタマイズは初めてという方でも、この記事の手順に従って設定すれば簡単に実装できますので、ぜひお試しください。

このポップアップ機能をさらに応用して、特定の条件に応じたメッセージを表示したり、他のフィールドの入力を確認することも可能です。

ぜひ、この記事を参考にして、Kintoneアプリのカスタマイズに挑戦してみてください。

このサイトではほかにも、Kintoneの様々なカスタマイズ方法に関する記事も投稿しておりますので、ぜひチェックしてくださいね！

https://arcuss-service.com/knowledge/how-to-disable-field.html