Creating Form Fragments
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,
-
Open the Site Menu () and go to Design → Fragments.
-
Click Plus () to create a Fragment Set for organizing your form fragments.
-
Click Add (), select the Form Fragment type, and click Next.
-
Enter a name.
-
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.
-
Click Add. This creates a draft fragment and shows you to the fragment edit page.
-
In the Code tab, add HTML, CSS, and JavaScript for your fragment.
NoteYou can map the submit button fragment’s text using mapping settings.
To create a button with link settings for redirection, add
type="button"
to the button fragment. -
(Optional) In the Configuration tab, use JSON to configure the fragment and add options to it. See Fragment Configuration Types Reference to learn more about different fragment configuration types.
-
Click Publish.
Now use your form fragment to build forms in content pages. See Using Fragments to Build Forms for more information.
Supported Field Types Reference
Field Type | Description |
---|---|
boolean | Boolean field. |
captcha | Users must verify they are human before submissions. |
date | Date field. |
file | Adds support for attaching files. |
html | Adds a CKEditor for adding rich text. |
multiselect | Select from a list of checkboxes. |
number | Numeric fields. |
relationship | Define object relationships. |
select | Select options from drop-down lists. |
text | Adds support for text fields. |
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 |
---|---|---|
fieldTypes | string | Field type mapped to the input. |
name | string | Input’s name. To create a fragment, the user must define this property. |
required | boolean | Whether the input is required. |
value | string | Field’s value. |
label | string | Input’s label. |
showLabel | boolean | Label visibility. |
errorMessage | string | Form submission errors. |
helpText | string | UI help message for the form field. If undefined, this property is empty. |
showHelpText | boolean | Help text visibility. |
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 appear 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 | Choose 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. |