킨톤의 하락, 합작하고 싶죠?
이에 따라 이번 맞춤형 제작은 kintone UI Component v1에서 두 개의 하단을 만들어 협업한다.첫 번째 드롭다운 선택은 두 번째 드롭다운 옵션을 대체합니다.

어플리케이션 준비

공백과 문자열 (단행) 필드를 창에 놓습니다.
필드 유형
필드 이름
필드 코드
스페이스 바
--
spDropdown
문자열(단일행)
형제 강등 선택
drText

JavaScript

저번과 같다
화면에 표시된 이벤트를 새로 추가하고 편집할 때 아래로 이동할 수 있습니다.

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

설치 저하

공백 필드 요소를 획득한 다음
드롭다운 형제 두 명을 설정하다.

// ドロップダウンを設置するスペースフィールドの要素を取得
const spDropdown = kintone.app.record.getSpaceElement("spDropdown");


// ドロップダウン兄をつくる
const drAni = new Kuc.Dropdown({
  label: "ドロップダウン兄",
  requiredIcon: true,
  // items にはドロップダウンの中身を書く
  items: [
    { value: "メイン" },
    { value: "サイドメニュー" },
    { value: "ドリンク" },
  ],
  visible: true,
  disabled: false,
});

// スペースフィールドにドロップダウン兄を置く
spDropdown.appendChild(drAni);

// ドロップダウン弟をつくる（選択肢はからっぽ）
const drOtoto = new Kuc.Dropdown({
  label: "ドロップダウン弟",
  requiredIcon: true,
  // items は、からっぽにしておく
  items: [],
  visible: true,
  disabled: false,
});

// スペースフィールドにドロップダウン弟を置く
spDropdown.appendChild(drOtoto);

형의 선택을 통해서 동생에게 보기를 드리도록 하겠습니다.

형이 선택한 결과에 따라.
내려간 동생에게 옵션을 줘봐.
다음은 형이 메인 메뉴를 선택했습니다.
드롭다운 동생의 선택은 굽는 햄버거, 치즈버거, BLT였다.
반찬을 선택했다면 동생은 감자, 닭강정, 샐러드를 선택할 수 있었다.
다음은 형이 선택한 내용을 당겨서 switch 글을 만들겠습니다.
선택 항목은droptoto(남동생 감소)의 속성을 직접 설정합니다.

// ドロップダウン兄を選択したときのイベント
drAni.addEventListener("change", () => {
  switch (drAni.value) {
    case "メイン":
      drOtoto.items = [
        { value: "てりやきバーガー" },
        { value: "チーズバーガー" },
        { value: "BLT" },
      ];
      break;
    case "サイドメニュー":
      drOtoto.items = [
        { value: "ポテト" },
        { value: "ナゲット" },
        { value: "サラダ" },
      ];
      break;
    default:
      drOtoto.items = [
        { value: "オレンジジュース" },
        { value: "コーヒー" },
        { value: "水" },
      ];
  }
});

드롭다운 동생을 선택한 후 문자열 필드에 선택 항목 표시

동생을 뽑을 때의 이벤트도 만들어 봤다.
선택한 드롭다운 값을 문자열(단행) 필드에 표시합니다.
요점은 get과 set을 사용하는 것입니다.

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

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

동작 확인 & 집계

이렇게 두 개가 밑으로 컬래버레이션이 됐나요?
kintone UI Component v1kintoone 스타일의 디자인으로 다양한 컨트롤 가능
인코딩도 쉬워지니까 꼭 도전해보세요.