List view#


../../_images/list-view.png

Основные сведения#

“List View” - это UI-Компонент для отображения и настройки контейнера “карточного” представления данных.

Параметры#

Component properties

Группа настроек

Поле настройки

Варианты значений

Назначение

Name

-

Наименование UI Компонента в системе

Common

Component

Множественный выбор Catalog

Содержит список из всех Компонентов

Number of columns

-

Количество столбцов контейнера

Number of rows

-

Количество строк контейнера

Column gap

-

Расстояние между столбцами

Row gap

-

Расстояние между строками

Page size

-

Размер контейнера

Manual reload

true, false

Возможность ручной перезагрузки данных

Hide page selector

true, false

Скрыть селектор страницы

Enable drag and drop

true, false

Включить перетаскивание

Drag and drop group

-

Группа для перетаскивания(если таковая имеется)

Automation id

-

Идентификатор для автоматизации

Events

On datasource loaded

-

Событие при загрузке источника данных

On loaded

-

Событие при загрузке компонента

On drop

-

Событие при перетаскивании

CSS properties

Группа настроек

Поле настройки

Варианты значений

Назначение

Layout

Width

-

Ширина компонента

Height

-

Высота компонента

Margin

-

Внешний отступ компонента

Padding

-

Внутренний отступ компонента

Visible

true, false

Видимость компонента

Hidden

true, false

Скрытость компонента

Orientation

Horizontal, Vertical

Ориентация компонента

Appearance

CornerRadius

-

Радиус скругления углов

BorderThickness

-

Толщина границы компонента

Opacity

-

Прозрачность компонента

Brush

Background

-

Цвет фона компонента

BorderBrush

-

Цвет границы компонента

Использование drag-and-drop#

Сперва в группе настроек “Common” необходимо выбрать следующий параметр:

../../_images/enable-drag-and-drop.png

После сохранения и публикации применение drag-and-drop уже будет доступно для данного list-view на work-place. Для последующей корректной работы Вам необходимо перейти в component script и подготовить функцию обработки события перетаскивания(on drop).

Ниже приведен пример функции, применяемой к canban-доске, состоящей из основного list-view и вложенного. Основной выполняет функцию стадий воронки продаж и переведен в горизонтальное положение, а вложенный в него содержит сами сделки и находится в вертикальном положении. Функция забирает ID перетаскиваемого объекта(в данном случае - сделки) и стадию, в которую сделка переводится, затем вызывает dataflow и при его успешном выполнении обновляет list-view, переводя сделку в новую стадию: 

def OnMove(dstList, srcList, dataObject, oldIdx, newIdx):
    context.Logger.Info("Callback on move")
    # The new Busy(boolean) method puts the UIElement into a loading status,
    # showing or hiding the loader
    srcList.Busy(True)
    dstList.Busy(True)
    
    # The new GetDynamicFilterValue(string) method computes the value of a Dynamic filter.
    # If there are two filters on one field, the first in the list is computed
    stage = dstList.GetDynamicFilterValue("data.Stage")
    
    # Creating a model to call the data-flow
    flowModel = {"Stage": stage, "OrderId": dataObject.Id}
    # Calling the data-flow with a new overload for onComplete and onError
    context.ExecuteDataflow("783cf3e3-d8f8-4551-8447-13be4f738e41", flowModel, 
    lambda res: OnDataflowComplete(res, dstList, srcList), 
    lambda ex: OnDataflowError(ex, dstList, srcList))

def OnDataflowComplete(dataResult, dstList, srcList):
    # The new Busy(boolean) method puts the UIElement into a loading status,
    # showing or hiding the loader
    srcList.Busy(False)
    dstList.Busy(False)
    # Refreshing the lists
    srcList.Refresh()
    dstList.Refresh()

def OnDataflowError(exception, dstList, srcList):
    # The new Error(boolean, string) method puts the UIElement into an error status,
    # displaying the error message
    srcList.Error(True, "An error occurred")
    dstList.Error(True)
    context.Logger.Error(exception, "An error occurred during the data-flow call")

Кейсы#

  • Отображение данных: Эффективно для представления данных в виде карточек или списков.

  • Интерфейс пользователя: Подходит для интерфейсов, требующих карточного или списочного представления информации.

Исключения#

  • Ограниченная гибкость: Не подходит для отображения данных вне карточного формата или списков, так как специализирован на определенном визуальном представлении

  • Визуальные ограничения: Стиль и внешний вид могут быть ограничены параметрами CSS, что может не соответствовать всем дизайнерским требованиям.