新規投稿
フォローする

サブテーブル内に動的ドロップダウン作成!(kintone UI Component v0.2利用)

4/17に、kintone UI Component v0.2が公開されました。 コンポーネントの追加・更新といった、v0.1からの大幅な変更がありました。 サブテーブルに関しては、カラムごとにしか設定できなかったフィールド設定が、セルごとに設定できるようになりました。 今回は、サブテーブル内に動的ドロップダウンを作成するサンプルを紹介します。

サンプル

「地方」の内容に合わせて、「都道府県」の選択肢を変更します。
サンプルではソースに直接マッピングを定義していますが、別アプリから情報を取得して利用することも可能です。

フォーム設定

コード

「kintone-ui-component.min.js」と「kintone-ui-component.min.css」を読み込み後、下記「sample.js」を読み込みます。

・sample.js

(function () {
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
  ], function (event) {

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

    choices = Object.keys(choices).reduce(function (modifiedChoices, category) {
      modifiedChoices[category] = [''].concat(choices[category]);
      return modifiedChoices;
    }, { '': [''] });
    var defaultRowData = {
      [column1Code]: {
        items: Object.keys(choices).map(function (category) {
          return { label: category || '-----', value: category };
        }),
        value: ''
      },
      [column2Code]: {
        items: [{ label: '-----', value: '' }],
        value: ''
      },
    };
    var initialData = event.record[tableCode].value.map(function (recordTableRow) {
      return {
        [column1Code]: {
          items: defaultRowData[column1Code].items,
          value: recordTableRow.value[column1Code].value || ''
        },
        [column2Code]: {
          items: choices[recordTableRow.value[column1Code].value || ''].map(function (choice) {
            return { label: choice || '-----', value: choice };
          }),
          value: recordTableRow.value[column2Code].value || ''
        }
      };
    });
    var columns = [{
      header: column1Label,
      cell: function () { return kintoneUIComponent.createTableCell('dropdown', column1Code) }
    }, {
      header: column2Label,
      cell: function () { return kintoneUIComponent.createTableCell('dropdown', column2Code) }
    }];
    var kucTable = new kintoneUIComponent.Table({
      data: initialData,
      defaultRowData: defaultRowData,
      columns: columns
    });
    var setRecord = function (kucTableValue) {
      var record = kintone.app.record.get();
      record.record[tableCode].value = kucTableValue.map(function (kucTableRow) {
        return {
          value: Object.keys(kucTableRow).reduce(function (recordTableRow, column) {
            recordTableRow[column] = {
              type: 'SINGLE_LINE_TEXT',
              value: kucTableRow[column].value || ''
            };
            return recordTableRow;
          }, {})
        };
      });
      kintone.app.record.set(record);
    };
    kucTable.on('cellChange', function (e) {
      setRecord(e.data);
      if (e.fieldName !== column1Code) return;
      e.data[e.rowIndex][column2Code] = {
        items: choices[e.data[e.rowIndex][column1Code].value].map(function (choice) {
          return { label: choice || '-----', value: choice };
        }),
        value: ''
      };
      kucTable.setValue(e.data);
    });
    kucTable.on('rowAdd', function (e) {
      setTimeout(function () {
        setRecord(e.data);
      });
    });
    kucTable.on('rowRemove', function (e) {
      setRecord(e.data);
    });
    kintone.app.record.setFieldShown(tableCode, false);
    kintone.app.record.getSpaceElement(spaceCode).appendChild(kucTable.render());
  });
})();

 

4

1件のコメント

Avatar
SiN

こんにちは。

サンプルコードのご提示ありがとうございます!

こちらのコードを参考にさらにテーブル内にフィールド(文字列)などを追加していきたいと考えていますが、
なかなかうまくいかず頓挫してしまっています。。。

お手数ですが、フィールドを追加していく場合についての方法についてご教授いただけませんでしょうか?

よろしくお願いします。

0
サインインしてコメントを残してください。