oo

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

liferay 7.4 U45+/GA45+.

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

フォームの断片を作る

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

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

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

    Select the form fragment type and click Next.

  4. 名前を入力します。

  5. フラグメントで許可するフィールドタイプを選択します。

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

    Select the field types the fragment supports.

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

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

    In the Code tab, add HTML, CSS, and JavaScript for your fragment.

    note

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

    リダイレクトのために リンク設定 を持つボタンを作成するには、type="button" をボタンの断片に追加します。

  8. (オプション)Configuration タブで、JSON を使用してフラグメントを構成し、オプションを追加します。 さまざまなフラグメント・コンフィギュレーション・タイプの詳細については、 フラグメント設定タイプのリファレンス

    In the Configuration tab, use JSON to configure the fragment and add options to it

  9. 公開] をクリックします。

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

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

Select the fragment type when using the Fragments Toolkit.

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

{
   "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}> 利用可能なオプションのリスト。

関連トピック

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

フラグメントを使ってフォームを構築する

Feature: