IMPORTANT: As we revamp and transition our documentation to this site, you may find the articles you need on Liferay's Help Center.

Analytics Cloud Commerce DXP / Portal Liferay Cloud Reference

Documentation Menu

Highlighting

Remove Highlighting

Go Back

• はじめに
• サイトの構築
• コンテンツの作成と管理
• プロセスの自動化
• 検索の利用
• コラボレーションとソーシャルメディア
• ユーザーと権限
• システム管理
• Building Applications
• Liferayの内部
• ヘッドレスデリバリー
• インストールとアップグレード

Japanese

• Japanese
• English

• Liferay Learn
• DXP
• フォームフラグメントの作成

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

利用可能な Liferay 7.4 U45+/GA45+

Form Components の断片 は、コンテンツページでオブジェクトのフォームを構築するためのものです。 もしLiferayのフォームフラグメントがあなたのユースケースを満たさない場合、フォームに望ましいデザインと機能を実現するために自分で作成しましょう。

フォームフラグメントを作成するため。

1. サイトメニュー ( ) を開き、 デザインを展開し、 フラグメントへと進んでください。

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

3. 追加 () をクリックし、 Form Fragment タイプを選択し、 Nextをクリックします。

   

4. 名前を入力します。

5. フラグメントで許可するフィールドの種類を選択します。

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

   

6. *［追加］*をクリックします。 これにより、フラグメントのドラフトが作成され、フラグメントの編集ページに移動します。

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

   ![コード] タブで、フラグメントの HTML、CSS、JavaScript を追加します。](./creating-form-fragments/images/03.png)

8. (オプション) Configuration タブで、JSON を使用してフラグメントを構成し、それにオプションを追加します。

   

9. *［公開］*をクリックします。

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

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 という変数が含まれています。 この変数には、フラグメントを設定するためのプロパティが格納される。

入力変数のプロパティ参照

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

ファイル の属性 入力

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

番号の属性 入力

プロパティ	タイプ	説明
dataType	integer or decimal	整数と10進数のどちらを許可するか。
max	number or undefined	最大許容数。
min	number or undefined	最低限許可される数
step	string or undefined	HTML入力の "step "属性で使用可能な、最大許容精度を示す文字列値。

の関係 の属性 入力

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

Attributes for select Input

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

追加情報

• ページフラグメントの開発

• フラグメントを使ったフォームの構築

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center