ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

フラグメントを使用してマルチステップフォームを構築する

Liferay DXP 2024.Q4+/ポータル GA129+

フラグメントを使用して 1 ステップのフォームを作成したり、ステッパーフラグメントを使用して、またはフォームのフォームタイプ構成を変更して、マルチステップフォームを作成したりできます。

フォームフラグメントの追加

重要

フォームフラグメントはカスタムオブジェクトでのみ使用できます。 Liferay では、公開されたオブジェクトが少なくとも 1 つ存在するまで、フォームコンポーネントフラグメントセットが非表示になります。公開されると、オブジェクトへのアクセス権を持つユーザーは、フォームコンポーネントフラグメントを表示および使用できるようになります。詳細については、オブジェクトの作成を参照してください。

ページを編集中に、フラグメントとウィジェットサイドバーで フォームフラグメント を見つけます。
編集領域にドラッグアンドドロップします。

Stepper フラグメントは、単一ステップのフォームを複数ステップのフォームに変換し、ステップ間のナビゲーションをより簡単かつ明確にします。設定が完了すると、ステップのタイトルの名前を変更したり、フィールドにマップしたり、ステップインジケーターをクリックしてステップ間を移動したり、各ステップにフォーム要素を追加したり、ステップの外観を設定したりできるようになります。ページエディターを使用して、フォームコンテナーフラグメントにステッパーフラグメントを追加できます。

フラグメントとウィジェットサイドバーで、 ステッパー フラグメントを見つけます。
フォームコンテナーの上部または下部にドラッグアンドドロップします。

確認メッセージが表示されます。確認すると、Stepper フラグメントがページに追加され、ステップにフォームフィールドを追加する作業を開始できます。

Stepper フラグメントを使用して、単純なフォームを複数ステップのフォームに変換します。

フォームタイプの構成の変更

あるいは、Stepper フラグメントを使用する代わりに、フォームのフォームタイプ構成を Multistep に変更することもできます。

注

この場合、Stepper フラグメントは自動的に追加されません。フォームステップ間の視覚化とナビゲーションを容易にするために、手動で追加することができます。

フォームコンテナー を選択し、右側のパネルの一般タブに移動します。
フォームの種類で、 マルチステップを選択します。

これにより、フォームステップと 2 つのステップフラグメントがコンテナーに追加されます。

ステッパーフラグメントを使用しない場合は、[全般] タブの [編集モードですべてのステップを表示] オプションを有効にして、各ステップのドラッグアンドドロップゾーンを表示します。

各ステップのドラッグアンドドロップゾーンを表示するには、「編集モードですべてのステップを表示」オプションを有効にします。

設定が完了したら、ステップにフォームフィールドを追加できます。

ステップにフォームフィールドを追加する

フォームの各ステップでは、フォームとして機能するフォームフィールドが必要です。

Stepper フラグメント (1) を使用している場合は、ステップインジケーターを選択して、そのステップのドラッグアンドドロップゾーンに移動します。そこから、フォームフラグメントを追加し、そのステップのフォームを構築します。

ステッパーフラグメント (2) を使用していない場合は、ステップのドラッグアンドドロップゾーンにフォームフラグメントを追加します。

ステップにフォームフラグメントを追加します。

次に、フォームフラグメントを選択し、右側のパネルの [一般] タブに移動して、フォームフラグメントをオブジェクトフィールドにマップします。「フィールド」の下で、フラグメントにマップするオブジェクトフィールドを選択します。

フォームフラグメントをオブジェクトフィールドにマップします。

複数ステップのフォームの場合、ボタンはフォーム内の位置に基づいて構成する必要があります。

既存の フォームボタン を選択するか、ステップのドラッグアンドドロップゾーンにボタンを追加します。
右側のパネルの一般タブに移動します。手順に応じてボタン とタイプ を変更します。
- 最初のステップには「次へ」ボタンが必要です。
- 最初のステップと最後のステップの間には、[次へ] ボタンと [前へ] ボタンの両方が必要です。
- 最後のステップには、[前へ] ボタンと [送信] ボタンの両方が必要です。

マルチステップフォームの設定

マルチステップフォームを設定し、それにフィールドを追加した後、いくつかのオプションを設定してさらにカスタマイズできます。

ステップ数を設定するには、

フォームコンテナー フラグメントを選択し、右側のパネルの一般タブに移動します。
「ステップ数」の下で値を調整してステップを追加/削除します。

フィールドの横にある上/下矢印を使用して、ステップ数を増減することもできます。

ステップインジケーターとタイトルは、Stepper フラグメントに自動的に追加されます。編集モードですべてのステップを表示するが有効になっている場合、新しいステップのドラッグアンドドロップゾーンがエディターに表示されます。