Skip to main content
Version: 8.3

List component

Level: beginner

List is a component to add a list of the selected object’s data based on pre-configured filters. Learn more: List, Set up List components (user documentation).

When you delete the List component from the Freedom UI page and save the changes in the Freedom UI Designer, Creatio executes the following actions:

  • Validate usage of the list data source in the current Freedom UI page schema.
  • Delete the list data source from the current Freedom UI page schema automatically only if the data source was created in the current Freedom UI page schema. Otherwise, the list data source is left as is.

View an example of a configuration object that sets up the list functionality below.

Example of a configuration object that sets up the list functionality
{
    "operation": "merge",
    "name": "DataTable",
    "values": {
        ...,
        "features": {
            "header": {
                "visible": true
            },
            "cells": {
                "selection": false
            },
            "columns": {
                "dragAndDrop": true,
                "resizing": false,
                "sorting": false,
                "adding": false,
                "toolbar": true
            },
            "rows": {
                "numeration": true,
                "selection": {
                    "enable": true,
                    "multiple": true,
                    "selectAll": false
                }
            },
            "editable": {
                "enable": false,
                "itemsCreation": false
            }
        }
    }
}

Header properties​

boolean visible

Whether to display the list header. By default, "true."

Available values

true

Enable the visibility of the list header.

false

Disable the visibility of the list header.

Cell properties​

boolean selection

Whether to highlight a list cell. To select a cell, click on it, or press Tab. By default, "true."

Available values

true

Enable cell selection, copying a text from the selected cell, and editing the cell value if the editable property is "true." Read more >>>

false

Disable cell selection, editing the cell value.

Column properties​

boolean dragAndDrop

Whether to change the order of the column using drag-and-drop. By default, "true."

Available values

true

Enable changing the order of the column.

false

Disable changing the order of the column.

boolean resizing

Whether to resize the columns. By default, "true."

Available values

true

Enable resizing the column. To resize the column, drag the right border of the column.

false

Disable resizing the column.

boolean sorting

Whether to enable sorting the columns. By default, "true."

Available values

true

Enable sorting the column. To sort the column, click the column title, or use .

false

Disable sorting the column. Creatio hides the button.

boolean adding

Whether to enable adding the column to the list and displaying the Hide action in the column menu. By default, "true."

Available values

true

Enable adding the column to the list. To add the column, use .

false

Disable adding the column to the list.

boolean toolbar

Whether to display the column action menu. By default, "true." A column menu contains Freeze, Hide, Properties actions.

Available values

true

Enable displaying the column action menu.

false

Disable displaying the column action menu.

Row properties​

boolean numeration

Whether to enable automatic numbering of the rows. By default, "true."

Available values

true

Enable automatic numbering of the rows.

false

Disable automatic numbering of the rows.

boolean or object selection

A configuration object that configures parameters of row selection.

View an example that configures row selection below. Enable base and multiple row selection, displaying selection checkbox. Each option has the same result.

/* Enable base and multiple row selection, displaying selection checkbox. */
selection: true,
Parameters

boolean enable

Whether to enable base row selection. By default, "false."

Available values

true

Enable base row selection.

false

Disable base row selection.

boolean multiple

Whether to enable multiple row selection. By default, equals to "enable."

Available values

true

Enable multiple row selection.

false

Disable multiple row selection.

boolean selectAll

Whether to enable the Select all checkbox. Creatio displays a checkbox in the column title. The checkbox lets you select all the filtered records from the list. By default, equals to "multiple."

Available values

true

Enable displaying the Select all checkbox.

false

Disable displaying the Select all checkbox.

Editable list properties​

Important

Requires the selection property.

Below is the example that configures the editable list, i.e., adding new records in the list and editing the cell values in the list without using a dedicated record page. Each option has the same result.

/* Enable the editable list. */
editable: true,
boolean enable

Whether to enable the editable list. By default, "true."

Available values

true

Enable the editable list. To modify a cell value, double-click the cell, click , or press Enter.

false

Disable the editable list.

boolean itemsCreation

Whether to enable the adding a new record using the editable list. By default, equals to "enable."

Available values

true

Enable adding a new record to the list. To do this, hold the pointer at the end of the list or at the start of the row, or press Shift+Enter.

false

Disable adding a new record using the editable list.

See also​

Overview of Freedom UI Designer and its elements (user documentation)

Set up List components (user documentation)