List component and list widget

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

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

Since version 8.3.1, Creatio provides the list widget that combines the functionality of the List component with a customizable colored frame. Use the list widget to add a list to a dashboard with visual consistency with other analytic widgets. The list widget uses the same configuration properties as the List component, plus additional properties that configure the frame appearance and the widget header.

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

Example of a configuration object that sets up the list widget functionality

{
    "operation": "insert",
    "name": "ListWidget_4ti5eeg",
    "values": {
        "type": "crt.ListWidget",
        "widgetConfig": {
            "theme": "without-fill",
            "layout": {
                "color": "dark-blue"
            }
        },
        "title": "#ResourceString(ListWidget_4ti5eeg_title)#",
        "features": {
            "rows": {
                "numeration": true,
                "selection": {
                    "enable": true,
                    "multiple": false
                }
            },
            "editable": false
        },
        "items": "$ListWidget_4ti5eeg",
        "primaryColumnName": "ListWidget_4ti5eegDS_Id",
        "columns": [
            {
                "id": "f50ca93d-f7f6-dfa0-6b5e-3e71b34995a9",
                "code": "ListWidget_4ti5eegDS_UsrName",
                "caption": "#ResourceString(ListWidget_4ti5eegDS_UsrName)#",
                "dataValueType": 28
            }
        ],
        "placeholder": null
    },
    "parentName": "GeneralInfoTab",
    "propertyName": "items",
    "index": 1
}

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.

General properties

array widgetToolbarItems

Defines the menu items displayed in the widget header toolbar. Available for list widget only since version 8.3.3. Out of the box, when the property is omitted, the "Export to Excel" action is displayed in the toolbar automatically. To remove all actions from the toolbar, including the "Export to Excel" action, add the "widgetToolbarItems": [] property to the source code of the widget.

---

Widget config properties (widgetConfig)

string theme

The visual style of the list. Available for list widget only. By default, "without-fill."

Available values

Value	Description
full-fill	Apply a fully filled background style.
without-fill	Apply the default list style without a background fill.
partial-fill	Apply a partially filled background style.
glassmorphism	Apply the glassmorphic style. Use this value to align the list visually with glass-style analytic widgets. Available for Creatio 8.3.3 and later.

---

object layout

A configuration object that sets up the frame appearance of the list widget. Available for list widget only.

Parameters

Name	Type	Description
color	string	The color of the frame. Available for list widget only. By default, "dark-blue."

---

Features properties

Header properties (features.header)

boolean visible

Whether to display the list header. Available for both components. By default, "true."

Available values

Value	Description
true	Enable the visibility of the list header.
false	Disable the visibility of the list header.

---

Cell properties (features.cells)

boolean selection

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

Available values

Value	Description
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 (features.columns)

boolean dragAndDrop

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

Available values

Value	Description
true	Enable changing the order of the column.
false	Disable changing the order of the column.

---

boolean resizing

Whether to resize the columns. Available for both components. By default, "true."

Available values

Value	Description
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. Available for both components. By default, "true."

Available values

Value	Description
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. Available for both components. By default, "true."

Available values

Value	Description
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. Available for both components. By default, "true." A column menu contains Freeze, Hide, Properties actions.

Available values

Value	Description
true	Enable displaying the column action menu.
false	Disable displaying the column action menu.

---

Row properties (features.rows)

boolean numeration

Whether to enable automatic numbering of the rows. Available for both components. By default, "true."

Available values

Value	Description
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. Available for both components.

The following example configures row selection below. Enable base and multiple row selection, displaying selection checkbox. Each option has the same result.

Option 1

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

Option 2

/* Enable base and multiple row selection, displaying selection checkbox. */
selection: {
    enable: true
},

Option 3

/* Enable base and multiple row selection, displaying selection checkbox. */
selection: {
    enable: true,
    multiple: true
},

Option 4

/* Enable base and multiple row selection, displaying selection checkbox. */
selection: {
    enable: true,
    multiple: true,
    selectAll: true
},

Parameters

Name	Type	Description
enable	boolean	Whether to enable base row selection. By default, "false." Available values Value Description true Enable base row selection. false Disable base row selection.
multiple	boolean	Whether to enable multiple row selection. By default, equals to "enable." Available values Value Description true Enable multiple row selection. false Disable multiple row selection.
selectAll	boolean	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 Value Description true Enable displaying the Select all checkbox. false Disable displaying the Select all checkbox.

---

Editable list properties (features.editable)

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.

Option 1

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

Option 2

/* Enable the editable list. */
editable: {
    enable: true
},

Option 3

/* Enable the editable list. */
editable: {
    enable: true,
    itemsCreation: true
},

boolean enable

Whether to enable the editable list. Available for both components. By default, "true."

Available values

Value	Description
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. Available for both components. By default, equals to "enable."

Available values

Value	Description
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)