이번에는 킨톤 표준 기능 저하와 킨톤 UI Component v1 저하가 결합한 샘플이다.
kintone UI Component v1 문서가 여기 있습니다.

어플리케이션 준비

창에 하단, 공백, 문자열 (단행) 필드를 놓습니다.
필드 유형
필드 이름
필드 코드
시험을 준비하다
내리다
회사명
회사명
선택지는 닌텐도, 스케이니, 코나미 등.
스페이스 바
--
spDropdown
문자열(단일행)
좋아하는 게임
좋아하는 게임

kintone UI Component v1 준비

달성
kintone UI Componentv1의 CDN을 추가합니다.
CDN : JavaScript / CSSでカスタマイズ

JavaScript

새로운 추가 & 편집 화면에서 드롭다운 동작을 진행합니다.

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

  }
);

공간 필드에 드롭다운 설정

kintone UI Component v1에 드롭다운 설정
관건은 items를 비우고 id를 설정하는 것입니다.
드롭다운 수정 이벤트의 문자열 필드에 선택한 값이 표시됩니다.
(addEventListener로 작성~)

// ドロップダウンを設置するスペースフィールドの要素を取得
const spDropdown = kintone.app.record.getSpaceElement("spDropdown");
// ドロップダウンをつくる
const drGame = new Kuc.Dropdown({
  label: "ゲーム",
  requiredIcon: true,
  // items はからっぽにしておく
  items: [],
  // changeイベントで拾えるようにidを設定しておく
  id: "drGame",
  visible: true,
  disabled: false,
});
// スペースフィールドにドロップダウンを置く
spDropdown.appendChild(drGame);

// ドロップダウンを選択したときのイベント
drGame.addEventListener("change", () => {
  const r = kintone.app.record.get();
  // ドロップダウンで選択した値を文字列(1行)フィールド（フィールドコード：好きなゲーム）にコピー
  r.record.好きなゲーム.value = r.record.会社.value + "：" + drGame.value;
  kintone.app.record.set(r);
});

기본 기능의 드롭다운 필드 값을 수정하는 프로그램

기본 기능의 드롭다운 값을 수정하면 필드 값 변경 이벤트가 발생합니다.
선택한 값에 따라 드롭다운 내용을 수정합니다.

// ドロップダウンを変更するイベント
kintone.events.on(
  ["app.record.create.change.会社", "app.record.edit.change.会社"],
  (event) => {
    // ゲームドロップダウンの要素取得
    const drGame = document.getElementById("drGame");

    // 選択した会社によって、ドロップダウンのitemsを変更する
    switch (event.changes.field.value) {
      case "任天堂":
        drGame.items = [
          { value: "マリオ" },
          { value: "ゼルダ" },
          { value: "ポケモン" },
        ];
        break;
      case "スクエニ":
        drGame.items = [
          { value: "ロマサガ" },
          { value: "FF" },
          { value: "ドラクエ" },
        ];
        break;
      default:
        drGame.items = [
          { value: "ゴエモン" },
          { value: "ポップンミュージック" },
          { value: "メタルギアソリッド" },
        ];
    }
  }
);

전체 코드는 다음과 같습니다.

동작 확인 & 집계

이런 느낌 있어요?

표준 기능의 하락은 킨톤 UI Component v1 제작의 하락과 맞물려 있다.
다른 응용 프로그램의 기록을 하단 옵션으로 사용할 수도 있습니다.
↓ 이것도 참고하세요
kintone UI Component v1을 활용하면 다양한 앱을 만들 수 있을 거예요!