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アクションから、事前に設定したオートメーションクエリを実行することができます。また、データ件数や内容のバリデーションを行うこともできます。

詳細なアクションの使い方はアクションエディタにご参考ください。

詳細なオートメーションの使い方はオートメーション作成にご参考ください。

プロパティ

Importerコンポーネントには、以下のプロパティが含まれています。

共通

オブジェクト

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

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

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

利用できるオブジェクトとプロパティは、インスペクターメニュー で確認できます。

非表示

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

無効

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

データ

ラベル文字

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

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

{{}} 構文については、オブジェクトやデータの参照 のページを参照してください。

提示語

Importer コンポーネントのドラッグ＆ドロップ領域に表示されるテキストです。

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

フォーマット

インポートファイルのフォーマットです。CSV、JSONの指定ができます。

CSVを指定の場合、CSVファイルのみ解析することができます。

JSONを指定の場合、JSON配列のファイルしか解析できません。

[
  { "key": "key1", "value": "value1"},
  { "key": "key2", "value": "value2"},
  { "key": "key3", "value": "value3"}
]

このようなJSONは解析可能です。

ただし、下記のようなJSONは解析できません。

{ "key": "key1", "value": "value1" } 

先頭行を見出し行にする

フォーマットの設定をCSVに指定した場合のみ、設定が可能です。

トグルスイッチをOFFにすると、ファイルの先頭行を見出し行として扱われず、データ行としてインポートします。

最大データ数

インポートファイルの最大行数です。初期値は10000行に設定されています。

アクション

Importer コンポーネントのアクションは、以下を設定することができます。

onChange

インポーターのonChange イベントの発生時（Importerの入力内容が変更された時）に、指定アクションを実行できます。

外観

高さ

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

ラベル表示

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

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

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

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