안녕하세요.
이번에는 kintone UI Component v1로 드롭다운 목록을 만들고 싶습니다.

kintone UI Component v1 준비

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

혼자 드롭다운 목록

먼저 드롭다운 목록을 설정합니다.
선택한 문자열을 문자열 (1 줄) 필드에 표시하는 사용자 정의 프로그램을 만들고 싶습니다.

애플리케이션 준비

창에 공백과 문자열 필드를 배치합니다.
필드 유형
필드 이름
필드 코드
공간
--
spDropdown
문자열 (1 줄)
드롭다운 외침
drText

JavaScript

화면 표시를 새로 추가하고 편집하는 이벤트에서 드롭다운 목록을 이동합니다.

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

  }
);

드롭다운 목록 설정

여기를 참고하여 드롭다운 목록을 만듭니다.
드롭다운 목록의 items 에서 옵션을 설정하는 것이 중요합니다.
※ value만 사용할 수 있습니다.

// ドロップダウンを設置するスペースフィールドの要素を取得
const spDropdown = kintone.app.record.getSpaceElement("spDropdown");
// ドロップダウンをつくる
const drHitokoto = new Kuc.Dropdown({
  label: "一言言いたいドロップダウン",
  requiredIcon: true,
  // items にはドロップダウンの中身を書く
  items: [
    { label: "あ！", value: "あ！" },
    { label: "おなかすいた", value: "おなかすいた" },
    { label: "こんにちは", value: "こんにちは" },
    { label: "いい天気ですね！", value: "いい天気ですね！" },
    { label: "最近肩が凝っています", value: "最近肩が凝っています" },
  ],
  visible: true,
  disabled: false,
});
// スペースフィールドにドロップダウンを置く
spDropdown.appendChild(drHitokoto);

드롭다운 목록을 선택할 때 이벤트

리본에서 를 클릭합니다.
드롭다운 목록에서 선택한 값을 문자열 (한 줄) 필드에 설정합니다.

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

전체 코드는 다음과 같다.

동작 확인 & 총결산

이런 동작인가요?

다음에는 콜라보레이션 드롭다운 메뉴를 만들어 보고 싶어요.