目次
※本ページ先頭に戻りたい場合は画面右下の
ボタンを押して下さい。
概要
kintoneのチェックボックス選択肢によって、活性/非活性/必須を設定する
- 「ExcelVBA」チェック時
→ExcelVBA関連のフィールドを入力可能&必須項目
※「ExcelVBA」のチェックが外れると非活性(入力不可&値削除) - 「Python」チェック時
→Python関連のフィールドを入力可能&必須項目
※「Python」のチェックが外れると非活性(入力不可&値削除) - 「JavaScript」チェック時
→JavaScript関連のフィールドを入力可能&必須項目
※「JavaScript」のチェックが外れると非活性(入力不可&値削除)
プログラムを作成した理由
上記動作概要を例とすると、
担当者が「ExcelVBA」をチェックしたのに
ExcelVBAの「経験年数」「作成プログラムの概要」を入力せずに保存してしまう…
という事態を未然に防ぎ、確実にフィールドを入力させる為。現場のITリテラシーは著しく低い為、「普通、チェックしたら該当箇所を埋めるのだろう」は一切通じません
入力制御を実現出来ていなかった背景
kintoneの標準機能に「必須項目」の設定は存在しているのですが、
下記のように
「ExcelVBA」がチェックされた場合は「ExcelVBA関連のフィールドのみ必須」とは出来ず、
「どんな状況であれ入力して下さい」という単純な制御しか出来ません。
「条件付き入力制御プラグイン」という有料のプラグインはあるが…
条件付き入力制御プラグインは
数個のフィールドを制御する際は、プログラムいらずで非常に便利ですが、
大量のフィールドを制御するには、下記理由から向いておりません
- 大量に設定すると、画面が縦に間延びして全体像が見えづらくなる
- 「Ctrl」+「F」キーで検索が出来ない為、設定した箇所にジャンプ出来ない
- 「必須」「活性」「非活性」を同時に指定出来ない
今回の依頼では、50個程のフィールド制御を行う必要があった為、
本プラグインでは100～200回程、手動設定しなければなりません…
(※50個程のフィールド×活性/非活性/必須の3パターン)
上記背景から、
プラグインでの制御はメンテナンス性皆無と判断し、JavaScriptでの制御となりました。
ソースコード
大まかに下記構成となっております。
- 「●●」から始まるフィールドコードを配列で取得
例)「ExcelVBA」から始まる - チェックボックスが変更された場合に、該当フィールドを制御
例)「ExcelVBA」がチェックされている場合、「ExcelVBA」関連フィールドを活性 - 「保存」ボタンを押した時に、チェック内容に基づき必須項目化
例)「ExcelVBA」がチェックされている場合、「ExcelVBA」関連フィールドを必須
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 | (function() { 'use strict'; // 共有変数 let ExcelVBA_field_list = [] let Python_field_list = [] let JavaScript_field_list = [] // レコード追加画面または再利用画面が表示された時 // 詳細画面を開いた時、アプリのレコード編集画面が表示された時 kintone.events.on(["app.record.create.show","app.record.edit.show"], function(event) { const record = event.record // 「●●」から始まるフィールドコード配列作成 for(let field_code in record){ if(field_code.startsWith("ExcelVBA")){ ExcelVBA_field_list.push(field_code) }else if(field_code.startsWith("Python")){ Python_field_list.push(field_code) }else if(field_code.startsWith("JavaScript")){ JavaScript_field_list.push(field_code) } } //各プログラム言語フィールド達の活性/非活性の設定 change_set_field(event) // 処理終了 return event }); // 「好きなプログラム言語」フィールドが変更された時 kintone.events.on(["app.record.create.change.好きなプログラム言語", "app.record.edit.change.好きなプログラム言語"], function(event) { //「必須項目フィールドリスト」達の全てのフィールド直下エラー文を削除する reset_field_not_input(event) // 各プログラム言語フィールド達の活性/非活性の設定 change_set_field(event) // 処理終了 return event }); // 保存前イベント kintone.events.on(["app.record.edit.submit","app.record.create.submit"], function(event) { //「必須項目フィールドリスト」達の全てのフィールド直下エラー文を削除する reset_field_not_input(event) const record = event.record // チェックボックスの内容取得(配列) let program_type = record.好きなプログラム言語.value // 【必須】ExcelVBAフィールド if(program_type.includes("ExcelVBA")){ field_not_input_check(event, ExcelVBA_field_list, true) } // 【必須】Pythonフィールド if(program_type.includes("Python")){ field_not_input_check(event, Python_field_list, true) } // 【必須】JavaScriptフィールド if(program_type.includes("JavaScript")){ field_not_input_check(event, JavaScript_field_list, true) } // 処理終了 return event }); /* ===============================以下、配列を参照する共有プロシージャ=============================== */ // 概要：「好きなプログラム言語」変更時の活性/非活性設定 // ※「レコード詳細画面を開いた時」「フィールドが変更された時」と処理共通化 // 第一引数：kintoneのイベント情報 function change_set_field(event){ const record = event.record // チェックボックスの内容取得(配列) let program_type = record.好きなプログラム言語.value // 【活性/非活性の切り替え】ExcelVBAフィールド if(program_type.includes("ExcelVBA")){ set_field_disabled(event, ExcelVBA_field_list, true) //活性 }else{ set_field_disabled(event, ExcelVBA_field_list, false) //非活性 } // 【活性/非活性の切り替え】Pythonフィールド if(program_type.includes("Python")){ set_field_disabled(event, Python_field_list, true) //活性 }else{ set_field_disabled(event, Python_field_list, false) //非活性 } // 【活性/非活性の切り替え】JavaScriptフィールド if(program_type.includes("JavaScript")){ set_field_disabled(event, JavaScript_field_list, true) //活性 }else{ set_field_disabled(event, JavaScript_field_list, false) //非活性 } } // 概要：「必須項目フィールドリスト」達の全てのフィールド直下エラー文を削除する // ※「好きなプログラム言語」変更、保存処理時に両方定義するのを防ぐ為に関数化 // 第一引数：kintoneのイベント情報 function reset_field_not_input(event){ // 「必須項目フィールドリスト」達の全てのフィールド直下エラー文を削除する field_not_input_check(event, ExcelVBA_field_list, false) field_not_input_check(event, Python_field_list, false) field_not_input_check(event, JavaScript_field_list, false) } })(); /* ===============================以下共有プロシージャ=============================== */ // 概要：指定フィールド達の活性/非活性の切り替え // 第一引数：kintoneのイベント情報 // 第二引数：フィールドコードの配列 // 第三引数：表示(true)、非表示(false)の指定 function set_field_disabled(event, field_code_list, show_flg){ const record = event.record // disabled=ture で非表示になるようにON/OFFフラグを反転 // 背景：「ture」=表示(活性) 「false」=非表示(非活性)と統一する為 hidden_flg = !show_flg // 活性/非活性切り替え for(let i = 0; i < field_code_list.length; i++){ let field_code = field_code_list[i] record[field_code].disabled = hidden_flg // 非活性指定の場合は、値を初期化する if(hidden_flg){ // デバッグ用 // console.log("非活性：フィールドコード「" + field_code + "」：" + "値「" + record[field_code].value + "」") let field_type = record[field_code]["type"] // フィールドタイプ毎に適切に初期化 if(field_type == "CHECK_BOX"){ record[field_code].value = [] }else{ record[field_code].lookup = 'CLEAR' record[field_code].value = "" } } } } // 概要：指定フィールド達の未入力チェック // 第一引数：kintoneのイベント情報 // 第二引数：フィールドコードの配列 // 第三引数：未入力時にフィールド直下にエラー表示(true)、エラー分削除(false)の指定 function field_not_input_check(event, field_code_list, err_flg){ // エラーメッセージ const KINTONE_ERR_MSG = "未入力の項目があります。" const FIELD_ERR_MSG = "入力必須です" const record = event.record // 未入力の場合はエラー if(err_flg){ for(let i = 0; i < field_code_list.length; i++){ // フィールドコード取得 let field_code = field_code_list[i] // 未入力の場合はエラーをフィールド下部に表示 if(typeof record[field_code].value === "undefined" || record[field_code].value == ""){ // エラーをフィールド下部に表示 record[field_code].error = FIELD_ERR_MSG // デバッグ用 // console.log("未入力：フィールドコード「" + field_code + "」：" + "値「" + record[field_code].value + "」") // kintoneアプリ上部のエラーメッセージ表示 event.error = KINTONE_ERR_MSG; }else{ // フィールド下部のエラーを削除 record[field_code].error = null } } // フィールド直下のエラー文を削除 }else{ for(let i = 0; i < field_code_list.length; i++){ // フィールドコード取得 let field_code = field_code_list[i] // フィールド下部のエラーを削除 record[field_code].error = null } } } |
フィールドが追加されても、
自動的に「活性/非活性/必須項目」適応可能
「●●」から始まるフィールドコードを取得としている為、
フィールド追加をしても自動的に制御が適応されるのが強みです
例)「ExcelVBA」関連フィールドに「作成プログラムの詳細」フィールドを追加した場合
感想
「フィールド追加にも自動的に適応可能」という思考設計でコード作成致しましたが、
「このケース×このケースは活性/非活性/必須で」と後出し条件をいくつも追加された為、
最終的には
「配列でフィールドコードをベタ打ちで持っておく」という方針にしました
最初から全条件が網羅されていれば、
メンテナンスし易い、美しいコードのままでいられただろうなぁ…
想像以上に汚いコードになってしまったのが心残りですが、
「担当者が使いやすい制御をかけられている事」が最重要なので、仕方ないと納得する事にします。。。
編集履歴
2022/08/15 新規作成
2022/08/18 オススメ記事タグを追加
