読者です 読者をやめる 読者になる 読者になる

CRUD Lab. Tech Blog

ギークス株式会社の沖縄開発拠点CRUDLab. (クラッドラボ)のIT技術(テック)ブログ。kintoneやAngularJSによる開発を行っています。

【kintone】エラーメッセージをまとめてわかりやすく一括表示しよう

kintone

0. 目次

1. 概要

沖縄はもうすぐ海開きですね、ギークス株式会社CRUD Lab.のKUNISADAです。

エラーメッセージをまとめてわかりやすく一括表示しよう

アプリが複雑になればなるほど、フィールドの数も膨大になり、必須項目も埋もれてしまいがちです。 submitしたあとに、スクロールしながら一つずつ必須項目を確認しなくてはならないのは面倒ですよね! そこで、今回もシンプルな実装でエラーを分かりやすく全部表示してみます。

2.イメージ図

2-0 普段のエラー

f:id:crud_lab_editor:20160323145612p:plain

2-1 エラー表示カスタム

  • エラー一括表示

  • フィールドのエラーメッセージを詳細化

f:id:crud_lab_editor:20160324182621p:plain

3. 準備

3-1 フィールド

フィールド名 フィールドコード 初期値 その他
必須項目1 required_1 -- --
必須項目2 required_2 -- --
必須項目3 required_3 -- --

f:id:crud_lab:20160323143659p:plain

3-2 必要ファイルの読み込み

f:id:crud_lab_editor:20160303153525p:plain

4. 実装

(function () {

    'use strict';

    //新規作成、編集、一覧編集時のイベントハンドラー群
    var submit = ['app.record.create.submit',
                  'app.record.edit.submit',
                  'app.record.index.edit.submit'];

    kintone.events.on(submit, function(event){

        var rec        = event.record,
            required_1 = rec['required_1'],
            required_2 = rec['required_2'],
            required_3 = rec['required_3'],
            msg_ary    = [];

        //エラーメッセージの内容を登録
        if(required_1['value'] == undefined){
            required_1['error'] = '必須項目1には名前を入力してください';
            msg_ary.push('必要項目1');
        }
        if(required_2['value'] == undefined){
            required_2['error'] = '必須項目2には企業名を入力してください';
            msg_ary.push('必要項目2');
        }
        if(required_3['value'] == undefined){
            required_3['error'] = '必須項目3にはメールアドレスを入力してください';
            msg_ary.push('必要項目3');
        }

        //エラーメッセージの配列を半角スペース入りの文字列に
        var msg_str = msg_ary.join(' ');
        event.error = msg_str;

        return event;

    });


})();

5. まとめ

エラーメッセージを少しカスタムすることで、使い勝手の向上と入力時のストレス軽減に役立ちそうですね! フィールド数が多くなりがちな複雑なアプリでは、このようなカスタムが便利です。