Data Set View Visualization Modes
Liferay DXP 2024.Q1+/Portal 7.4 GA112+ Beta Feature
To customize the data display in your data set view, use the data set manager to select fields and manage visualization modes. There are three visualization modes: table, list, and cards.
With the table visualization mode, you can add and customize any number of fields and select how to render them. With lists and cards, you have a restricted number of elements that can be mapped to fields.
After setting up the visualization modes, access a page with a data set fragment and choose your preferred mode using Show View Options
Displaying Data as a Table
Use the table visualization mode to add, delete, order, edit, and map fields to columns and display data as a table in a data set fragment.
To configure a table visualization mode,
Open the Global Menu (
), select the Control Panel tab, and click Data Sets under Object.Click the name of the data set you want to access.
Alternatively, you can click Actions (
) next to the data set entry and select Edit.Click the name of the data set view to start editing it.
Select the Visualization Modes tab.
Select the Table tab.
Click Add (
) to add fields to the table.Select the fields to be displayed.
Select one or more fields. You can also use the search bar to find specific fields or leave the search bar empty to see all available fields.
Click Save.
With the fields in place, you can reorder them by using the drag icon on the left to drag and drop the field into the desired position.
Editing Fields in a Table
Now you can edit your fields to alter and localize their labels, select a renderer, and define if they are sortable.
To edit a field, click Actions () next to the field and select Edit.
Editing and Localizing Labels
Once you start editing a field, you can change the label and localize it (1).
Click the flag icon next to the Label field and choose a language.
Enter the translated text in the Label field (2).
The translated text is saved automatically.
The localization status label next to the flag changes to
Translatedto indicate that localization was successful.
The localized text appears if users have the respective language applied to their portal.
Selecting a Renderer for the Field
A renderer (3) is a structured way to customize how a component appears. You enter a raw value, and the renderer assumes the most typical format and UI for it.
To ensure your data appears correctly, the field type must be compatible with the selected renderer.
Below on the left, the status, date, and date and time fields have the default renderer applied. On the right, the status, date, and date and time renderers are applied to the respective fields.
Defining the Field as Sortable
When a field is marked as sortable, users can sort the elements while using the data set fragment in a content page.
Initially, users can sort entries based on the integer field. However, when the sortable checkbox is unchecked, sorting entries using the integer field as a filter becomes impossible (see below).
Displaying Data as a List or in Cards
Liferay DXP 2024.Q2+/Portal 7.4 GA120+
The List and Cards visualization modes are hidden until you map at least one field to an element in these modes.
Use the list and cards visualization modes to map fields to the visualization mode elements (i.e., title, description, image, and symbol) and display data as a list or in cards in a data set fragment.
Open the Global Menu (
), select the Control Panel tab, and click Data Sets under Object.Click the name of the data set you want to access.
Alternatively, you can click Actions (
) next to the data set entry and select Edit.Click the name of the data set view to start editing it.
Select the Visualization Modes tab.
Open the List or Cards tab.
Both visualization modes are configured similarly; The only difference is how the data is displayed.
To assign a field to an element, click Add (
) and select a field.The available elements are Title, Description, Image, and Symbol. Note that the image element overrides the symbol element; therefore, you only need to assign one of them.
TipTo use the Symbol element, you must create a text-type object field with values that match icon names from the Clay Icon Reference.
For example, if you want to use a shopping cart symbol, create the object definition, add a text field, name it however you want, and enter
shopping-cartin the field when creating the object entry. Once you assign the field to the Symbol element, the shopping-cart symbol appears.
Below, you can see the same data shown in cards using images and as a list using clay icons as symbols.
Defining a Default Visualization Mode
You can define a default visualization mode to be shown first once a data set fragment is used in a page.
Open the Global Menu (
), select the Control Panel tab, and click Data Sets under Object.Click the name of the data set you want to access.
Alternatively, you can click Actions (
) next to the data set entry and select Edit.Click the name of the data set view to start editing it.
Select the Settings tab.
Choose the Default Visualization Mode.
You can only set a visualization mode as default if it’s visible. If you have a default mode and it becomes hidden, the first mode in alphabetical order is selected automatically as the default.
