【kintone TIPS】カテゴリーを必須入力・2個以上選択できないようにする方法
- 2019.08.29
- kintone
不定期でkintoneのカスタマイズ事例を紹介しています。
cybozu developer networkにもカスタマイズ事例はたくさん紹介されていますが、かなり作りこんだカスタマイズ例が多いので、もっと単純な小技中心に紹介していきます。
今回はカテゴリー機能をピックアップします。
カテゴリー機能とは
kintoneではレコードの分類をする一つの方法として「カテゴリー」という機能があります。
「カテゴリー」は「アプリの設定」→「その他の設定」→「カテゴリー」から設定が可能です。
カテゴリーを有効にすると画像の通り一覧画面にカテゴリーが表示されて、カテゴリー毎のレコードの絞り込みが可能になります。
レコードの件数が多くて決まった分類で分けたい時には、非常に便利な機能です。
カテゴリーを必須入力にする
便利なカテゴリー機能ですが、残念なところもあります。
カテゴリーはフォームの一番左上に表示され選択する形になりますが、通常のフィールドでは用意されている「必須項目」の設定が、このカテゴリーでは設定できません。
そのため、カテゴリーの設定はしたもののユーザーの入力忘れが頻発して機能していない、といった事が起こりがちです。
カテゴリーを必須入力にするために、javascriptのカスタマイズで対応します。
Javascriptのコード①
サンプルコードを提示します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
(function () { "use strict"; // 新規保存時・編集保存時の処理 var events = ['app.record.create.submit', 'app.record.edit.submit']; kintone.events.on(events, function (event) { var record = event.record; var categoryItems = record['カテゴリー']['value'] // カテゴリーの選択が無い場合エラー表示 if (categoryItems.length === 0) { event.error = 'カテゴリーを選択してください。'; } return event; }); })(); |
新規作成と編集モードの時の保存時に、エラーチェックをします。
カテゴリーを有効にすると、フィールドコード「カテゴリー」で値を取得できるようになります。
そしてその選択状態は「.length」で取得可能です、これはカテゴリーが配列で構成されており、選択すると選択した文字列がそのまま入ります。
配列に格納された個数を「.length」でカウントしている訳です。
つまりこれが0の時は未選択状態ということで、エラーにする事で必須入力にできます。
2個以上選択させたくない場合の処理
このカテゴリー機能ですが、初めから複数選択が可能な状態になっています。
場合によっては1個だけしか選択させたくない場合もあるかと思います、その時の制御方法です。
Javascriptのコード②
先程のコードにすこし追加します。
1個しか選択させたくないのですから、2個以上選択がある時にエラーにすれば良いですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
(function () { "use strict"; // 新規保存時・編集保存時の処理 var events = ['app.record.create.submit', 'app.record.edit.submit']; kintone.events.on(events, function (event) { var record = event.record; var categoryItems = record['カテゴリー']['value'] // カテゴリーの選択が無い場合エラー表示 if (categoryItems.length === 0) { event.error = 'カテゴリーを選択してください。'; } // カテゴリーの選択状態が2個以上の時にエラー表示 if (categoryItems.length > 1) { event.error = 'カテゴリーは1つだけ選択してください'; } return event; }); })(); |
「.length」で値が2以上の場合をエラーにすれば、選択状態を1個だけに制限できます。
親カテゴリーの選択を不可にする
カテゴリー機能ですが、親子関係の階層カテゴリーにする事も可能で、最大5階層まで設定できます。
ただこの時に親カテゴリーも子カテゴリーも両方選択できてしまいます、選択できるのは子カテゴリーだけでいいのに、という事がないでしょうか?
これも通常の機能では制御できないので、javascriptのカスタマイズで制御しますが少し工夫が必要になります。
カテゴリーの親子関係の判別
私が知らないだけかもしれませんが、プログラムでカテゴリーが親か子か判別させる事はどうも出来ないようです。
なので、苦肉の策ですが今回は親カテゴリーの頭に「■」を付ける事で親カテゴリーを判別させます。
Javascriptのコード③
先程のコードにまたまた追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
(function () { "use strict"; // 新規保存時・編集保存時の処理 var events = ['app.record.create.submit', 'app.record.edit.submit']; kintone.events.on(events, function (event) { var record = event.record; var categoryItems = record['カテゴリー']['value'] // カテゴリーの選択が無い場合エラー表示 if (categoryItems.length === 0) { event.error = 'カテゴリーを選択してください。'; } // カテゴリーの選択状態が2個以上の時にエラー表示 if (categoryItems.length > 1) { event.error = 'カテゴリーは1つだけ選択してください'; } // 親カテゴリーが選択されていたらエラー表示 // IE以外のブラウザの時の制御 if (categoryItems.length > 0 && categoryItems[0].includes('■')) { event.error = '親カテゴリーは選択しないでください'; } // IEは「includes」メソッドが使用できないので、IndexOfで代替 //if (categoryItems.length > 0 && categoryItems[0].indexOf('■') != -1) { // event.error = '親カテゴリーは選択しないでください'; //} return event; }); })(); |
親カテゴリーの文字に「■」があるとエラー表示にする事で、親カテゴリーの選択を制御しています。
親カテゴリーの文字は上記の例だと「categoryItems[0]」で取得可能です、これは子カテゴリーを選択すると自動的に親カテゴリーも配列に格納されるので、配列の1番目が必ず親カテゴリーになる事を利用しています。
文字列の中にある文字が含まれているかは「.includes」メソッドで判別が可能で、結果によりTrue/Falseが返ります。
今回は「■」の文字があればTrueになるので、エラー表示が出るという事になります。
IEではincludesメソッドが使えない
注意点として、IEだと「includes」メソッドがサポートされていないため使用できません。
そのため、代替案として「indexOf」を使用して文字を検索し、値が見つからなかったら−1が返るのでそれを不等価演算子「!=」で比較する事で、IEでも結果を返す事が可能です。
IEの場合は、コメントアウトしている箇所を使用してください。
まとめ
今回はカテゴリーの制御方法として3つの方法を紹介しました。
・ 複数選択できない方法
・ 親カテゴリーを選択できないようにする方法
カテゴリー機能については、今後も機能向上の余地があると思うのでアップデートに期待したいです。
それまでは今回紹介したカスタマイズを駆使して、乗り切りましょう。
-
前の記事
【kintone TIPS】レコードの再利用ボタンを使用できないようにする2つの方法 2019.08.26
-
次の記事
記事がありません
コメントを書く