クイック・スタートを使用した詳細ページの追加

詳細ページの追加クイックスタートを使用して、テーブルまたはリストで選択されたオブジェクトの詳細を表示するページを作成します。

クイック・スタートを使用して詳細ページを追加した後、詳細ボタンをクリックすると、選択したオブジェクトの詳細を表示するページが開きます。コンポーネント内のオブジェクトを選択すると、選択したオブジェクトのIDをページ変数に格納するコンポーネント・イベントがトリガーされます。詳細ボタンをクリックすると、詳細ページにナビゲートするアクション・チェーンがトリガーされ、変数に格納されたId値が入力パラメータとしてページに渡されます。

詳細ページがロードされると、ページ・イベントはエンドポイントにリクエストを送信するアクション・チェーンをトリガーしてデータを取得し、ページに渡される入力パラメータはリクエストで必要な入力パラメータにマップされます。エンドポイントの呼び出しによるレスポンスは、データを表示するページ内のコンポーネントにバインドされている変数にマップされます。

Quick Startは、フィールドを含むフォームで詳細ページを作成するだけでなく、データおよびアクション・チェーンがページに移動してエンドポイントを呼び出すためのさまざまな変数を作成します。

クイック・スタートは、コレクションが含まれるページで次の処理を行います。

ページにボタンを追加します。 ojActionイベントを追加して、アクション・チェーンをトリガーします。
アクション・チェーンをトリガーするselectイベントをコレクション・コンポーネントに追加します。
選択したオブジェクトのIDを格納する変数を作成します。
選択したオブジェクトのIDを変数に保存するアクション・チェーンを作成します。
詳細ページにナビゲートするアクション・チェーンを作成します。アクション・チェーンはオブジェクトIDを入力パラメータとして渡します。

クイック・スタートは、詳細ページで次の操作を行います。

変数にバインドされたフィールドを含むフォームを追加します。
戻るボタンを追加します。 ojActionイベントを追加して、アクション・チェーンをトリガーします。
戻るボタン上のイベントによってトリガーされた前のページに戻るアクション・チェーンを作成します。
オブジェクトIDを入力パラメータとして格納するページ変数を作成します。
エンドポイントからのレスポンスを格納するページ変数を作成します。クイックスタートでは、変数の構造を定義する新しいタイプも作成されます。
ページのロード時にエンドポイントをコールし、ページ変数にレスポンスを割り当てるアクション・チェーンを作成します。アクション・チェーンにはページ変数にマップされた入力パラメータがあります。

詳細ページの追加クイック・スタートの使用

表またはリストのコンポーネントを含むページがある場合は、詳細ページの追加クイック・スタートを使用して、レコードの詳細ページを作成し、詳細ボタンを追加して新しいページを開くことができます。このボタンは、表またはリストでオブジェクトを選択すると使用可能になります。

テーブルまたはリスト・コンポーネントを使用してコレクションを表示するページから、詳細の追加ページのクイックスタートを開くことができます。詳細ボタンを追加する場合は、GETメソッド(Get One)でエンドポイントを使用してデータを表示します。データ・ソースがビジネス・オブジェクトであるか、予期されるエンドポイント(GET, POST, PATCH、DELETEなど)を持つサービスである場合、Visual Builderは自動的に正しいエンドポイントを選択します。「詳細」ページに表示するフィールドのみを選択する必要があります。

ディテール・ページを作成するには:

キャンバス上で表またはリストを選択します。
プロパティ・ペインで「クイックスタート」タブを開きます(まだ開いていない場合)。
「詳細ページを追加」をクリックします。
エンドポイントの選択ステップに進んだ場合は、「Get One」エンドポイントを含むデータ・ソースを選択して、詳細ページに表示するデータを取得します。「次へ」をクリックします。
「ページの詳細」ステップで、エンドポイント構造から「詳細」ページに含めるフィールドを選択します。 (左側の「Endpoint Structure」から目的のフィールドを中央の「Fields」ペインにドラッグすることもできます)。「詳細」ページでは、これらのフィールドがフォームに含まれます。
詳細ページを開くボタンの名前と、新しいページのタイトルおよび名前を指定します。「終了」をクリックします。

ページには、選択したオブジェクトの詳細を表示するページに移動する新しいボタンが追加されました。