kintoneで、選択内容に応じて表示するフィールドを切り替えたいと思ったことはありませんか？
実は、少しのJavaScriptを使うだけで簡単に実現できます！
この記事では、JavaScriptが苦手な方でも試しやすいように、条件付きでフィールドを非表示にする方法を丁寧に解説します。
- 選択内容で切り替えるフィールド表示
- JavaScriptの基本的な条件分岐（if文）
- ラジオボタンの値取得とイベント設定
- 非表示時に値が残る問題と対処法
- コピペで使えるkintoneカスタマイズ例
準備：問い合わせ対応アプリを作成する
まずはテスト用の問い合わせ対応アプリを作成し必要なフィールドを設置します。
アプリから＋マーク（アプリを作成する）をクリックします。
「はじめから作成」を選択します。
アプリ名は「問い合わせ対応アプリ」にします。
今回は以下の4つのフィールドを使用します。
これらをドラッグ＆ドロップで、画面の好みの位置に配置してください。
| フィールド名 | 用途 |
|---|---|
| ラジオボタン | 対応方法 |
| リンク | 電話対応用 |
| リンク | メール対応用 |
| 文字列(複数行) | 対応メモ |
設置した4つのフィールドをそれぞれ設定します。
ラジオボタン：対応方法の設定
ラジオボタンフィールドにカーソルを合わせて歯車アイコンをクリック。
以下の内容で設定を行いましょう。
| 項目名 | 設定内容 |
|---|---|
| フィールド名 | 対応方法 |
| 項目と順番 | 電話／メール |
| 並び | 横並び |
| 初期値 | 電話 |
| フィールドコード | type |
設定できたら「保存」をクリック。
リンク：電話番号の設定
左側のリンクフィールドにカーソルを合わせて歯車アイコンをクリック。
以下の内容で設定を行いましょう。
| 項目名 | 設定内容 |
|---|---|
| フィールド名 | 電話番号 |
| 入力値の種類 | 電話番号 |
| 値の重複を禁止する | |
| フィールドコード | tel |
設定できたら「保存」をクリック。
リンク：メールアドレスの設定
右側のリンクフィールドにカーソルを合わせて歯車アイコンをクリック。
以下の内容で設定を行いましょう。
| 項目名 | 設定内容 |
|---|---|
| フィールド名 | メールアドレス |
| 入力値の種類 | メールアドレス |
| 値の重複を禁止する | |
| フィールドコード |
設定できたら「保存」をクリック。
文字列(複数行)：対応メモの設定
文字列(複数行)フィールドにカーソルを合わせて歯車アイコンをクリック。
以下の内容で設定を行いましょう。
| 項目名 | 設定内容 |
|---|---|
| フィールド名 | 対応メモ |
設定できたら「保存」をクリック。
設定したアプリを公開します。
画面右上の「アプリを公開」をクリック
確認ダイアログが表示されるので「OK」をクリックして公開完了です。
ここまでで準備は完了です。では、いよいよJavaScriptの実装に入っていきましょう！
実装：JavaScriptを反映する
サンプルコードコピー
以下のコードをコピーして、テキストファイルに貼り付けましょう。
(function () {
'use strict';
function toggle(record) {
var type = record.type.value;
// 一度全て非表示＋値クリア
kintone.app.record.setFieldShown('tel', false);
kintone.app.record.setFieldShown('email', false);
record.tel.value = '';
record.email.value = '';
if (type === '電話') {
kintone.app.record.setFieldShown('tel', true);
}
if (type === 'メール') {
kintone.app.record.setFieldShown('email', true);
}
}
kintone.events.on([
'app.record.create.show',
'app.record.edit.show'
], function (event) {
toggle(event.record);
return event;
});
kintone.events.on(
'app.record.create.change.type',
function (event) {
toggle(event.record);
return event;
}
);
})();ファイル保存の方法
テキストファイルに貼り付けたら、
１．「ファイル」→「名前を付けて保存」
２．「ファイルの種類」を すべてのファイル に設定
３．「ファイル名」は toggle_fields_by_radio.js
保存先はデスクトップなど、分かりやすい場所にしておきましょう。
これでJavaScriptファイルが完成しました。次はkintoneに読み込んでいきます。
JavaScriptファイルをアップロード
作成した toggle_fields_by_radio.jsをkintoneに読み込みます。
１．対象アプリの歯車アイコンの矢印をクリック
２．カスタマイズ／サービス連携をクリック
３．JavaScript／CSSでカスタマイズをクリック
作成したファイルをアップロードします。
１．「アップロードして追加」をクリック
２．先ほど保存した toggle_fields_by_radio.jsをダブルクリック
JavaScriptファイルが追加されているかを確認しましょう。
画面右下の「保存ボタン」をクリックしましょう！
右上の「アプリの更新」をクリック、
確認画面が表示されるので再度「アプリの更新」をクリックします。
お疲れさまでした！これで郵便番号から住所を自動入力できるアプリが完成です。
実際に作成したアプリをあなたの手で体感してみてください。
Javascriptコード解説
ここでは皆さんがコピペしたコードの中身について簡単に解説します。
全体の構造（準備）
(function () {
'use strict';この部分は、今回のJavaScriptが他のカスタマイズに影響を与えないようにするための設定です。
特別な処理はしていないため、このまま記述して問題ありません。
表示切り替えを行う関数
function toggle(record) {
var type = record.type.value;toggle関数は、表示・非表示を切り替えるための処理をまとめたものです。record.type.valueで、ラジオボタン（対応方法）の選択内容を取得しています。
フィールドをリセット
// 一度全て非表示＋値クリア
kintone.app.record.setFieldShown('tel', false);
kintone.app.record.setFieldShown('email', false);
record.tel.value = '';
record.email.value = '';まず、電話番号とメールアドレスのフィールドを両方とも非表示にし、入力されていた値も空にします。
kintoneでは非表示にしても値が残るため、この処理が重要です。
選択内容に応じた表示切り替え
if (type === '電話') {
kintone.app.record.setFieldShown('tel', true);
}
if (type === 'メール') {
kintone.app.record.setFieldShown('email', true);
}対応方法が「電話」の場合は電話番号を、「メール」の場合はメールアドレスを表示します。
条件分岐だけのシンプルな処理です。
イベント設定
kintone.events.on([
'app.record.create.show',
'app.record.edit.show'
], function (event) {
toggle(event.record);
return event;
});
kintone.events.on(
'app.record.create.change.type',
function (event) {
toggle(event.record);
return event;
}
);- レコードの新規作成・編集画面を開いたとき
- ラジオボタン（対応方法）を変更したとき
これらのタイミングで toggle 関数を実行し、常に正しい表示状態になるようにしています。
まとめ
今回の記事では 条件付きでフィールドを非表示にする方法 をご紹介しました。
紹介したJavascriptを応用すると残業申請アプリやアンケートアプリなど様々な場面で活用することができます！
自分好みにカスタマイズをして普段の業務をラクラク管理していきましょう。
コメント