エラー表示を改行したい。kintoneカスタマイズで行うエラー表示【サンプルコード、テンプレートファイル付き】

kintoneカスタマイズ

2022-11-10

Home
/
ブログ
/
kintoneカスタマイズ
/
エラー表示を改行したい。kintoneカスタマイズで行うエラー表示【サンプルコード、テンプレートファイル付き】

今回は少し踏み込んで、カスタマイズの話です。

kintoneでは、標準機能にはないエラー表示をカスタマイズで行うことができるのですが、

カスタマイズでエラー表示をする際、ただ打ち込むだけではメインのエラー表示が改行されません。

この、メインのエラー表示改行されない問題の対処法を書いていきます。

改善したいこと

参考画像のように上部に表示されるエラー表示を改行させたい。

対処法

改行するためのCSSを適用させることで改行されるようにできます。

適用方法

パータン１：CSSファイルに追加する

kintoneでは設定画面でJavaScriptファイルとCSSファイルを追加、削除ができます。
プラグインを利用することでkintone上でコード編集も可能です。
こういった機能を利用してCSSファイルに改行できるようにするコードを記述して適用するというものです。

JavaScriptファイルとCSSファイルを別々に用意するようになります。
エラー処理をカスタマイズで実装することを前提とするため必然的に管理するファイルは増えます。

こちらの方法は、他サイトで紹介されているので、リンクから確認してみてください。

参考記事

cybozu developer network コミュニティ

ユアキンライフ【kintone】JavaScriptの書き方（エラー処理）【カスタマイズ基礎編】

パターン２：CSSをHTMLに追加する

こちらは、改行する為のCSSをJavaScriptでHTMLに直接追加する方法です。

styleタグを新規で用意して、表示されているHTMLのheadタグ内に追加するという処理をJavaScriptで行います。

JavaScriptファイルのみで完結する為、管理するファイルが1つで済みます。
JavaScriptの他の処理が多いと、反映処理が重くなる可能性があります。

コードは以下

    //改行する為のstyle（'error-message-add-css'）が未追加の場合は改行するためのstyleを追加する
    if(document.getElementById('error-message-add-css') === null){
      let addEl = document.createElement('style');
      addEl.id = 'error-message-add-css';
      addEl.innerText = '.notifier-body-cybozu li {white-space: pre;}';
      document.head.appendChild(addEl);
    }

コードの内容

・if~行
改行用のstyleが無限増殖しないようにする処理（画面に追加済みの場合は処理を飛ばす）

・let addaEl~行
追加するためのstyle要素を新規作成

・addEl.Id~行
要素判別用にidを追加

・addEl.innerHTML~行
改行を可能にするCSSを記述

・document.head~行
HTMLのheadタグ内の一番最後に新規作成したstyle要素を追加

実用例

デモアプリを用意しました。
下記URLよりテンプレートファイルをダウンロードして、
テンプレートファイルからアプリ作成をしてみてください。

※カスタマイズが前提ですので、kintoneライトコースでは利用できません。
　kintoneスタンダードコースでご利用ください。

アプリテンプレートダウンロード用リンク

アプリ概要

JavaScriptが設定済みのアプリが作成されます。

標準仕様のエラー表示と見比べられるように、
必須設定をした文字列フィールドとカスタマイズでエラー表示を入れた文字列フィールドを用意しています。

CSS適用前とCSS適用後

CSSが適用されるとエラー表示が改行されているのが分かります。

全体のコード

デモアプリで反映しているJavaScriptファイルのコードです。

(function() {
  'use strict';
  //新規作成、編集、一覧編集の保存前に発火
  kintone.events.on(['app.record.create.submit'
                    ,'app.record.edit.submit'
                    ,'app.record.index.edit.submit'
                    ], function(event) {
    let record = event.record;
    let errors = []; //エラー格納用の空配列
    let fieldIdArr = ['テスト_1','テスト_2','テスト_3']; //エラーをチェックするフィールドコード
    fieldIdArr.forEach(function(fieldId){
      let fieldValue = record[fieldId].value||''; //undefinedのときは''となる
      //フィールドの値が空の場合フィールドにエラーを表示する。かつ、フィールドコードをエラー格納用の配列に追加する
      if(fieldValue === ''){
        record[fieldId].error = '入力してください。';
        errors.push(fieldId);
      }
    });
    //エラーがなければ処理を終了
    if(errors.length === 0) return;
    //改行する為のstyle（'error-message-add-css'）が未追加の場合は改行するためのstyleを追加する
    if(document.getElementById('error-message-add-css') === null){
      let addEl = document.createElement('style');
      addEl.id = 'error-message-add-css';
      addEl.innerText = '.notifier-body-cybozu li {white-space: pre;}';
      document.head.appendChild(addEl);
    }
    //メインのエラー表示にerrorsの内容を表示
    event.error = '\n以下の入力内容にエラーがあるため保存できません。\n\n・' + errors.join('\n・');
    return event;
  });
})();