フォームフラグメントの作成¶
利用可能な Liferay 7.4 U45+/GA45+
Form Components の断片 は、コンテンツページでオブジェクトのフォームを構築するためのものです。 もしLiferayのフォームフラグメントがあなたのユースケースを満たさない場合、フォームに望ましいデザインと機能を実現するために自分で作成しましょう。
フォームフラグメントを作成するため。
サイトメニュー (
) を開き、 デザインを展開し、 フラグメントへと進んでください。
Plus (
) をクリックすると、フォームフラグメントを整理するためのフラグメ ントセットが作成されます。
追加 (
) をクリックし、 Form Fragment タイプを選択し、 Nextをクリックします。
名前を入力します。
フラグメントで許可するフィールドの種類を選択します。
CAPTCHAを選択した場合、他のフィールドタイプは選択できません。 それ以外の場合は、任意のフィールドの組み合わせを選択することができます。
*[追加]*をクリックします。 これにより、フラグメントのドラフトが作成され、フラグメントの編集ページに移動します。
コード] タブで、フラグメントの HTML、CSS、JavaScript を追加します。
![コード] タブで、フラグメントの HTML、CSS、JavaScript を追加します。](./creating-form-fragments/images/03.png)
(オプション) Configuration タブで、JSON を使用してフラグメントを構成し、それにオプションを追加します。
*[公開]*をクリックします。
次に、フォームフラグメントを使用して、コンテンツページにフォームを作成します。 詳しくは、 フラグメントを使ってフォームを構築する をご覧ください。
Fragments Toolkit を使用する場合、 yarn run add-fragment
を実行する際にフラグメントの種類を選択することができます。
サポートするフィールドタイプを指定するには、 fragment.json
の typeOptions
に fieldTypes
プロパティを追加します。フィールドの種類を配列で入力します。
{
"cacheable": false,
"fragmentEntryKey": "numeric-input",
"icon": "number",
"type": "input",
"typeOptions": {
"fieldTypes": [
"number",
"text"
]
}
}
その後は、基本フラグメントを作成するときと同じ手順で行います。 基本的なフラグメントの作成と配置の詳細については、 フラグメントツールキットの使用 を参照してください。
input
Variable を Form Fragment で使用する。¶
フォームフラグメントには、各フラグメントのJavaScriptとFreeMarkerのコードで使用するために、 input
という変数が含まれています。 この変数には、フラグメントを設定するためのプロパティが格納される。
入力変数のプロパティ参照¶
プロパティ |
種類 |
説明 |
---|---|---|
|
|
入力にマッピングされたフィールドタイプ。 |
|
|
入力の名前 |
|
|
入力が必要であるかどうか。 |
|
|
フィールドの値です。 |
|
|
入力のラベルです。 |
|
|
ラベルがユーザーから見えるかどうか。 |
|
|
フォーム送信エラー。 |
|
|
フォームフィールドのUIヘルプメッセージ。 未定義の場合、このプロパティは空である。 |
|
|
ヘルプテキストをユーザーに表示するかどうか。 |
|
|
特定の入力タイプ用にフラグメントに追加されるオプション。 |
ファイル
の属性 入力¶
プロパティ |
タイプ |
説明 |
---|---|---|
|
|
許可されたファイル拡張子。 Show Supported File Info」を有効にすると、許可された拡張子がフィールドのヘルプテキストに表示されます。 |
|
|
最大アップロードサイズ(単位:メガバイト)。 サポートされているファイル情報を表示する」を有効にすると、フィールドのヘルプテキストに最大許容サイズが表示されます。 |
|
|
ユーザーがドキュメントライブラリからファイルを選択できるかどうか。 これは、オブジェクトの 添付ファイルフィールドに設定されています。 |
|
|
|
番号の属性
入力¶
プロパティ |
タイプ |
説明 |
---|---|---|
|
|
整数と10進数のどちらを許可するか。 |
|
|
最大許容数。 |
|
|
最低限許可される数 |
|
|
HTML入力の "step "属性で使用可能な、最大許容精度を示す文字列値。 |
の関係
の属性 入力¶
プロパティ |
種類 |
説明 |
---|---|---|
|
|
ラベルとして使用される関連オブジェクトのフィールド名。 |
|
|
値として使用される関連オブジェクトのフィールド名。 |
|
|
APIからオプションを取得するために使用するURL。 APIレスポンスはLiferayのヘッドレスリスト形式を使用し、ページネーションも含みます。 レスポンスを問い合わせるための追加パラメータを渡します。 |
Attributes for select
Input¶
プロパティ |
種類 |
説明 |
---|---|---|
|
|
利用可能なオプションの一覧です。 |