이번에는 킨톤 UI Component v1의 하강과 결합한 샘플을 찾아보라고 했다.
검색 값에 따라 kintone UI Component v1의 드롭다운 옵션을 변경합니다.

🍄학과 응용 프로그램 완료

메인스테이션 응용 프로그램과 실제 설정 하단의 응용 두 가지를 제작한다.

🌼기본 응용 프로그램

드롭다운 원인의 주 사이트가 됨

음반의 상세한 상황은 아래와 같다.

🌼드롭다운 응용 프로그램 설정

찾기에서 선택한 무기와 관련된 기술은 드롭다운 선택입니다.

🍄어플리케이션 준비

🌼기본 응용 프로그램 준비 선택

내가 무기를 선택하고 싶다면 기술을 선택할 수 있어.
응용 프로그램의 이름은'무기와 기술'이다.
필드 유형
필드 이름
필드 코드
시험을 준비하다
문자열(단일행)
무기.
무기.
중복 금지
테이블
테이블
테이블
테이블의 문자열(행)
테크닉
테크닉

🌼드롭다운 설정 준비

하단 장치를 설치한 프로그램은 이런 느낌이다.
필드 유형
필드 이름
필드 코드
시험을 준비하다
찾다
무기 선택
무기 선택
설정 찾기는 이미지 참조
문자열(단일행)
무기.
무기.
스페이스 바
--
spWaza
드롭다운 설정
문자열(단일행)
대사
대사
응용 프로그램 형식

찾기 설정

🍄kintone UI Component v1 준비

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

🍄JavaScript

우리 맞춤 제작합시다.
지난번까지의 기사도 참고해주세요 kintone UI Component v1화면 표시를 추가·편집할 때 드롭다운을 설정합니다.
이벤트에 앞서 드롭다운 옵션 목록을 설명합니다.kintone REST API에서 기술(비동기 처리)을 호출하기 때문에 async을 추가합니다.

// 技のリスト
const listDropdown = [];

// 追加・編集画面表示イベント
kintone.events.on(
  ["app.record.create.show", "app.record.edit.show"],
  async (event) => {// 非同期処理するのでasyncをつけておく
  // ココにコード書く
  }
);

🌼드롭다운 옵션으로 기술 리스트 획득

// 技のリストを取得する
const rWaza = await kintone.api(
  kintone.api.url("/k/v1/records", true),
  "GET",
  { app: 319 }
);

// 武器ごとに技のリストを作っておく（ココちょっと難しいかも）
rWaza.records.forEach((r) => {
  listDropdown[r.武器.value] = [];
  r.テーブル.value.forEach((row) => {
    listDropdown[r.武器.value].push({ value: row.value.技.value });
  });
});

🌼공간 필드에 드롭다운 설정

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

// ドロップダウンを置くスペースの要素を取得
const spWaza = kintone.app.record.getSpaceElement("spWaza");

// ドロップダウンをつくる
const drWaza = new Kuc.Dropdown({
  label: "技選択",
  // ルックアップ時にドロップダウン要素を取得しやすいようにid設定しておく
  id: "drWaza",
  // items はからっぽにしておく
  items: [],
  visible: true,
  disabled: false,
});

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

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

🌼검색할 때 변경 이벤트 가져오기

검색 영역이 변경되지 않았기 때문에 대신 검색에 설정된 문자열(1줄) 무기 필드의 변경을 검사합니다.

// ルックアップ取得で文字列(1行)の武器が変更したときのイベント
kintone.events.on(
  ["app.record.create.change.武器", "app.record.edit.change.武器"],
  (event) => {
    //ココにコード書く
  }
);

검색을 가져올 때 저장된 옵션 목록을 드롭다운 옵션drWaza.items으로 설정합니다.지우기 찾기에서 드롭다운 옵션과 대사를 지웁니다.

// 技ドロップダウンの要素取得
const drWaza = document.getElementById("drWaza");

// ルックアップクリアの時は技リストとセリフをクリアする。
if (!event.changes.field.value) {
  drWaza.items = [];
  event.record.セリフ.value = "";
} else {
  // ルックアップ取得したらに武器ごとに保存しておいたリストを選択肢にセットする
  drWaza.items = listDropdown[event.changes.field.value];
}
return event;

전체 인코딩은 다음과 같다.

🍄총결산

kintone UI Component v1를 사용하여 기본 응용 프로그램에서 드롭다운 내용을 검색하고 표시할 수 있습니다.하단 합작을 할 수 있다면 응용 프로그램의 범위가 확대될 것이다.
※ 제작을 해보니 찾기와 드롭이 아닌 두 개의 드롭을 만들어 더 빨리💦도전해보세요.😋