コラボフローでExcelデータの取り込んでみる

この記事は コラボフロー Advent Calendar 2023 の 25日目 のサブ記事です。
コラボフローを知らない方は こちら を参考にしてみてください。

（メイン記事は、別途公開されます。）

Excel添付取込パーツって便利ですが、セル数が多かったりすると設定が大変ですよね…。
カスタマイズでもっと楽にできないかな？と思い、カスタマイズしてみました🔥

事前準備

Excelファイル

今回はサンプルとして、5列、50行のデータを準備しました。

コラボフローの通常フォーム

必要となるのは以下のパーツです。

• 添付ファイルパーツ
• ラベルパーツ
• テーブルパーツ

ラベルパーツの設定情報

フォーム内にExcelファイルを取り込むためのボタンを表示させたいので、「ラベルの内容」には以下のHTMLを登録しておきます。

<button class="excel_import" type="button">取り込むよー</button>

テーブルパーツ

設定値としては、5列、50行で、初期表示行数が50行としておきます。

カスタマイズファイル情報

SheetJSを利用したいので、フォーム編集画面にて「カスタマイズ」タブを表示して、以下のように登録します。

SheetJS

SheetJS については、さんまさんが紹介記事を書いているので、そちらを読んでみてください！
https://zenn.dev/collabostyle/articles/766f4e9f0e9577

登録するURL「https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js」

カスタマイズファイル（JavaScript）

collaboflow_excel_import_　customize.js

(function () {
    "use strict";

    // 取込対象のExcelファイルの情報
    // シート名
    const SHEET_NAME = 'Sheet1';
    // Excelの開始行数
    const EXCEL_START_ROW_NUMBER = 2;
    // Excelの終了行数
    const EXCEL_END_ROW_NUMBER = 50;
    // Excelの列数
    const COLUM_COUNT = 5;
    // Excelの列名(アルファベットのみ)
    const TARGET_COLUMN = ['A', 'B', 'C', 'D', 'E'];

    // コラボフローのフォームの情報
    // 添付ファイルパーツのFid
    const FILEATTACH_PART_FID = 'fidAttach';
    // コラボフローのテーブルパーツに設定されているパーツのFid
    const TABLE_COLUMN_PARTS_FID = ['fid3', 'fid4', 'fid5', 'fid6', 'fid7'];

    collaboflow.events.on('request.input.show', function (data) {
        const excelImportButton = document.getElementsByClassName('excel_import')[0];
        excelImportButton.addEventListener('click', async function () {

            const file_id = document.getElementsByName(FILEATTACH_PART_FID)[0].value.split('|')[1];
            if (file_id === undefined) {
                return;
            }

            const url = `${collaboflow.page.api_endpoint}/v1/files/${file_id}/download`
            const workbook = await getWorkbook(url);
            setExcelToParts(workbook);

            // Excelファイルを読み込む
            function getWorkbook(url) {
                return fetch(url)
                    .then(function (res) { return res.arrayBuffer(); })
                    .then(function (ab) { return XLSX.read(ab, { type: 'array' }); });
            }

            // Excelの値をパーツにセットする
            function setExcelToParts(workbook) {
                let currentRowCount = 1;

                for (let index = EXCEL_START_ROW_NUMBER; index <= EXCEL_END_ROW_NUMBER; index++) {
                    let columArray = [];
                    for (let rowIndex = 0; rowIndex < COLUM_COUNT; rowIndex++) {
                        columArray.push(workbook.Sheets[SHEET_NAME][`${TARGET_COLUMN[rowIndex]}${index}`]);
                    }

                    setValue(columArray, currentRowCount);
                    currentRowCount++;
                }
            }

            // パーツに値をセットする
            function setValue(columArray, currentRowCount) {
                for (let i = 0; i < COLUM_COUNT; i++) {
                    const colum = columArray[i];
                    if (colum === undefined) {
                        return;
                    }

                    const fid = TABLE_COLUMN_PARTS_FID[i];
                    if (fid === undefined) {
                        return;
                    }

                    document.getElementById(`${fid}_${currentRowCount}`).value = colum.v;
                }
            }
        });
    });
})();

動作確認

以下の手順で実際に動作するか確認してみます。

1. Excelファイルを添付ファイルパーツにアップロードする。
2. 「読み込み」ボタンをクリックする

最後に

カスタマイズって色々な可能性を秘めていますよね！
ただ、カスタマイズファイルのアップロードや編集って結構手間になっているので、何か改善できる案を検討中です❤️

（今年は、くだらないことやらないの？と思っている方は、アドベントカレンダー 25日目メイン記事の投稿をお待ちください！）

くだらないことたち

https://www.collabo-style.co.jp/developer-blog/20211228/
https://www.collabo-style.co.jp/developer-blog/20221225/