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 で動作を確認しています。