ONLYOFFICEマクロでCSVやTXTのデータを記入可能なコンボボックスに変換する方法

ONLYOFFICE製品は、デジタル時代のすべての要求をカバーする非常に強力なソリューションです。バージョン7.0から、ONLYOFFICEエキスパートチームは、[ONLYOFFICEフォーム](https://www.onlyoffice.com/blog/2022/01/how-to-create-fillable-forms/?utm_source=blog&utm_medium=social&utm_id=combo_box_oforms)によってエディタの機能を拡張しました。電子文書での作業を容易にするために設計されたONLYOFFICEフォームは、多くの日常的なタスクを軽減することができます。その良い例の一つが、[販売契約書](https://oforms.onlyoffice.com/sale-and-purchase-agreement-form?utm_source=qiita&utm_medium=article&utm_id=combo_box_oforms&_ga=2.155094975.664673921.1673247425-520645956.1673247425)のテンプレートを作成するために、記入可能なフォームを使用することです。しかし、顧客情報を別々のCSV/TXTファイルに保存している場合はどうでしょうか？このブログ記事では、CSVやTXTのデータを取り込んで、記入可能なコンボボックスに変換するマクロの作り方をご紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/64d05d3e-bc8d-62a2-2c0d-13c1d2609772.png)

## ONLYOFFICEフォームについて

拡張された機能により、ユーザーが文書内で記入可能なフォームを楽に作成し、操作することができるフォーマットを提供します。DOCXF形式は、DOCXをベースにしたファイル拡張子で、フォームの作成と編集のための幅広いツールを提供します。ゼロから、または既存のDOCXファイルからフォームを作成することができます。OFORMは、オンラインですぐに記入可能なフォームのためのOOXML拡張機能です。これは、フォームのテンプレートを記入可能にし、他のユーザーによる編集を制限します。

ONLYOFFICEフォームは、[テキストドキュメント](https://api.onlyoffice.com/docbuilder/textdocumentapi?utm_source=qiita&utm_medium=article&utm_id=combo_box_oforms&_ga=2.155094975.664673921.1673247425-520645956.1673247425)の構造を継承し、いくつかの主要なクラスを含んでいます。

* テキストフィールド
* コンボボックス
* チェックボックス
* 画像フォーム
* 複合フォーム

これらのクラスには、テキストフィールド、複合フィールド、コンボボックス、ドロップダウンリスト、ラジオボタン、画像フォーム、電話番号やメールアドレスなどのフィールドを作成するためのメソッドが組み込まれています。

今回のマクロでは、コンボボックスクラスを使用します。コンボボックス要素には、外部CSV/TXTファイルからインポートする値のドロップダウン・リストが組み込まれています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/9e4c0aa0-7ae5-45c1-ae7d-d983358a6a68.png)

## マクロの構築

[APIドキュメント](https://api.onlyoffice.com/docbuilder/formapi/api/createcomboboxform?_ga=2.80193808.664673921.1673247425-520645956.1673247425)の`Form`セクションには、**Api.CreateComboBoxForm**メソッドがあります。これは、指定されたパラメータでコンボボックスを作成します。

```javascript
 var oComboBoxForm = Api.CreateComboBoxForm({"key": "Personal information", "tip": "Choose your country", "required": true, "placeholder": "Country", "editable": false, "autoFit": false, "items": ["Latvia", "USA", "UK"]});
```

`items`パラメータには、ドロップダウンリストに表示される値の配列が格納されています。そこで、この配列を、外部のCSV/TXTファイルから取得した値の配列に置き換えるというのが、今回の方針です。

しかし、まずは、外部ファイルを取得し、データを処理する必要があります。[CSV/TXTデータ取り込みマクロ](https://www.onlyoffice.com/blog/2022/10/use-onlyoffice-macro-to-import-csv-and-txt-data-into-your-spreadsheet/?utm_source=qiita&utm_medium=article&utm_id=combo_box_oforms)でも、同様の作戦をとりました。ONLYOFFICEのマクロはJavaScriptベースなので、非常に汎用性が高く、AJAXリクエストを使用することができます。

```javascript
function LoadFile() {
        $.ajax({
            url: 'file:///C:/Users/LEOPARD/Desktop/Book1.csv',
            dataType: 'text',https://www.onlyoffice.com/blog/wp-admin/post-new.php?lang=en#
        }).done(successFunction);
    }
        LoadFile();
```

さて、ファイルを取り出したので、この生データを処理してフォーマットする必要があります。そこで、`succesFunction`を追加します。これはデータを受け取り、テキストを行ごとのアイテムの配列に分割します。

```javascript
function successFunction(data) {
      var arrAllItems = data.split(/\r?\n|\r/);
}
```

次に、アクティブなドキュメントを対象とし、`items` パラメータに `arrAllItems` 配列を指定してコンボボックスを作成します。

```javascript
 var oDocument = Api.GetDocument();
 var oComboBoxForm = Api.CreateComboBoxForm({ "key": "Personal information1", "tip": "Choose your country", "required": true, "placeholder": "Country", "editable": false, "autoFit": false, "items": arrAllItems });
```

その後、段落を作成し、そこにコンボボックスを追加します。

```javascript
  var oParagraph = Api.CreateParagraph();
oParagraph.AddElement(oComboBoxForm);
```

ここで、コンボボックスを文書に挿入する必要があります。この作業を行うにはいくつかの方法がありますが、ここでは`InsertContent`メソッドを使用することをお勧めします。これは、カーソルが置かれている場所に要素を挿入するものです。また、パラメータでテキストと段落のプロパティを指定することをお勧めします。これにより、起こりうるミスやマクロの誤動作を防ぐことができます。

```javascript
oDocument.InsertContent([oParagraph], { "KeepTextOnly": true });
```
マクロのコード全体は以下の通りです。

```javascript
(function()
{
   function LoadFile() {
      $.ajax({
          url: 'file:///filePath,
          dataType: 'text',
      }).done(successFunction);
    }
        LoadFile();

   function successFunction(data) {
        var arrAllItems = data.split(/\r?\n|\r/);
        var oDocument = Api.GetDocument();
        var oComboBoxForm = Api.CreateComboBoxForm({ "key": "Personal information", "tip": "Choose your option", "required": true, "placeholder": "Option", "editable": false, "autoFit": false, "items": arrAllItems });
        var oParagraph = Api.CreateParagraph();
oParagraph.AddElement(oComboBoxForm);
oDocument.InsertContent([oParagraph], { "KeepTextOnly": true });
    }
})();
```

では、マクロを実行して、その動きを見てみましょう。

![importToOformRev.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2655664/fc3ffff0-2813-a661-a265-5ea3f6997789.gif)

**ご注意！**

コンボボックスを挿入するには、マクロを実行した後にスペースを押してください。
複数のコンボボックスをドキュメントに挿入するには、**Api.CreateComboBoxForm**メソッドの異なるキーパラメータを使用します。
このマクロは、APIメソッドを実装することでできることの多くの例の一つに過ぎません。ぜひ、この記事を参考に、独自のマクロを作成してみてください。

私たちのマクロはJavaScriptベースなので、非常に汎用的で実用的です。ご質問やアイデアの共有はご遠慮なくどうぞ。私たちは、議論と協力にオープンです。

## お役立ちリンク
* [ONLYOFFICE API](https://api.onlyoffice.com/docbuilder/formapi/api/createcomboboxform?utm_source=qiita&utm_medium=article&utm_id=combo_box_oforms&_ga=2.121676940.664673921.1673247425-520645956.1673247425)
* [OFORMSライブラリー](https://oforms.onlyoffice.com/?utm_source=qiita&utm_medium=article&utm_id=combo_box_oforms&_ga=2.121676940.664673921.1673247425-520645956.1673247425)
* [記入可能なフォームを作成する方法](https://www.onlyoffice.com/blog/2022/01/how-to-create-fillable-forms/?utm_source=qiita&utm_medium=article&utm_id=combo_box_oforms)
* [新しいOFORM & DOCXFのフォーマットについて](https://www.onlyoffice.com/blog/2022/03/onlyoffice-forms-new-oform-docxf-formats-explained/?utm_source=qiita&utm_medium=article&utm_id=combo_box_oforms)
* [CSVやTXTのデータをスプレッドシートに挿入する方法](https://www.onlyoffice.com/blog/2022/10/use-onlyoffice-macro-to-import-csv-and-txt-data-into-your-spreadsheet/?utm_source=qiita&utm_medium=article&utm_id=combo_box_oforms)