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

フォームフラグメントの作成

Liferay 7.4 U45+/GA45+

フォームコンポーネントフラグメント は、コンテンツページでオブジェクトのフォームを構築するためのものです。 Liferayのフォームフラグメントがあなたのユースケースを満たさない場合は、独自のフォームフラグメントを作成して、フォームに必要なデザインと機能を実現してください。

フォームフラグメントを作成するには、

  1. サイトメニュー (Site Menu) を開き、 デザインフラグメント に移動します。

  2. (Plus Button) をクリックして、フォームフラグメントを整理するためのフラグメントセットを作成します。

  3. 追加 (Add Buttonをクリックし、 フォームフラグメント タイプを選択して、 次へ をクリックします。

    フォームフラグメントの種類を選択し、「次へ」をクリックします。

  4. 名前を入力します。

  5. フラグメント内で許可するフィールドタイプを選択してください。

    CAPTCHAを選択した場合、他のフィールドタイプを選択することはできません。 それ以外の場合は、任意のフィールドの組み合わせを選択できます。

    フラグメントがサポートするフィールドタイプを選択してください。

  6. [追加]をクリックします。 これにより下書きフラグメントが作成され、フラグメント編集ページが表示されます。

  7. 「コード」タブで、フラグメントのHTML、CSS、JavaScriptを追加します。

    「コード」タブで、フラグメントのHTML、CSS、JavaScriptを追加します。

    マッピング設定 を使用して、送信ボタンフラグメントのテキストをマッピングできます。

    リダイレクト用のリンク設定を持つボタンを作成するには、ボタンの断片にtype="button"

  8. (オプション)[構成]タブで、JSONを使用してフラグメントを構成し、オプションを追加します。 さまざまなフラグメント構成タイプの詳細については、 フラグメント構成タイプのリファレンス を参照してください。

    設定タブで、JSONを使用してフラグメントを設定し、オプションを追加します。

  9. [Publish(公開)]をクリックします。

これで、作成したフォームフラグメントを使用して、コンテンツページにフォームを作成できるようになります。 詳細については、 フラグメントを使用してフォームを構築する を参照してください。

サポートされているフィールドタイプのリファレンス

項目タイプ説明
booleanブールフィールド。
captchaユーザーは、投稿前に自分が人間であることを証明する必要があります。
date日付フィールド。
fileファイル添付機能を追加しました。
htmlリッチテキストを追加するためのCKEditorを追加します。
multiselectチェックボックスのリストから選択してください。
number数値フィールド。
relationshipオブジェクト間の関係を定義する。
selectドロップダウンリストからオプションを選択してください。
textテキストフィールドのサポートを追加しました。

フォームフラグメントで入力変数 を使用する

フォームフラグメントには、各フラグメントの JavaScript および FreeMarker コードで使用するための入力変数 が含まれています。 この変数には、フラグメントを設定するためのプロパティが含まれています。

入力変数プロパティ参照

プロパティ種類説明
fieldTypesstring入力にマッピングされたフィールドタイプ。
namestring入力者の名前。 フラグメントを作成するには、ユーザーはこのプロパティを定義する必要があります。
requiredboolean入力が必要かどうか。
valuestringフィールドの値。
labelstring入力のラベル。
showLabelbooleanラベルの視認性。
errorMessagestringフォーム送信エラー。
helpTextstringフォームフィールドに関するUIヘルプメッセージ。 未定義の場合、このプロパティは空です。
showHelpTextbooleanヘルプテキストの表示設定。
attributesobject特定の入力タイプに対応するオプションがフラグメントに追加されました。

ファイル 入力の属性

プロパティ種類説明
allowedFileExtensionsstring許可されているファイル拡張子。 「サポートされているファイル情報を表示」が有効になっている場合、許可されている拡張子がフィールドのヘルプテキストに表示されます。
maxFileSizenumber最大アップロードサイズ(メガバイト単位)。 「サポートされているファイル情報を表示」が有効になっている場合、フィールドのヘルプテキストに最大許容サイズが表示されます。
selectFromDocumentLibrarybooleanユーザーがドキュメントライブラリからファイルを選択できるかどうか。 これはオブジェクトの 添付ファイルフィールド で設定されます。
selectFromDocumentLibraryURL文字列 または 未定義selectFromDocumentLibrary が true の場合、このプロパティには対応する ItemSelector をレンダリングするための URL が含まれます。

数値 入力の属性

プロパティ種類説明
dataType整数 または 小数整数または小数を選択してください。
max数値 または 未定義最大許容数。
min数値 または 未定義最低必要人数。
step文字列 または 未定義HTML入力要素の「step」属性で使用できる文字列値で、許容される最大精度を示すために使用されます。

関係 の属性 入力

プロパティ種類説明
relationshipLabelFieldNamestringラベルとして使用される関連オブジェクトのフィールド名。
relationshipValueFieldNamestring値として使用される関連オブジェクトのフィールド名。
relationshipURLstringAPIからオプションを取得するために使用されるURL。 APIレスポンスは、ページネーションを含むLiferayのヘッドレスリスト形式を使用します。 レスポンスを照会するために、追加のパラメータを渡してください。

の属性 入力

プロパティ種類説明
optionsArray<{label: string, value: string}>利用可能なオプションの一覧。