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

liferay 7.4 U45+/GA45+.

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

フォームの断片を作る

サイトメニュー()を開き、 デザイン → フラグメント に移動します。
プラス()をクリックして、フォームのフラグメントを整理するためのフラグメントセットを作成します。
Add() をクリックし、 Form Fragment タイプを選択し、 Next をクリックします。
名前を入力します。
フラグメントで許可するフィールドタイプを選択します。

CAPTCHAを選択した場合、他のフィールドタイプを選択することはできません。それ以外の場合は、どのフィールドの組み合わせでも選択できる。
追加をクリックする。これにより、ドラフトフラグメントが作成され、フラグメントの編集ページに移動します。
コードタブで、フラグメントのHTML、CSS、JavaScriptを追加します。

note

サブミットボタンのテキストは、マッピング設定を使ってマッピングできます。

リダイレクトのためにリンク設定を持つボタンを作成するには、type="button" をボタンの断片に追加します。
(オプション）Configuration タブで、JSON を使用してフラグメントを構成し、オプションを追加します。さまざまなフラグメント・コンフィギュレーション・タイプの詳細については、フラグメント設定タイプのリファレンス。
［公開］をクリックします。

次に、フォーム・フラグメントを使ってコンテンツ・ページにフォームを作成します。詳しくはフラグメントでフォームを構築するを参照してください。

フラグメントツールキットを使用する場合は、yarn run add-fragmentを実行する際にフラグメントの種類を選択することができる。

Select the fragment type when using the Fragments Toolkit.

サポートするフィールドタイプを指定するには、fragment.json の typeOptions に fieldTypes プロパティを追加する。フィールド・タイプを配列として入力する：

{
   "fragmentEntryKey": "numeric-input",
   "icon": "number",
   "type": "input",
   "typeOptions": {
      "fieldTypes": [
         "number",
         "text"
      ]
   }
}

その後は、基本的なフラグメントを作成するときと同じプロセスを踏む。基本的なフラグメントの作成とデプロイについては、 Using Fragments Toolkit を参照してください。

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

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

フォーム・フラグメントで `input` 変数を使う

フォームフラグメントには input 変数が含まれており、各フラグメントの JavaScript と FreeMarker のコードで使用します。この変数には、フラグメントを設定するためのプロパティが格納される。

入力変数のプロパティのリファレンス

プロパティ	種類	説明
`fieldTypes`	`string`	入力にマッピングされたフィールドタイプ。
`name`	`string`	入力の名前フラグメントを作成するには、ユーザーはこのプロパティを定義しなければならない。
`required`	`boolean`	入力が必要かどうか。
`value`	`string`	フィールドの値。
`label`	`string`	入力のラベル
`showLabel`	`boolean`	ラベルの視認性。
`errorMessage`	`string`	フォーム送信エラー。
`helpText`	`string`	フォームフィールドのUIヘルプメッセージ。未定義の場合、このプロパティは空である。
`showHelpText`	`boolean`	ヘルプテキストの表示。
`attributes`	`object`	特定の入力タイプのためにフラグメントに追加されるオプション。

入力 `file` の属性

プロパティ	種類	説明
`allowedFileExtensions`	`string`	許可されるファイル拡張子。 Show Supported File Info（サポートされているファイル情報を表示）を有効にすると、フィールドのヘルプテキストに許可されている拡張子が表示されます。
`maxFileSize`	`number`	最大アップロードサイズ（メガバイト）。 Show Supported File Info（サポートされているファイル情報を表示する）を有効にすると、フィールドのヘルプテキストに最大許容サイズが表示されます。
`selectFromDocumentLibrary`	`boolean`	ユーザーがドキュメントライブラリからファイルを選択できるかどうか。これはオブジェクトの添付フィールドで設定される。
`selectFromDocumentLibraryURL`	`string` or `undefined`	`selectFromDocumentLibrary`が true の場合、このプロパティには対応する`ItemSelector` をレンダリングするための URL が格納される。

入力 `number` の属性

プロパティ	種類	説明
`dataType`	`integer` or `decimal`	整数か10進数を選ぶ。
`max`	`number` or `undefined`	最大許容数。
`min`	`number` or `undefined`	最少催行人数。
`step`	`string` or `undefined`	HTML入力の "step "属性で使用できる文字列値で、許容される最大精度を示す。

入力 `number` の属性

プロパティ	種類	説明
`relationshipLabelFieldName`	`string`	ラベルとして使用される関連オブジェクトのフィールド名。
`relationshipValueFieldName`	`string`	値として使用される関連オブジェクトのフィールド名。
`relationshipURL`	`string`	APIからオプションを取得するためのURL。 APIレスポンスはページネーションを含むLiferayのヘッドレスリストフォーマットを使用します。追加のパラメータを渡して、レスポンスを問い合わせる。

入力 `select` の属性

プロパティ	種類	説明
`options`	`Array<{label: string, value: string}>`	利用可能なオプションのリスト。