> For the complete documentation index, see [llms.txt](https://docs.dashcomb.com/dashcomb-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/importer.md). # Importer Importerは主にCSVやJSONファイルのインポート用のコンポーネントです。Dashcombが提供しているImporterは、通常のHTMLの `` をベースにして、管理画面の用途に合わせています。ImporterとDashcombが提供しているTableやButtonとセットで使うことも可能です。 Importer内容の表示は `{{importerオブジェクト名.value}}` にて取得が可能です。IDE画面では取得した値をTableコンポーネントのソースデータに `{{importerオブジェクト名.value}}` を入力し、Tableのラベル文字に `{{importerオブジェクト名.value.length}}` を入力しておくことで、インポートの内容や件数はリアルタイムでTableエリアに表示されます。 Importer コンポーネントから受け取ったデータを解析し、SQLデータベースなどのバックエンドデータソースに書き込むことができます。 ButtonコンポーネントのonClickアクションから、事前に設定したオートメーションクエリを実行することができます。また、データ件数や内容のバリデーションを行うこともできます。 詳細なアクションの使い方は[アクションエディタ](https://github.com/dashcomb/gitbook-doc/blob/master/ide/ui-component/region/action-editor.md)にご参考ください。 詳細なオートメーションの使い方は[オートメーション作成](https://github.com/dashcomb/gitbook-doc/blob/master/ide/ui-component/tips-and-tricks/upload-and-download-csv.md)にご参考ください。 ## プロパティ Importerコンポーネントには、以下のプロパティが含まれています。
### 共通 **オブジェクト** Importerオブジェクトの変数名です。Importerコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に `importer1`、`importer2`... と名付けられます。 ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。 （例）`{{importer1.value}}` で `importer1` の値の配列を取得することができます。 利用できるオブジェクトとプロパティは、[インスペクターメニュー](/dashcomb-help-center/ide/region/inspector-region.md) で確認できます。 #### 非表示 トグルスイッチをONにすると、Impoerterコンポーネントが非表示になります。 #### 無効 トグルスイッチをONにすると、Importerコンポーネントが無効になり、入力できなくなります。 ### データ **ラベル文字** Importerのラベルテキストです。Importerコンポーネントをドラッグ＆ドロップすると、自動的に `Importer` に設定されます。 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。 {% hint style="info" %} `{{}}` 構文については、[オブジェクトやデータの参照](/dashcomb-help-center/ide/obujekutoyadtano.md) のページを参照してください。 {% endhint %} #### 提示語 Importer コンポーネントのドラッグ＆ドロップ領域に表示されるテキストです。 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。 **フォーマット** インポートファイルのフォーマットです。CSV、JSONの指定ができます。 CSVを指定の場合、CSVファイルのみ解析することができます。 JSONを指定の場合、JSON配列のファイルしか解析できません。 ```json [ { "key": "key1", "value": "value1"}, { "key": "key2", "value": "value2"}, { "key": "key3", "value": "value3"} ] ``` このようなJSONは解析可能です。 ただし、下記のようなJSONは解析できません。 ```json { "key": "key1", "value": "value1" } ``` **先頭行を見出し行にする** **フォーマット**の設定をCSVに指定した場合のみ、設定が可能です。 トグルスイッチをOFFにすると、ファイルの先頭行を見出し行として扱われず、データ行としてインポートします。 **最大データ数** インポートファイルの最大行数です。初期値は10000行に設定されています。 ### アクション Importer コンポーネントのアクションは、以下を設定することができます。 #### **onChange** インポーターのonChange イベントの発生時（Importerの入力内容が変更された時）に、指定アクションを実行できます。 ### 外観 **高さ** Importer コンポーネントの高さを指定します。初期設定では2行に設定されており、最小設定は1行です。 #### **ラベル表示** インポーターのラベルテキストの表示・非表示を切り替えます。 トグルスイッチをOFFにすると、インポーターにラベルが表示されなくなりますが、インポーター本体に影響はありません。 以下の項目で表示を調整できます。
項目名設定内容
ラベル整列ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。
ラベル位置ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。
ラベル横幅ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/importer.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.