List component

Level: beginner

List is a component that lets you set up a list on an app page.

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

visible {boolean}

A flag that manages the visibility of the list header. By default, true.

Available values

true	Enables the visibility of the list header.
false	Disables the visibility of the list header.

Cell properties

selection {boolean}

A flag that highlights a list cell. To select a cell, click on it, or press Tab. By default, true.

Available values

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

Column properties

dragAndDrop {boolean}

A flag that configures changing the order of the column using drag-and-drop. By default, true.

Available values

true	Enables changing the order of the column.
false	Disables changing the order of the column.

---

resizing {boolean}

A flag that configures resizing the columns. By default, true.

Available values

true	Enables resizing the column. To resize the column, drag the right border of the column.
false	Disables resizing the column.

---

sorting {boolean}

A flag that configures sorting the columns. By default, true.

Available values

true	Enables sorting the column. To sort the column, click the column title, or use .
false	Disables sorting the column. Creatio hides the button.

---

adding {boolean}

A flag that configures adding the column to the list and displaying the Hide action in the column menu. By default, true.

Available values

true	Enables adding the column to the list. To add the column, use .
false	Disables adding the column to the list.

---

toolbar {boolean}

A flag that configures displaying the column action menu. By default, true. A column menu contains Freeze, Hide, Properties actions.

Available values

true	Enables displaying the column action menu.
false	Disables displaying the column action menu.

---

Row properties

numeration {boolean}

A flag that configures automatic numbering of the rows. By default, true.

Available values

true	Enables automatic numbering of the rows.
false	Disables automatic numbering of the rows.

---

selection {boolean or object}

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.

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

enable	A flag that configures base row selection. By default, false. Available values true Enables base row selection. false Disables base row selection.
multiple	A flag that configures multiple row selection. By default, equals to enable. Available values true Enables multiple row selection. false Disables multiple row selection.
selectAll	A flag that configures 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 Enables displaying the Select all checkbox. false Disables displaying the Select all checkbox.

Editable list properties

Important

Requires either 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
},

enable {boolean}

A flag that configures the editable list. By default, true.

Available values

true	Enables the editable list. To modify a cell value, double-click the cell, click , or press Enter.
false	Disables the editable list.

---

itemsCreation {boolean}

A flag that configures the adding a new record using the editable list. By default, equals to enable.

Available values

true	Enables 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	Disables adding a new record using the editable list.