Documentation

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

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

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

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

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

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

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

    Form Fragmentの種類を選択し、Nextをクリックします。

  4. 名前を入力します。

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

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

    フラグメントがサポートするフィールドタイプを選択します。

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

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

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

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

    Configuration タブで、JSON を使用してフラグメントを設定し、オプションを追加します。

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

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

Fragments Toolkit を使用する場合、 yarn run add-fragmentを実行する際にフラグメントの種類を選択することができます。

フラグメントツールキットを使用する場合は、フラグメントの種類を選択します。

サポートするフィールドタイプを指定するには、 fragment.jsontypeOptionsfieldTypes プロパティを追加します。フィールドの種類を配列で入力します。

{
   "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}>

利用可能なオプションの一覧です。

追加情報