Tips

kintone UI Component v1を使って動的ドロップダウンを作成しよう！

著者名：江田 篤史

目次

はじめに

固定リンクがコピーされました

kintone UI Componentは、kintoneライクなUIを簡単に作成できるライブラリでフォーム部品を自作する場合などには非常に便利です。

今回は選択肢を動的に変更するドロップダウンを作成してみました。

サンプル

固定リンクがコピーされました

アンケートなどで47都道府県から自身が該当する都道府県を直接選ぶのはたいへんですよね！

選択した「地方」に合わせて、「都道府県」の選択肢を変更するカスタマイズを紹介します。

デモ

固定リンクがコピーされました

kintone UI Componentアップデートにより、デモと動きは異なる可能性があります。

フォーム設定

固定リンクがコピーされました

フィールド名 フィールドタイプ フィールドコード（or要素ID） 備考
地方 ドロップダウン 地方 次の項目を設定します。
  • 北海道地方
  • 東北地方
  • 関東地方
  • 中部地方
  • 近畿地方
  • 中国地方
  • 四国地方
  • 九州地方
都道府県 文字列（1行） 都道府県
- スペース space

コード

固定リンクがコピーされました

次のファイルをアプリに適用します。

  • sample.js
    後述のサンプルプログラムです。
  • kuc.min.js
    kintone UI componentライブラリです。

参考： JavaScriptやCSSでアプリをカスタマイズする (External link)

kuc.min.jsの入手方法は以下のとおりです。
この記事では、kintone UI Component v1.16.0を使用しています。

  1. https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.16.0 (External link) を開きます。
  2. 「Assets」からkintone-ui-component-1.16.0.tgzをダウンロードします。
  3. ダウンロードしたtgzファイルを解凍します。
  4. 解凍後のフォルダーpackage > umd以下のkuc.min.jsを利用します。

次はサンプルプログラムになります。
sample.jsとして保存してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

/*
 * create dropdown using kintone UI Component
 * Copyright (c) 2018 Cybozu
 *
 * Licensed under the MIT License
*/

(() => {
  'use strict';

  const prefectures = {
    北海道地方: ['北海道'],
    東北地方: ['青森', '岩手', '宮城', '秋田', '山形', '福島'],
    関東地方: ['東京', '茨城', '栃木', '群馬', '埼玉', '千葉', '神奈川'],
    中部地方: ['新潟', '富山', '石川', '福井', '山梨', '長野', '岐阜', '静岡', '愛知'],
    近畿地方: ['京都', '大阪', '三重', '滋賀', '兵庫', '奈良', '和歌山'],
    中国地方: ['鳥取', '島根', '岡山', '広島', '山口'],
    四国地方: ['徳島', '香川', '愛媛', '高知'],
    九州地方: ['福岡', '佐賀', '長崎', '大分', '熊本', '宮崎', '鹿児島', '沖縄']
  };

  const setDropdownItems = (event, dropdown) => {
    const regionValue = event.record.地方.value;
    if (!regionValue) return;
    const items = [{label: '-----', value: ''}];
    prefectures[regionValue].forEach((prefecture) => {
      items.push(
        {
          label: prefecture,
          value: prefecture
        }
      );
    });

    dropdown.items = items;
  };

  let dropdown;

  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
    const prefectureValue = event.record.都道府県.value;
    const Kuc = Kucs['1.16.0'];
    dropdown = new Kuc.Dropdown({
      label: '都道府県',
      items: []
    });

    kintone.app.record.setFieldShown('都道府県', false);
    setDropdownItems(event, dropdown);
    dropdown.value = prefectureValue || '';
    kintone.app.record.getSpaceElement('space').appendChild(dropdown);

    dropdown.addEventListener('change', (e) => {
      const record = kintone.app.record.get();
      record.record.都道府県.value = e.detail.value;
      kintone.app.record.set(record);
    });
  });

  kintone.events.on(['app.record.create.change.地方', 'app.record.edit.change.地方'], (event) => {
    setDropdownItems(event, dropdown);
    dropdown.value = '';
    event.record.都道府県.value = '';
    return event;
  });

  kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], (event) => {
    const prefectureValue = event.record.都道府県.value;
    if (!prefectureValue) {
      event.error = '都道府県を選択してください';
    }
    return event;
  });
})();

解説

固定リンクがコピーされました

kintone UI Component (External link) を用いた、動的ドロップダウン作成の流れを解説します。

  1. ラベルとドロップダウンを作成
  2. ドロップダウンの値をレコードとして保存
  3. 選択肢を可変にする

ドロップダウンのプロパティに関する解説は kintone UI Componentドキュメント (External link) を参考してください。
ここでは「都道府県」の選択肢を関東地方の都県に絞って解説していきます。

1. ドロップダウンを作成

固定リンクがコピーされました

用意したスペースフィールド内に、ドロップダウンを作成します。

コード
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

(() => {
  'use strict';

  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
    const Kuc = Kucs['1.16.0'];
    const dropdown = new Kuc.Dropdown(
      {
        label: '都道府県',
        items: [
          {label: '東京', value: '東京'},
          {label: '茨城', value: '茨城'},
          {label: '栃木', value: '栃木'},
          {label: '群馬', value: '群馬'},
          {label: '埼玉', value: '埼玉'},
          {label: '千葉', value: '千葉'},
          {label: '神奈川', value: '神奈川'}
        ]
      }
    );
    kintone.app.record.getSpaceElement('space').appendChild(dropdown);
  });
})();
利用したkintone UI Componentのメソッドとプロパティ
  • new Kucs['1.16.0']: バージョンを指定して、kintone UI Componentのインスタンスを作成します。
    今回は、1.16.0を使います。
  • Dropdown(): ドロップダウンを作成します。
デモ

2. ドロップダウンの値をレコードとして保存

固定リンクがコピーされました

先ほど作成したドロップダウンの値を「文字列（1行）」フィールドにコピーすることでレコードとして保存します。

コード
1
2
3
4
5

dropdown.addEventListener('change', (e) => {
  const record = kintone.app.record.get();
  record.record.都道府県.value = e.detail.value;
  kintone.app.record.set(record);
});
利用したメソッド
  • addEventListener(): ドロップダウンのイベントリスナの追加
デモ

3. 選択肢を可変にする

固定リンクがコピーされました

選択した「地方」に合わせて、「都道府県」の選択肢を動的に変更します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const setDropdownItems = (event, dropdown) => {
  const regionValue = event.record.地方.value;
  if (!regionValue) return;
  const items = [{label: '-----', value: ''}];
  prefectures[regionValue].forEach((prefecture) => {
    items.push(
      {
        label: prefecture,
        value: prefecture
      }
    );
  });

  dropdown.items = items;
};

// 省略

kintone.events.on(['app.record.create.change.地方', 'app.record.edit.change.地方'], (event) => {
  removeDropdownItems(event, DROPDOWN);
  setDropdownItems(event, DROPDOWN);
  event.record.都道府県.value = '';
  return event;
});
利用したドロップダウンのプロパティ
  • dropdown.items: ドロップダウンの選択肢を設定する。
  • dropdown.value: ドロップダウンの値を設定する。

おわりに

固定リンクがコピーされました

kintone UI Componentを使用すると、DOM等の知識がなくても容易にkintoneライクなフォーム部品を作成できます。
いろいろとカスタマイズの幅が大幅に広がりますので、ぜひ活用してみてください。

変更履歴

固定リンクがコピーされました

  • 2019年11月25日
    kintone UI Component v0.4.3に合わせてサンプルコードおよびデモのスクショを修正しました。
    • 「都道府県」の値が選択済みのときの場合でも、「地方」を変更するときに「都道府県」の値を初期化する。
    • 「都道府県」が選択されていない状態で保存した場合、エラーを表示する。
  • 2014年2月22日
    kintone UI Componentをv0からv1に変更しました。

固定リンクがコピーされました

information

このTipsは、2024年02月版kintoneで動作を確認しています。