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

編集ページの追加クイックスタートを使用して、オブジェクトの詳細を編集するためのページを作成します。

コンポーネント内のオブジェクトを選択すると、選択したオブジェクトのIDをページ変数に格納するコンポーネント・イベントがトリガーされます。編集ボタンをクリックすると、編集ページにナビゲートするアクション・チェーンがトリガーされ、変数に格納されているid値が入力パラメータとしてページに渡されます。編集ページがロードされると、ページ・イベントはエンドポイントにリクエストを送信してソースからデータを取得するアクション・チェーンをトリガーし、ページに渡された入力パラメータはリクエストで必要な入力パラメータにマップされます。レスポンスは、データを編集するためにページ内のコンポーネントにバインドされている変数にマップされます。

編集ページで保存ボタンをクリックすると、データ・ソースの更新エンドポイントにリクエストを送信するアクション・チェーンが開始されます。ページのフィールド内のデータは変数に格納され、Updateエンドポイントに送信されるリクエストのパラメータにマップされます。

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

クイックスタートは、コレクションを含むページで次のことを行います:

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

クイックスタートは、編集ページで次のことを行います。

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

アクション・チェーンは、データ・ソースの更新エンドポイントにリクエストを送信します。アクション・チェーンには、リクエストが成功した場合にメッセージを表示するアクション、またはリクエストが失敗した場合に警告を表示するアクションが含まれます:

図quickstart-edit-action-update.pngの説明

ページ変数に格納されたデータは、リクエストとしてエンドポイントに送信されるパラメータにマップされます。

「図quickstart-edit-action-mapvariables.pngの説明」

ページの編集の追加クイック・スタートを使用

表またはリスト・コンポーネントを含むページがある場合は、編集ページの追加クイックスタートを使用して、表またはリスト内のオブジェクトを選択すると有効になるページに編集ボタンを追加できます。編集ボタンをクリックすると、選択したオブジェクトを編集するためのフィールドを含むフォームを表示するページが開きます。

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

編集ページを作成するには、次のステップを実行します:

キャンバス上で表またはリストを選択します。
プロパティ・ペインで「クイックスタート」タブを開きます(まだ開いていない場合)。
「編集ページを追加」をクリックします。
「読取りエンドポイントの選択」ステップに移動した場合は、GETエンドポイントを含むデータ・ソースを選択して、編集するデータを取得します。「次へ」をクリックします。
「エンドポイントの更新の選択」ステップが表示された場合は、UPDATEエンドポイントを含むデータ・ソースを選択して、選択したレコードを更新するリクエストを送信します。
「ページの詳細」ステップで、エンドポイント構造から「編集」ページに含めるフィールドを選択します。 (左側の「エンドポイント構造」から中央の「フィールド」ペインにフィールドをドラッグすることもできます)。「編集」ページでは、これらのフィールドがフォームに含まれます。

ヒント:
「JETコア・パック・コンポーネントの有効化」の場合、oj-cバリアントをフィールドのページ・コンポーネントとして使用できます。フィールドの推奨コンポーネントをクリックし、バッジで示されるoj-cバリアントを選択するだけです:

図ojc-quickstart.pngの説明
編集ページを開くボタンの名前と、新しいページのタイトルおよび名前を指定します。「終了」をクリックします。

このページには、コレクション内で選択されたオブジェクトのデータを編集するためのフォームを含むページに移動する新しいボタンが追加されました。