ビジュアルエディターとは

ビジュアルエディターは、画面上の直感的な操作によってビューを作成するためのツールです。ビジュアルエディターによって、アクションを実行するためのフォームや結果を表示するテーブルなどを直感的に配置でき、典型的な管理画面を素早く簡単に作成することが可能になります。

基本的な使い方

ここでは、「【サンプル】ユーザーの一覧取得」という自動で作成されたアクションを使ってユーザー一覧を表示する画面を作成することで、ビジュアルエディターの基本的な使い方を学びます。各種コンポーネントの詳しい使い方は後ほど「コンポーネント」をご覧いただくこととし、ここでは大まかな作成フローを説明いたします。

作成画面へ移動

まず、ビューの一覧・作成画面には画面右上の下記のアイコンをクリックすることで移動できます。

「ビューの一覧」画面から、「ビジュアルエディターで作成」ボタンをクリックすることで、ビューの作成画面へ移動します。

名前と識別子を設定する

ビューの「名前」と「識別子」を設定します。名前はビューの一覧画面上でのみ使われる値で、検索する際にも利用できます。識別子はビューのURLとして使われるほか、別のビューからリンクを貼るときにも活用できます（詳細は「テーブル - 列のカスタマイズ」をご覧ください）。

画面左上の編集アイコンをクリックすると、設定画面が開きます。ここでは、名前を「ユーザー一覧」、識別子を「user-list」とします。

コンポーネントの追加

ユーザーの一覧をテーブルで表示してみましょう。左側の「コンポーネント一覧」の「追加」ボタンをクリックするとコンポーネント選択画面が開くので、そこから「テーブル」を選択します。

すると、左側の「コンポーネント一覧」がテーブルの設定に切り替わるので、アクション設定からアクションを選択します。ここで選択したアクションはビューを表示したタイミングで実行され、アクションの結果がテーブルに表示されます。ここでは「【サンプル】ユーザーの一覧取得」を選択します。

アクションを選択できたら、「完了」ボタンをクリックしてください。そうすると、右側の「ここにプレビューが表示されます」と書かれていたエリアにテーブルが表示されます。画面右側はプレビューになっており、コンポーネントを追加したり設定を変更すると、変更内容が反映されます。

ビューを保存する

画面右上の「保存」ボタンをクリックするとビューの作成が完了し、自動でビューの一覧画面へ移動します。一覧画面から「ユーザー一覧」という名前のビューの行をクリックすると、作成したビューを閲覧できます。また、行の中の「編集」というリンクをクリックすると作成したビューの編集画面へ移動します。

高度な使い方

以上がビジュアルエディターの基本的な使い方となります。今回作成したのは非常にシンプルな画面ですが、ビジュアルエディターはより高度な機能を提供しています。

テーブルの列をカスタマイズしてアクションや別のビューへのリンクを表示
- ユーザー一覧から、特定のユーザーの詳細情報を表示する画面への移動などが実現可能です
フォームコンポーネントを設置して、そこから実行したアクションの結果をテーブルコンポーネントに表示する
- データ検索用のアクションを用意すれば、検索画面としてご利用になれます

ビューコンポーネント