必須項目ではないラジオボタンの作り方

小技・ナレッジの共有
1

標準機能のラジオボタンは必ず必須項目となり
常時1つの選択肢が選ばれている状態にしかできません。

選べる選択肢は1つだけでいいが、未選択も可能にしたいという場合は
以下のコードで初期値が無く、空文字選択肢を含むラジオボタンを作れます。

※kuc.min.js の適用必須

(() => {
  'use strict';

  // 追加画面か編集画面が表示されたときの処理
  const events = ['app.record.create.show', 'app.record.edit.show'];

  kintone.events.on(events, (event) => {
    const record = event.record;

    // [文字列1行]フィールドを非表示にする
    kintone.app.record.setFieldShown('文字列1行', false);

    // ラジオボタンの選択肢を定義
    const radioOptions = [
      { label: '（未選択）', value: '' },
      { label: '選択肢A', value: '選択肢A' },
      { label: '選択肢B', value: '選択肢B' },
      { label: '選択肢C', value: '選択肢C' }
    ];

    // ラジオボタンの初期値を現在の[文字列1行]フィールドから取得
    const initialValue = record['文字列1行'].value || '';

    // Kintone UI Component のラジオボタンを作成
    const radioButton = new Kuc.RadioButton({
      items: radioOptions,
      value: initialValue
    });

    // ラジオボタンの値が変わったときの処理
    radioButton.addEventListener('change', (e) => {
      const selectedValue = e.detail.value;

      // 現在のレコードの値を取得
      const updatedRecord = kintone.app.record.get();

      // [文字列1行]フィールドの値を更新
      updatedRecord.record['文字列1行'].value = selectedValue;

      // 現在のレコードに値を設定
      kintone.app.record.set(updatedRecord);
    });

    // スペースフィールド（要素ID: RadioButton）にラジオボタンを設置
    const spaceElement = kintone.app.record.getSpaceElement('RadioButton');
    if (spaceElement) {
      spaceElement.replaceChildren(); // 再描画に備えて初期化
      spaceElement.appendChild(radioButton);
    }

    return event;
  });
})();
「いいね！」 5