クイックスタート

今回は以下の機能を実現する社内向け管理画面を構築して、Querierの基本的な使い方を紹介します。

データを連携する

今回はすでに接続されている [Onbording RestAPI] を使用するため、接続の設定などは必要ありません。

ご自身のデータソースを接続する場合は、こちらをご覧ください。

右側の [コンポーネント] から [カラム] をキャンバスにドラッグ＆ドロップします。
[カラム] の左側にすでにある [テーブル] を配置し、右側に [セレクト] と [インプット] と [テキストエリア] と [ボタン] を設置します。
[セレクト] と [インプット] と [テキストエリア] と [ボタン] のそれぞれの [エディター] から [ラベル] にそれぞれ、テンプレートを選択 、 タイトル 、 通知内容 、 送信する と入力します。
[データフローリスト] の [新規作成] をクリックします。
データフローの名前を listTemplates という名前に変更します。
[Onboarding RestAPI] を選択します。
[Path] に /v1/templates と入力します。
[実行する] をクリックします。
[セレクト] の [エディター] をご開き、[Values] と [Labels] にそれぞれ {{ listTemplates.data.templates.map(d => d.id) }} 、 {{ listTemplates.data.templates.map(d => d.name) }}　と入力します。
[Default value] には {{ listTemplates.data.templates[0].id }}　と入力します。

[データフローリスト] の [新規作成] をクリックします。
データフローの名前を getTemplate という名前に変更します。
[Onboarding RestAPI] を選択します。
[Path] に /v1/templates/{{ select1.value ? select1.value : 1}} と入力します。
[実行する] をクリックします。
[input1] をクリックし、 [エディター] の中の [Default value] に {{ getTemplate.data.title }} と入力します。
[textarea1] をクリックし、 [エディター] の中の [Default value] に {{ getTemplate.data.body }} と入力します。
[getTemplate]　の [変更が発生したら自動でクエリを実行] にチェックをつけます。

{
  "title":  {{ input1.value }},
  "body":   {{ textarea1.value }},
  "userId": {{ table1.selectedRow.data.id }}
}