フォームフラグメントの作成
Liferay 7.4 U45+/GA45+
フォームコンポーネントフラグメント は、コンテンツページでオブジェクトのフォームを構築するためのものです。 Liferayのフォームフラグメントがあなたのユースケースを満たさない場合は、独自のフォームフラグメントを作成して、フォームに必要なデザインと機能を実現してください。
フォームフラグメントを作成するには、
-
サイトメニュー (
) を開き、 デザイン → フラグメント に移動します。 -
と (
) をクリックして、フォームフラグメントを整理するためのフラグメントセットを作成します。 -
追加 (
をクリックし、 フォームフラグメント タイプを選択して、 次へ をクリックします。
-
名前を入力します。
-
フラグメント内で許可するフィールドタイプを選択してください。
CAPTCHAを選択した場合、他のフィールドタイプを選択することはできません。 それ以外の場合は、任意のフィールドの組み合わせを選択できます。

-
[追加]をクリックします。 これにより下書きフラグメントが作成され、フラグメント編集ページが表示されます。
-
「コード」タブで、フラグメントのHTML、CSS、JavaScriptを追加します。

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

-
[Publish(公開)]をクリックします。
これで、作成したフォームフラグメントを使用して、コンテンツページにフォームを作成できるようになります。 詳細については、 フラグメントを使用してフォームを構築する を参照してください。
サポートされているフィールドタイプのリファレンス
| 項目タイプ | 説明 |
|---|---|
boolean | ブールフィールド。 |
captcha | ユーザーは、投稿前に自分が人間であることを証明する必要があります。 |
date | 日付フィールド。 |
file | ファイル添付機能を追加しました。 |
html | リッチテキストを追加するためのCKEditorを追加します。 |
multiselect | チェックボックスのリストから選択してください。 |
number | 数値フィールド。 |
relationship | オブジェクト間の関係を定義する。 |
select | ドロップダウンリストからオプションを選択してください。 |
text | テキストフィールドのサポートを追加しました。 |
フォームフラグメントで入力変数 を使用する
フォームフラグメントには、各フラグメントの JavaScript および FreeMarker コードで使用するための入力変数 が含まれています。 この変数には、フラグメントを設定するためのプロパティが含まれています。
入力変数プロパティ参照
| プロパティ | 種類 | 説明 |
|---|---|---|
fieldTypes | string | 入力にマッピングされたフィールドタイプ。 |
name | string | 入力者の名前。 フラグメントを作成するには、ユーザーはこのプロパティを定義する必要があります。 |
required | boolean | 入力が必要かどうか。 |
value | string | フィールドの値。 |
label | string | 入力のラベル。 |
showLabel | boolean | ラベルの視認性。 |
errorMessage | string | フォーム送信エラー。 |
helpText | string | フォームフィールドに関するUIヘルプメッセージ。 未定義の場合、このプロパティは空です。 |
showHelpText | boolean | ヘルプテキストの表示設定。 |
attributes | object | 特定の入力タイプに対応するオプションがフラグメントに追加されました。 |
ファイル 入力の属性
| プロパティ | 種類 | 説明 |
|---|---|---|
allowedFileExtensions | string | 許可されているファイル拡張子。 「サポートされているファイル情報を表示」が有効になっている場合、許可されている拡張子がフィールドのヘルプテキストに表示されます。 |
maxFileSize | number | 最大アップロードサイズ(メガバイト単位)。 「サポートされているファイル情報を表示」が有効になっている場合、フィールドのヘルプテキストに最大許容サイズが表示されます。 |
selectFromDocumentLibrary | boolean | ユーザーがドキュメントライブラリからファイルを選択できるかどうか。 これはオブジェクトの 添付ファイルフィールド で設定されます。 |
selectFromDocumentLibraryURL | 文字列 または 未定義 | selectFromDocumentLibrary が true の場合、このプロパティには対応する ItemSelector をレンダリングするための URL が含まれます。 |
数値 入力の属性
| プロパティ | 種類 | 説明 |
|---|---|---|
dataType | 整数 または 小数 | 整数または小数を選択してください。 |
max | 数値 または 未定義 | 最大許容数。 |
min | 数値 または 未定義 | 最低必要人数。 |
step | 文字列 または 未定義 | HTML入力要素の「step」属性で使用できる文字列値で、許容される最大精度を示すために使用されます。 |
関係 の属性 入力
| プロパティ | 種類 | 説明 |
|---|---|---|
relationshipLabelFieldName | string | ラベルとして使用される関連オブジェクトのフィールド名。 |
relationshipValueFieldName | string | 値として使用される関連オブジェクトのフィールド名。 |
relationshipURL | string | APIからオプションを取得するために使用されるURL。 APIレスポンスは、ページネーションを含むLiferayのヘッドレスリスト形式を使用します。 レスポンスを照会するために、追加のパラメータを渡してください。 |
の属性 入力
| プロパティ | 種類 | 説明 |
|---|---|---|
options | Array<{label: string, value: string}> | 利用可能なオプションの一覧。 |