Data Set Visualization Modes

Liferay DXP 2024.Q1+/Portal 7.4 GA112+

Beta Feature

To customize the data display in your data set, 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,

1. Open the Global Menu (), select the Control Panel tab, and click Data Sets under Object.

2. Choose the Name of the data set you want to access.

   Alternatively, click Actions () next to the data set entry and select Edit.

3. Select the Visualization Modes tab.

4. Select the Table tab.

5. Click Add () to add fields to the table.

6. 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.

7. 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.

Adding Fields to Visualization Modes

When adding fields to visualization modes, you can add fields by name manually or select available fields from a tree structure. Added fields appear in your data set.

Click Add () to select to add the field manually or using the endpoint’s data source.

Selecting from the Data Source in a Tree View

Selecting Assign from Data Source displays the tree structure with available fields to add.

(1) Navigate through the structure’s levels and click on the checkbox next to a field to add it to your visualization mode. Grayed-out checkboxes indicate that the field is unavailable for the selected visualization mode.

(2) Alternatively, you can use the search bar at the top. Only matching fields are shown, and fields related to the search query are highlighted. To view the entire structure again, clear the search field or click x at the end of the search bar.

(3) Click Deselect All to clear all selections at once.

Click Save to save the new fields and close the window. To discard the additions and close, click Cancel or x in the top right corner.

Adding Fields Manually

Selecting Add Field Manually displays a text input. You can add any field by name, even if it is not shown when selecting from a tree structure. This bypasses the normal limitation of fields contained in object fields, or fields that are not declared in the endpoint schema.

Note

You must already be familiar with your chosen endpoint’s API and the correct field names. Field names are not validated when you enter them, so ensure you enter them correctly.

Manually added fields appear in the visualization mode’s fields the same way as fields selected from the data source. You can also add array fields or array elements using the appropriate array notation, or nested fields using a . to separate the parent and child’s field names (e.g., student.studentId).

Adding Array Fields

You can add array fields to the visualization mode similarly to other fields:

• Fields with scalar array information (e.g., a list of tags applied to a blog post) appear with their values separated by a comma in the Table visualization mode. In List/Card visualization modes, the values are concatenated without separators.

• Fields with complex array information (e.g., an object entry) can be selected at any level of the tree view in the Table visualization mode. In List/Card visualization modes, only child fields can be selected.

Complex array fields use the []* notation, following their name (e.g., organizationBriefs[]*). Fields belonging to a complex array are identified with the [] notation between the parent and child fields (e.g., organizationBriefs[]name).

Tip

The default cell renderer converts any complete complex array field to a JSON object when it’s displayed. You can also use a cell renderer client extension to convert the unformatted JSON object into a more user-friendly display.

Editing Fields in a Table

After you’ve added fields to a visualization mode, 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).

1. Click the flag icon next to the Label field and choose a language.

2. 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 Translated to indicate that localization was successful.

   

Note

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.

Important

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-time fields have the default renderer applied. On the right, the status, date, and date-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+

Note

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.

1. Open the Global Menu (), select the Control Panel tab, and click Data Sets under Object.

2. 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.

3. Select the Visualization Modes tab.

4. Open the List or Cards tab.

   Both visualization modes are configured similarly; The only difference is how the data appears.

5. To assign a field to an element, click Add () and choose how to add it.

   Click Assign from Data Source to choose from a tree view of available fields. Click Assign Field Manually to enter the field by name.

   

   The available elements are Title, Description, Image, and Symbol. Note that the image element overrides the symbol element; therefore, you only assign one of them.

   Tip

   To 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-cart in 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.

1. Open the Global Menu (), select the Control Panel tab, and click Data Sets under Object.

2. 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.

3. Select the Settings tab.

4. Choose the Default Visualization Mode.

Note

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.

Related Topics

• Creating Data Sets
• Managing Data Sets
• Data Set Actions
• Data Set Filters