コンポーネント

コンポーネントはビューの画面を構成する部品です。ビジュアルエディターでは、コードを書くことなく直感的な操作によってコンポーネントを配置してビューを作成できます。

コンポーネントにはいくつかの種類があります。

それぞれ用途や独自の機能を持っていますが、詳細はそれぞれのコンポーネントのページをご覧ください。このページでは、すべてのコンポーネントに共通する操作について説明します。

コンポーネントを追加する

画面左側にはコンポーネントの一覧が表示されています。コンポーネントの一覧の右下に「追加」ボタンがあるので、それをクリックするとコンポーネント選択画面が開きます。そこで追加したいコンポーネントの種類を選択すると、コンポーネントの一覧が設定画面に切り替わります。

「名前」はコンポーネント一覧に表示される名前で、ビューには表示されないものです。

「タイトル」はビューに表示されるコンポーネントの見出しです。

「補足事項」は、コンポーネントのタイトルの下に表示する補足説明です。入力時の注意点や、表示しているデータの意味などを利用者へ伝えるために使えます。「補足事項を表示する」をオンにすると、表示内容とそのスタイルを設定できます。

表示内容のスタイルは、次の3種類から選択できます。

表示内容には {{ }} で囲んでテンプレート変数を埋め込めます。クエリパラメーターやアクションの実行結果などの値を、表示内容に動的に表示できます。

利用できる変数は次のとおりです。

タブグループのコンポーネントはアクションを持たないため、results と success は利用できません。urlQueries と vars のみ利用できます。

たとえば、クエリパラメーターの user_id を表示内容に埋め込むには、次のように書きます。

ユーザーID: {{ urlQueries.user_id }}

ネストしたキーはドット記法でつなげて参照します。-（ハイフン）を含むキー名もそのまま指定できます。

ユーザー名: {{ urlQueries.user-name }}

配列の要素は、ブラケットにインデックスを指定して参照します。

1件目の結果: {{ results[0].success }}

テンプレート変数で参照できる値の考え方は「式」と同様です。あわせてご覧ください。

フォームのコンポーネントでは、「表示内容の種類」を次の2つから選択できます。

設定が完了したら、「完了」ボタンをクリックすると、右側のプレビューに変更が反映され、設定画面が「コンポーネント一覧」に切り替わります。ただし、設定内容に不備がある場合はエラーが表示され「コンポーネント一覧」には戻らないため、不備を修正したのち再度「完了」ボタンを押してください。

設定を完了せずに、右側のプレビューに変更を反映するためには「完了」ボタン左の「プレビューに反映」ボタンを押してください。ただし、完了ボタンと同様、設定に不備がある場合は反映されませんのでご注意ください。

また、コンポーネントの設定画面には以下のようなタブがあり、タブを切り替えるタイミングでもプレビューに反映されます。

「プレビューに反映」ボタン左の「削除」ボタンを押すと、コンポーネントを削除できます。

コンポーネント一覧画面からコンポーネント名をクリックすると、作成時のようにそのコンポーネントの設定画面に切り替わります。