이번에는 kintone UI Component v1에 확인란을 설치했습니다.

어플리케이션 준비

비교를 위해 표준 기능의 확인란과 kintone UI Component v1의 확인란 설정에 사용할 공간을 준비했습니다.
필드 유형
필드 코드
시험을 준비하다
확인란
확인란
사과/귤/포도
스페이스 바
spCheckbox

kintone UI Component v1 준비

여기 CDN 참조, 설정JavaScript / CSS でカスタマイズ.

JavaScript

새 레코드에 화면을 추가하고 화면 표시 이벤트를 편집하여 이동합니다.

kintone.events.on(
["app.record.create.show", "app.record.edit.show"],
(event) => {
  //コードを書くところ

});

확인란 설정(kintone UI Component v1)

// チェックボックス設置用スペース
const spCheckbox = kintone.app.record.getSpaceElement("spCheckbox");

// チェックボックス本体を作る
const checkbox = new Kuc.Checkbox({
  label: "チェックボックス（kintone UI Component v1）",
  items: [
    {label: "りんご", value: "りんご"},
    {label: "みかん", value: "みかん"},
    {label: "ぶどう", value: "ぶどう"},
  ],
  itemLayout: "horizontal", //横向き
  visible: true,
  disabled: false,
  borderVisible: true,
});

// スペースフィールドにチェックボックス設置
spCheckbox.appendChild(checkbox);

확인란 선택 이벤트(kintone UI Component v1)

addEventeListener의 change를 사용할 수 있습니다.
표준 기능 확인란에서 수정 전 값을 가져올 수 있습니다.
※event.detail.oldValue:수정 전 값
※event.detail.value: 변경된 값

checkbox.addEventListener("change", (event) => {
  console.log("変更前：", event.detail.oldValue);
  console.log("変更後：", event.detail.value);
});

확인란 선택 이벤트(기본 기능)

기본 기능의 체크 상자 (값 변경) 를 선택할 때, 무엇을 하려면change 이벤트를 사용하십시오.
표준 기능의 콤보 상자는 변경 전의 값을 단독으로 얻을 수 없습니다.

kintone.events.on(
  [
    "app.record.create.change.チェックボックス",
    "app.record.edit.change.チェックボックス",
  ],
  (event) => {
    // チェックボックス値変更イベント
    console.log(event);
  }
);

확인란 설정 완료

확인란에 선택한 값이 콘솔에 표시됩니다.

마지막 코드는 여기예요.

총결산

확인란이 변경되기 전의 값은 kintone UI Component v1에서 사용할 수 있습니다.
다른 Component (드롭다운, 텍스트 상자, 여러 줄 텍스트 상자, 여러 선택, 단추 선택) 도 변경된 값을 얻을 수 있습니다.편하네.