Documentation

Creating Form Fragments

Available Liferay 7.4 U45+/GA45+

The Form Components fragments are for building your object’s forms in a content page. If Liferay’s form fragments don’t satisfy your use case, create your own to achieve the desired design and functionality for your forms.

To create form fragments,

  1. Open the Site Menu ( Site Menu ), expand Design, and go to Fragments.

  2. Click Plus (Plus Button) to create a Fragment Set for organizing your form fragments.

  3. Click Add (Add Button), select the Form Fragment type, and click Next.

    Select the Form Fragment type and click Next.

  4. Enter a name.

  5. Select the field types to allow in the fragment.

    If you select CAPTCHA, you cannot select other field types. Otherwise, you can select any combination of fields.

    Select the field types the fragment supports.

  6. Click Add. This creates a draft fragment and directs you to the fragment edit page.

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

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

  8. (Optional) In the Configuration tab, use JSON to configure the fragment and add options to it.

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

  9. Click Publish.

Now use your form fragment to build forms in content pages. See Using Fragments to Build Forms for more information.

If using the Fragments Toolkit, you can select the fragment type when running yarn run add-fragment.

Select the fragment type when using the Fragments Toolkit.

To specify the supported field types, add the fieldTypes property to typeOptions in the fragment.json. Enter the field types as an array:

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

After that, follow the same process as when creating a basic fragment. See Using the Fragments Toolkit for more information about creating and deploying basic fragments.

Using the input Variable with Form Fragments

Form fragments include the input variable for use with each fragment’s JavaScript and FreeMarker code. This variable contains the properties for configuring the fragment.

Input Variable Properties Reference

Property

Type

Description

type

string

Field type mapped to the input.

name

string

Input’s name.

required

boolean

Whether the input is required.

value

string

Field’s value.

label

string

Input’s label.

showLabel

boolean

Whether the label is visible to users.

errorMessage

string

Form submission errors.

helpText

string

UI help message for the form field. If undefined, this property is empty.

showHelpText

boolean

Whether the help text is visible to users.

attributes

object

Options added to the fragment for specific input types.

Attributes for file Input

Property

Type

Description

allowedFileExtensions

string

Allowed file extensions. If Show Supported File Info is enabled, the allowed extensions are displayed in the field’s help text.

maxFileSize

number

Maximum upload size in megabytes. If Show Supported File Info is enabled, the maximum allowed size appears in the field’s help text.

selectFromDocumentLibrary

boolean

Whether users can select files from the document library. This is set in the object’s attachment field.

selectFromDocumentLibraryURL

string or undefined

If selectFromDocumentLibrary is true, this property contains the URL for rendering the corresponding ItemSelector.

Attributes for number Input

Property

Type

Description

dataType

integer or decimal

Whether to allow integer or decimal numbers.

max

number or undefined

Maximum number allowed.

min

number or undefined

Minimum number allowed.

step

string or undefined

String value that can be used with the HTML input “step” attribute to indicate the maximum allowed precision.

Attributes for relationship Input

Property

Type

Description

relationshipLabelFieldName

string

Field name of the related object used as the label.

relationshipValueFieldName

string

Field name of the related object used as the value.

relationshipURL

string

URL used to fetch options from the API. The API response uses Liferay’s headless list format, including pagination. Pass additional parameters to query the response.

Attributes for select Input

Property

Type

Description

options

Array<{label: string, value: string}>

List of available options.

Additional Information