【kintone JS】必須項目を条件分岐で制御するカスタマイズ方法
kintoneで「必須項目を条件によって切り替えたい」と悩んだことはありませんか？
その悩みは、JavaScriptカスタマイズで解決できます。
今回は、必須項目を条件分岐で制御するカスタマイズ方法を解説します。
ファイルをURL指定で追加するだけなので、JavaScriptに不慣れな方でも簡単に実装できます。
- kintoneで必須項目を条件分岐する方法
- JavaScriptをURL指定で追加する手順
- 保存時に必須チェックを行う仕組み
- 実務で使えるサンプルコードの要点
kintoneで条件付き必須アプリを作成
まずは条件付き必須アプリを作成し設定をしていきます。
アプリを作成する
1. ポータル画面の「アプリ」から＋（アプリを作成する）をクリックします。
2.「はじめから作成」を選択します。
3. アプリ名を「条件付き必須アプリ」に設定します。
フィールドを追加する
今回は以下の2つのフィールドを使用します。
| フィールド種類 | 用途 |
|---|---|
| ラジオボタン | 対応要否 |
| 文字列(複数行) | 対応内容 |
これらをドラッグ＆ドロップで、画面の好みの位置に配置してください。
フィールドを設定する
設置した2つのフィールドをそれぞれ設定します。
ラジオボタン：対応要否の設定
ラジオボタンフィールドにカーソルを合わせて歯車アイコンをクリック。
以下の内容で設定を行いましょう。
| 項目名 | 設定内容 |
|---|---|
| フィールド名 | 対応要否 |
| 項目と順番 | 対応あり／対応なし |
| 並び | 横並び |
| 初期値 | 対応なし |
| フィールドコード | 対応要否 |
設定できたら「保存」をクリック
文字列(複数行)：対応内容の設定
文字列(複数行)フィールドにカーソルを合わせて歯車アイコンをクリック。
以下の内容で設定を行いましょう。
| 項目名 | 設定内容 |
|---|---|
| フィールド名 | 対応内容 |
| フィールドコード | 対応内容 |
設定できたら「保存」をクリック。
アプリを公開する
設定したアプリを公開します。
画面右上の「アプリを公開」をクリック
確認ダイアログが表示されるので「ＯＫ」をクリックして公開完了です。
ここまでで準備は完了です。次はJavaScript読み込みに入っていきましょう
JavaScriptファイルを追加
JavaScriptファイルをkintoneに読み込みます。
設定画面を開く
- アプリの歯車アイコンの矢印をクリック
- カスタマイズ／サービス連携をクリック
- JavaScript/CSSでカスタマイズをクリック
JavaScriptファイルを追加
1.「URL指定で追加」をクリック
2.以下のURLをコピーして入力欄に貼り付けます。
https://cdn.jsdelivr.net/gh/ryuucodeBlog/kintone-customize@v1.0.4/conditional-required.js
3.右側の「保存」をクリックして保存します。
設定を保存
1.画面右下の「保存」をクリックします。
2.「アプリを更新」をクリックします。
3.確認ダイアログが表示されるので再度「アプリを更新」をクリックします。
お疲れ様でした！これで、必須項目を条件分岐で制御するアプリが完成です。
まずは今回のコードをそのまま試して動きを確認してみてください。
JavaScript簡単解説
条件付き必須アプリでは以下のJavaScriptを使用しています。
(function () {
'use strict';
const FIELD_A = '対応要否'; // ラジオボタン
const FIELD_B = '対応内容'; // 文字列（複数行）
const REQUIRED_VALUE = '対応あり';
kintone.events.on(
['app.record.create.submit', 'app.record.edit.submit'],
function (event) {
const record = event.record;
// エラーをクリア
record[FIELD_B].error = null;
// 「対応あり」の場合
if (record[FIELD_A].value === REQUIRED_VALUE) {
// 未入力チェック
if (
!record[FIELD_B].value ||
record[FIELD_B].value.trim() === ''
) {
record[FIELD_B].error =
'対応ありの場合は対応内容を入力してください。';
return event; // 保存中断
}
}
return event;
}
);
})();コードのポイントについて簡単に解説します。
フィールド情報の定義
const FIELD_A = '対応要否'; // ラジオボタン
const FIELD_B = '対応内容'; // 文字列（複数行）
const REQUIRED_VALUE = '対応あり';使用するフィールドコードや判定値を定数としてまとめて定義しています。
このように定数化しておくことで、フィールド名や値が変更になった場合でも、修正箇所を最小限にできます。
保存時イベントの登録
kintone.events.on(
['app.record.create.submit', 'app.record.edit.submit'],
function (event) {
const record = event.record;新規作成・編集時の 保存直前 に処理を実行します。
event.record から画面上のレコード情報を取得できます。
このタイミングでチェックを行うことで、条件を満たさない場合は保存を防ぐことができます。
条件付き必須チェック処理
// エラーをクリア
record[FIELD_B].error = null;
// 「対応あり」の場合
if (record[FIELD_A].value === REQUIRED_VALUE) {
// 未入力チェック
if (
!record[FIELD_B].value ||
record[FIELD_B].value.trim() === ''
) {
record[FIELD_B].error =
'対応ありの場合は対応内容を入力してください。';
return event; // 保存中断
}
}
return event;
}
);処理内容は以下の通りです。
- まず前回表示されたエラーメッセージをクリア
- 「対応要否」が「対応あり」のときのみチェックを実行
- 「対応内容」が未入力ならエラーを表示して保存を中断
注意点
フィールドコードは固定
- ラジオボタン：
対応要否 - 文字列(複数行)：
対応内容
const FIELD_A = '対応要否'; //ラジオボタン
const FIELD_B = '対応内容'; //文字列（複数行）フィールドコードは必ず同じにしてください。
対応要否の項目と順番
[項目と順番の画像］
const REQUIRED_VALUE = '対応あり'対応要否フィールドには‘対応あり’を必ず含めてください。
URLを正しく追加
https://cdn.jsdelivr.net/gh/ryuucodeBlog/kintone-customize@v1.0.4/conditional-required.jsURLは正しく貼り付けてください。
動作しない場合はURLを確認してみてください。
まとめ
今回は必須項目を条件分岐で制御するカスタマイズ方法について解説しました。
JavaScriptを使えば様々なカスタマイズをすることができます。
JavaScriptを使ったカスタマイズ例は他にも紹介していますので、是非あわせてご覧ください。
コメント