# Importer

Importerは主にCSVやJSONファイルのインポート用のコンポーネントです。Dashcombが提供しているImporterは、通常のHTMLの `<input type="file">` をベースにして、管理画面の用途に合わせています。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コンポーネントには、以下のプロパティが含まれています。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-52fd9551cc98f78c24a814f655d43c4d66d3aada%2FUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%9A%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%82%BF%E3%83%BC.png?alt=media" alt=""><figcaption></figcaption></figure>

### 共通 <a href="#common" id="common"></a>

**オブジェクト**

Importerオブジェクトの変数名です。Importerコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に `importer1`、`importer2`... と名付けられます。

ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。

（例）`{{importer1.value}}` で `importer1` の値の配列を取得することができます。

利用できるオブジェクトとプロパティは、[インスペクターメニュー](https://docs.dashcomb.com/dashcomb-help-center/ide/region/inspector-region) で確認できます。

#### 非表示

トグルスイッチをONにすると、Impoerterコンポーネントが非表示になります。

#### 無効

トグルスイッチをONにすると、Importerコンポーネントが無効になり、入力できなくなります。

### データ <a href="#data" id="data"></a>

**ラベル文字**

Importerのラベルテキストです。Importerコンポーネントをドラッグ＆ドロップすると、自動的に `Importer` に設定されます。

`{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](https://docs.dashcomb.com/dashcomb-help-center/ide/obujekutoyadtano) のページを参照してください。
{% 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の入力内容が変更された時）に、指定アクションを実行できます。

### 外観 <a href="#appearance" id="appearance"></a>

**高さ**

Importer コンポーネントの高さを指定します。初期設定では2行に設定されており、最小設定は1行です。

#### **ラベル表示**

インポーターのラベルテキストの表示・非表示を切り替えます。

トグルスイッチをOFFにすると、インポーターにラベルが表示されなくなりますが、インポーター本体に影響はありません。

以下の項目で表示を調整できます。

<table><thead><tr><th width="132">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>ラベル整列</td><td>ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。</td><td></td></tr><tr><td>ラベル位置</td><td>ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。</td><td></td></tr><tr><td>ラベル横幅</td><td>ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。</td><td></td></tr></tbody></table>