こんにちは！
今回は、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つ設置して、
選択した文字列を、文字列(1行)フィールドに表示するというカスタマイズアプリを作ってみたいと思います。
アプリの準備
スペースフィールドと文字列(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);
ドロップダウンを選択した時のイベント
ドロップダウンの change イベント発生時に、
ドロップダウンで選択した値を文字列(1行)フィールドにセットします。
// ドロップダウンを選択したときのイベント
drHitokoto.addEventListener("change", () => {
const r = kintone.app.record.get();
// ドロップダウンで選択した値を文字列(1行)フィールド（フィールドコード：drText）にコピー
r.record.drText.value = drHitokoto.value;
kintone.app.record.set(r);
});
全体的なコードは以下です。
動作確認＆まとめ
このような動きになったでしょうか？？
次回は連携するドロップダウン作ってみたいと思います。