【kintone TIPS】カテゴリーを必須入力・2個以上選択できないようにする方法

不定期でkintoneのカスタマイズ事例を紹介しています。

cybozu developer networkにもカスタマイズ事例はたくさん紹介されていますが、かなり作りこんだカスタマイズ例が多いので、もっと単純な小技中心に紹介していきます。

今回はカテゴリー機能をピックアップします。

カテゴリー機能とは

kintoneではレコードの分類をする一つの方法として「カテゴリー」という機能があります。
「カテゴリー」は「アプリの設定」→「その他の設定」→「カテゴリー」から設定が可能です。

カテゴリーを有効にすると画像の通り一覧画面にカテゴリーが表示されて、カテゴリー毎のレコードの絞り込みが可能になります。

レコードの件数が多くて決まった分類で分けたい時には、非常に便利な機能です。

カテゴリーを必須入力にする

便利なカテゴリー機能ですが、残念なところもあります。

カテゴリーはフォームの一番左上に表示され選択する形になりますが、通常のフィールドでは用意されている「必須項目」の設定が、このカテゴリーでは設定できません。

そのため、カテゴリーの設定はしたもののユーザーの入力忘れが頻発して機能していない、といった事が起こりがちです。

カテゴリーを必須入力にするために、javascriptのカスタマイズで対応します。

Javascriptのコード①

サンプルコードを提示します。

新規作成と編集モードの時の保存時に、エラーチェックをします。

カテゴリーを有効にすると、フィールドコード「カテゴリー」で値を取得できるようになります。
そしてその選択状態は「.length」で取得可能です、これはカテゴリーが配列で構成されており、選択すると選択した文字列がそのまま入ります。
配列に格納された個数を「.length」でカウントしている訳です。

つまりこれが0の時は未選択状態ということで、エラーにする事で必須入力にできます。

2個以上選択させたくない場合の処理

このカテゴリー機能ですが、初めから複数選択が可能な状態になっています。
場合によっては1個だけしか選択させたくない場合もあるかと思います、その時の制御方法です。

Javascriptのコード②

先程のコードにすこし追加します。
1個しか選択させたくないのですから、2個以上選択がある時にエラーにすれば良いですね。

「.length」で値が2以上の場合をエラーにすれば、選択状態を1個だけに制限できます。

親カテゴリーの選択を不可にする

カテゴリー機能ですが、親子関係の階層カテゴリーにする事も可能で、最大5階層まで設定できます。

ただこの時に親カテゴリーも子カテゴリーも両方選択できてしまいます、選択できるのは子カテゴリーだけでいいのに、という事がないでしょうか？

これも通常の機能では制御できないので、javascriptのカスタマイズで制御しますが少し工夫が必要になります。

カテゴリーの親子関係の判別

私が知らないだけかもしれませんが、プログラムでカテゴリーが親か子か判別させる事はどうも出来ないようです。
なので、苦肉の策ですが今回は親カテゴリーの頭に「■」を付ける事で親カテゴリーを判別させます。

Javascriptのコード③

先程のコードにまたまた追記します。

親カテゴリーの文字に「■」があるとエラー表示にする事で、親カテゴリーの選択を制御しています。

親カテゴリーの文字は上記の例だと「categoryItems[0]」で取得可能です、これは子カテゴリーを選択すると自動的に親カテゴリーも配列に格納されるので、配列の1番目が必ず親カテゴリーになる事を利用しています。

文字列の中にある文字が含まれているかは「.includes」メソッドで判別が可能で、結果によりTrue/Falseが返ります。

今回は「■」の文字があればTrueになるので、エラー表示が出るという事になります。

IEではincludesメソッドが使えない

注意点として、IEだと「includes」メソッドがサポートされていないため使用できません。

そのため、代替案として「indexOf」を使用して文字を検索し、値が見つからなかったら−1が返るのでそれを不等価演算子「!＝」で比較する事で、IEでも結果を返す事が可能です。

IEの場合は、コメントアウトしている箇所を使用してください。

まとめ

今回はカテゴリーの制御方法として３つの方法を紹介しました。

カテゴリー機能については、今後も機能向上の余地があると思うのでアップデートに期待したいです。
それまでは今回紹介したカスタマイズを駆使して、乗り切りましょう。