Kintone JavaScriptカスタマイズVol.2

#フィールドへの入力可、不可をラジオボタンを使用して制御する

前回の投稿では、新規レコード作成画面を開いた際に一部のフィールドを非表示にする処理をJavaScriptカスタマイズで実装しました。
前回の記事はこちら
２回目である今回はフィールド内に設置したラジオボタンを使用して、フィールドへの入力可、不可を制御できるようなカスタマイズを行っていきたいと思います。

#環境と準備
今回も前回同様、kintone内でJavaScriptの編集・保存が簡単に行えるプラグイン「JSEdit for kintone」を使用していきます。
JSEdit for kintone：https://developer.cybozu.io/hc/ja/articles/205452653
また、アプリは任意作成した物を使用していきます。

#カスタマイズ
カスタマイズの内容をもう一度確認します。
今回は、「任意アプリの新規レコード作成画面で、フィールド内に設置したラジオボタンを使用し、フィールドへの入力可、不可を制御する」というカスタマイズを行っていきます。
完成形としては添付画像のように、ラジオボタンの「無効にする」選択時に”入力を制御したい項目”を入力不可となるようにしていきます。

実現したいことの整理ができたので、先ずはサンプルアプリの準備をします。
新規アプリ作成ではじめから作成を選択し、フォームに「ラジオボタン」と「文字列（複数行）」を設置します。
またラジオボタンの項目は、デフォルトだとsample1.2のようになっているため、今回は設定から項目を編集し「有効にする」「無効にする」のようにしました。
また、文字列も分かりやすく「入力を制御したい項目」とフィールド名だけ変更しました。

さて、ここからはJavaScriptを用いてカスタマイズを行っていきます。
基本的な流れとしては前回と同じく、イベントを発火点に処理内容を記述していくのですが、今回は条件分岐が発生します。
ラジオボタンのどちらが選択されたかによって結果を変えたいからです。
先にソースコードですが、以下となります。

ソースコード

(function() {
    "use strict";
    
    //① ラジオボタンイベントを取得
    var my_events = ['app.record.create.change.ラジオボタン', 'app.record.edit.change.ラジオボタン'];
    //②　条件分岐の記述 
    kintone.events.on(my_events, function(event) {

        var record = event['record'];
        
        if (record['ラジオボタン']['value'] === "有効にする") {

            //"有効にする"を選択している場合の結果
            record['文字列__複数行_']['disabled'] = false;
        }else {

            //"無効にする"を選択している場合の結果
            record['文字列__複数行_']['disabled'] = true;
        }
        return event;
    });
})();

先ずは、ラジオボタンイベントを取得するコードを記入します。フィールド変更時イベント記述について
ソースコード内コメントアウト①部分

その後にイベント（今回の場合はラジオボタンイベントを取得した変数 ”my_events”）を発火点として条件分岐の内容を記述します。
ソースコード内コメントアウト②部分

今回は、ラジオボタンが”有効にする”になっていた場合には 文字列__複数行_ を通常表示　['disabled'] = false;
”無効にする”選択時には入力欄を無効化しグレーアウト　['disabled'] =true;
となるように条件分岐部分を記述しました。

##実際の画面で確認

ラジオボタンの選択によって、「入力を制御したい項目」というフィールドの表示結果が代わり、無効にする選択時にはフィールドがグレーアウトされ入力不可とすることができました。

#まとめ
条件分岐をうまく活用する事でもっと複雑な処理が可能となりそうです。