General Settings Reference

All fragments have general settings. Some of these options are standard (e.g., visibility and frame), while others are unique to each fragment. The following reference only includes fragments with general settings.

Follow these steps to access a fragment’s general settings:

  1. Begin editing a page or template that supports fragments.

  2. Open the Browser panel (Browser) in the sidebar menu and select the desired fragment.

    Alternatively, click the desired fragment in the page or template.

  3. Click the General tab in the Page Elements side panel.

Select a fragment to access its general settings in the Page Element side panel.

Standard General Settings

Hide Fragment

FieldDescription
Hide FragmentCheck the box to hide the fragment for different viewports. See Configuring Fragment Visibility to learn more about how this setting interacts with page viewports.

Frame

FieldDescription
Width/HeightDetermine the default height and width of the fragment’s frame.
Min Width/Max WidthDetermine the min and max width for the frame when displayed in different viewports.
Min Height/Max HeightDetermine the min and max height for the frame when displayed in different viewports.
OverflowDetermine whether to allow fragment content to overflow its frame. By default, fragment content is restricted to its frame. If overflow is allowed, you can determine how it is displayed (e.g., Scroll).

Container Options

FieldDescription
LinkDetermine if the container links to a URL, Page, or Mapped URL; this setting determines which of the following fields are available.
URL (for URL)Enter a localizable URL for the container. To set a URL for other languages, first switch the language for the page or template via the editing bar. Then, enter the desired URL.
Page (for Page)Select a Liferay page for the container.
Item (for Mapped URL)Select an item from Documents and Media, Web Content, Blogs, or Categories. The selected item provides fields for mapping.
Field (for Mapped URL)Select the URL field you want to map to the container. Selecting a valid field automatically populates the URL field.
URL (for Mapped URL)This field is auto-populated with the selected Field URL.
Open in New TabDetermine whether the link is opened in a new tab.
Content DisplayDetermine whether the container’s content is displayed in a Block, Flex Row, or Flex Column; the flex options have additional configurations.
Flex Wrap (for Flex Row or Flex Column) 7.4 U19+/GA19+Configure wrapping for flex rows and columns: No Wrap, Wrap, or Wrap Reverse.
Align Items (for Flex Column) 7.4 U19+/GA19+Determine how elements in the column are aligned: Start, Center, End, Stretch, or Baseline.
Justify Content (for Flex Row) 7.4 U19+/GA19+Determine how elements in the row are justified: Start, Center, End, Between, or Around.
Container WidthDetermine whether the container uses a Fluid or Fixed Width.

Grid Options

FieldDescription
Number of ModulesDetermine the Grid’s number of drop zone modules: 1-6.
Show GutterAdd or remove padding between the drop zone modules.
LayoutDetermine how many drop zone modules are on each row: 1, 2, 3, or 6. Available options depends on the number of modules.
Inverse Order (for 1 Module per Row)Check the box to reverse the order of modules.
Vertical AlignmentDetermine the vertical alignment of the module’s content: Top, Middle, or Bottom.

Button Options

FieldDescription
TypeDetermine the button’s type: Link or Action
StyleDetermine the button’s style: Primary, Secondary, Link, Outline Primary, or Outline Secondary.
SizeDetermine the button’s size: Small, Normal, or Large.

Card Options

FieldDescription
Image SizeDetermine the image’s size: Fit or Original Size.
FieldDescription
TypeDetermine the button’s style: Primary, Secondary, Link, Outline Primary, or Outline Secondary.
SizeDetermine the button’s size: Small, Normal, or Large.
Panel TypeDetermine the size of the dropdown menu panel: Regular, Full Width, or Mega Menu.
Display on HoverCheck the box to determine if the menu panel is displayed when a cursor hovers over the button.
Keep Panel Open in Edit ModeCheck the box to determine if the panel remains open while editing.

External Video Options

FieldDescription
VideoEnter a URL to the desired video or select an External Video Shortcut from Documents and Media.
Width/HeightDetermine the embedded video’s dimensions.
AlignDetermine the video’s alignment: Left, Center, or Right.

Heading Options

FieldDescription
Heading LevelDetermine the header’s style: H1-H6.

Image Options

FieldDescription
Image SizeDetermine the image’s size: Fit or Original Size.

Separator Options

FieldDescription
Bottom SpacingDetermine how much padding is added after the Separator: 1-5.
Separator ColorSelect a color for the Separator.
ClearClick Clear to remove the selected color.

Slider Options

FieldDescription
Number of SlidesDetermine how many slides are included in the fragment.
tip

There is no limit to the number of slides you can add to a Slider. However, high numbers of slides can negatively impact performance.

Spacer Options

FieldDescription
HeightDetermine the thickness of the spacer: 1-5.

Tabs Options

FieldDescription
Number of TabsDetermine how many tabs are included in the fragment.
tip

There is no limit to the number of tabs you can add to a Tabs fragment. However, a high number of tabs can negatively impact performance.

Video URL Options

FieldDescription
URLEnter a valid video URL.
AutoplayDetermine if the video plays automatically when the page is loaded.
LoopDetermine if the video restarts once it’s finished.
MuteDetermine if the video is muted by default.
Hide ControlsDetermine if users can access video controls.
Width/HeightDetermine the embedded video’s dimensions.
AlignDetermine the video’s alignment: Left, Center, or Right.

Content Display Options

FieldDescription
ItemSelect an item to display from Documents and Media, Web Content, Blogs, or Categories.
TemplateSelect a template to determine how the item is displayed. Available templates depend on the selected content type.

Content Flags Options

FieldDescription
ItemSelect the item you want to associate with the flag from Documents and Media, Web Content, Blogs, or Categories.
MessageEnter a message to display in the UI with the content flag.

Collection Filter Options

FieldDescription
Target CollectionSelect a collection to use with the filter.
FilterDetermine the filter’s type: Keywords or Category. When using Category, end users can select from predefined filter categories. When using Keywords, they can manually enter their own filter values.
Source (for Category)Select the Vocabulary or Category used for filtering the target collection.
Single Selection (for Category)Determine whether end users can apply only one or more filters to the collection.
Include Search Field (for Category)Determine whether to include a field for end users to search available filter values.
Show LabelCheck to show a label for the filter in the UI.
Label TextEnter localizable text for the label. To set label text for another language, first switch the language for the page or template via the editing bar. Then, enter the desired text. See Localizing Fragment Configuration Fields for more information.

Applied Filters Options

FieldDescription
Target CollectionSelect a collection to use with the fragment. This fragment displays all filters applied to the selected collection.
Include Clear Filters OptionDetermine whether to include the Clear Filters option to end users.
note

This fragment is only displayed when a filter is applied to the target collection.

Content Ratings Options

FieldDescription
ItemSelect the item you want to associate with the fragment from Documents and Media, Web Content, Blogs, or Categories.

Collection Display Options

FieldDescription
CollectionSelect a collection or collection provider to display in the fragment. Once selected, you can click the Actions button to access additional options. Available actions depend on the selected collection or collection provider.
List StyleSelect from available styles to determine how items are listed. Available styles depend on the selected collection or collection provider.
Layout (for Grid)Determine how many columns the collection list has: 1-6.
List Item Style (for Templates)Select from available styles to determine how each entry is displayed. Available styles depend on the selected collection asset type.
PaginationDetermine whether to use pagination for the collection. When enabled, you can select from two style options: Numeric or Simple.
Display All Collection ItemsDetermine whether to display all items in the selected collection or collection provider.
Maximum Number of ItemsSet the maximum number of items to display from the selected collection or collection provider.
Maximum Number of Items per PageDetermine the number of items included in each fragment per page. This value cannot exceed 200.

Form Fragment Options

Liferay 7.4 U45+/GA45+

Form fragments include unique configuration options. To access them, you must map the fragment to an object field.

Form Container

FieldDescription
Content TypeSelect a custom object. This maps the form container and its fragments to the selected object. You can only map a form container to one object at a time.
Success MessageDetermine whether the form submission success message is embedded in the current page or redirects users to a Liferay page or external URL.
Success Text (for Embedded)Enter a localizable success message.
Preview Success State (for Embedded)Preview the embedded success message.
Content DisplayDetermine whether the Container’s content is displayed in a Block, Flex Row, or Flex Column; the flex options have additional configurations.
Flex Wrap (for Flex Row or Flex Column)Configure wrapping for flex rows and columns: No Wrap, Wrap, or Wrap Reverse.
Align Items (for Flex Column)Determine how elements in the column are aligned: Start, Center, End, Stretch, or Baseline.
Justify Content (for Flex Row)Determine how elements in the row are justified: Start, Center, End, Between, or Around.
Container WidthDetermine whether the Container uses a Fluid or Fixed Width.

Text and Long Text Fields

FieldDescription
Show Characters CountDisplays the number of characters entered and a warning when the maximum character count is exceeded. The maximum character count can be configured in the object’s field configuration. See Field Types UI Reference for more information.

Categories

FieldDescription
Vocabulary TypeDisplays categories based on the visibility of the vocabulary. See Vocabulary Visibility for more information. To access this setting, Enable Categorization must be enabled on the object. See Creating Objects for more information.

Other Form Fragment Configurations

FieldDescription
FieldMap the fragment to an object field.
Mark as RequiredMark the fragment field as required for form submission. Mandatory object fields are marked as required automatically.
Show LabelDisplay or hide the fragment’s label.
LabelSet a localizable label for the fragment. By default, each fragment uses its object field’s label.
Show Help TextDisplay or hide the fragment’s help text.
Help TextSet a localizable help text for the fragment.
PlaceholderFor the Numeric Input and Text Input fragments, enter an example value.
Button TextFor the File Upload fragment, set a localizable button text for attaching files.
Show Supported File InfoFor the File Upload fragment, display or hide the list of supported extensions and file size limit.

Configuring Fragments

Fragment Styles Reference

Fragment Sub-Elements Reference

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy