前回の記事ではkintoneのイベント別に処理を行う書き方について解説しました。
続いて、kintoneにおけるJavaScriptカスタマイズでは「フィールドの編集可／不可の切替」や「フィールドの非表示」を定義できます。
この記事ではレコード内のフィールドの表示切替について解説します。
- kintoneのJavaScriptカスタマイズでは、フィールドの表示状態を定義できます。
- 「event.record.フィールドコード.disabled = true;」でフィールドを編集不可にできます。
- 「kintone.app.record.setFieldShown(‘フィールドコード’, false);」でフィールドを非表示にできます。
kintoneのJavaScriptカスタマイズにおいて、最も使うものがフィールド操作です。
フィールドの値を書き換えることはもちろんのこと、編集不可にしたり、非表示にしたりできます。
予約有無（ラジオボタン）が「なし」の場合は予約日を編集不可にする
予約有無（ラジオボタン）が「なし」の場合は予約日を非表示にする
なんていったことが可能です。
それぞれの書き方を見てみましょう。
フィールドの編集可／不可を切り替える
フィールドの編集の可／不可を設定するには、eventから取得したrecordオブジェクトのフィールドのdisabledプロパティに対して、true/falseを指定します。
以下のように記述します。
(() => {
'use strict';
kintone.events.on(['app.record.create.change.予約有無', 'app.record.edit.change.予約有無'], (event) => {
const record = event.record;
if (record.予約有無.value == 'あり') {
// 予約有無の値が「あり」の場合
record.予約日.disabled = false; // 編集可
} else {
// 予約有無の値が「あり」以外の場合
record.予約日.disabled = true; // 編集不可
}
return event;
});
})()予約有無（ラジオボタン）の値変更時に選択された値をチェックし、「あり」の場合は予約日（日付）を編集可にし、それ以外の場合は予約日（日付）を編集不可にするという処理です。
※（ ）内はフィールドタイプです。
※フィールドの指定はフィールドコードを記述しましょう。フィールド名ではエラーになります。
「record.予約日.disabled = true;」のように「true」を指定すると編集不可になります。
反対に「false」を指定すると編集可になります。
処理の最後には「return event;」を忘れず記述しましょう。
フィールドの表示／非表示を切り替える
(() => {
'use strict';
kintone.events.on(['app.record.create.change.予約有無', 'app.record.edit.change.予約有無'], (event) => {
const record = event.record;
if (record.予約有無.value == 'あり') {
// 予約有無の値が「あり」の場合
kintone.app.record.setFieldShown('予約日', true); // 表示
} else {
// 予約有無の値が「あり」以外の場合
kintone.app.record.setFieldShown('予約日', false); // 非表示
}
return event;
});
})()予約有無（ラジオボタン）の値変更時に選択された値をチェックし、「あり」の場合は予約日（日付）を表示し、それ以外の場合は予約日（日付）を非表示にするという処理です。
「kintone.app.record.setFieldShown(‘フィールドコード’, false);」のように「false」を指定すると非表示になります。
反対に「true」を指定すると表示になります。
フィールドコードはシングルクォート（またはダブルクォート）で囲みます。
- kintoneのJavaScriptカスタマイズでは、フィールドの表示切替を定義できます。
- 「event.record.フィールドコード.disabled = true;」でフィールドを編集不可にできます。
- 「kintone.app.record.setFieldShown(‘フィールドコード’, false);」でフィールドを非表示にできます。
他のフィールドの値に合わせて編集状態を切り替えたり、非表示にしたりできるので便利です。
ユーザーによって表示するフィールドを切り替えるなんてことに応用することができます。
次回の記事ではフィールドの値操作について解説します。
