이번에는 kintone UI Component v1에 무선 버튼이 설치되었습니다.

어플리케이션 준비

공백을 설정합니다.
공간의 요소 ID는 radio입니다.

그림 완성

kintone UI Component v1 준비

JavaScript / CSSでカスタマイズkintone UI Componentv1의 CDN을 추가합니다.
CDN : https://unpkg.com/kintone-ui-component/umd/kuc.min.js

JavaScript

↓ 여기를 참고하여 스페이스 바에 라디오 버튼을 설치한다.

// 詳細イベントでラジオボタン表示
kintone.events.on(["app.record.detail.show"], (event) => {
  // ラジオボタン設置用スペース
  const spRadio = kintone.app.record.getSpaceElement("radio");

  const radio = new Kuc.RadioButton({
    label: "ラジオボタン（kintone UI Component v1）",
    items: [
      {
        label: "りんご",
        value: "りんご",
      },
      {
        label: "みかん",
        value: "みかん",
      },
      {
        label: "ぶどう",
        value: "ぶどう",
      },
    ],
    itemLayout: "horizontal", // 横に並べるのでhorizontal
    visible: true,
    disabled: false,
    borderVisible: true,
  });
  spRadio.appendChild(radio);

  // ラジオボタン選択変更イベントでコンソールに表示
  radio.addEventListener("change", (event) => {
    console.log("変更前：", event.detail.oldValue);
    console.log("変更後：", event.detail.value);
  });

  return event;
});

코드 전체는 다음과 같다↓

동작 확인 & 집계

라디오 버튼은 콘솔에 수정 전과 수정 후의 값을 표시합니다.

복선상자도 마찬가지입니다. 지난번 값을 얻을 수 있어서 곧 쓸모가 있을 것 같습니다^^
꼭 해보세요~✨