DetailsList контроль

Элемент управления, используемый для отображения набора данных.

Description

Подробный список (DetailsList) — это надежный способ отобразить информативную коллекцию элементов и позволить людям сортировать, группировать и фильтровать содержимое. Используйте DetailsList, когда плотность информации критична.

Компонент кода DetailsList позволяет использовать компонент Fluent UI DetailsList из приложений на основе холста и пользовательских страниц.

• Может быть привязан к набору данных Dataverse или локальной коллекции.
• Поддерживает настраиваемые столбцы отдельно от метаданных столбцов, предоставленных исходным набором данных, для гибкости.
• Типы ячеек для ссылок, значков, развертывания/свертывания и вложенных текстовых ячеек.
• Поддержка разбиения на страницы.
• Поддержка сортировки либо с помощью сортировки Dataverse, либо с помощью настраиваемых свойств SortBy.

Свойства

Ключевые свойства

Items характеристики

Эти атрибуты должны быть доступны в источнике данных, чтобы активировать соответствующую функциональность. Формулу Power Fx AddColumns() можно использовать для добавления этих значений к исходному источнику данных.

Columns характеристики

Свойство	Description
ColDisplayName	(Обязательно) — указывает имя столбца для отображения в заголовке.
ColName	(Обязательно) — указывает фактическое имя поля столбца для отображения в коллекции элементов.
ColWidth	(Обязательно) — предоставляет абсолютную фиксированную ширину столбца в пикселях.
ColCellType	Тип ячейки для отрисовки. Возможные значения: expand, tag, indicatortag, image, clickableimage, link. Для получения дополнительных сведений см. следующие разделы.
ColHorizontalAlign	Выравнивание содержимого ячейки, если ColCellType имеет тип image или clickableimage.
ColVerticalAlign	Выравнивание содержимого ячейки, если ColCellType имеет тип image или clickableimage.
ColMultiLine	True, когда текст в текстовых ячейках должен переноситься, если он слишком длинный, чтобы соответствовать доступной ширине.
ColResizable	True, если ширина заголовка столбца должна изменяться.
ColSortable	True, если столбец должен поддерживать возможность сортировки. Если набор данных поддерживает автоматическую сортировку через прямое соединение Dataverse, данные будут автоматически отсортированы. В противном случае выходные данные SortEventColumn и SortEventDirection будут установлены и должны использоваться в выражении привязки записей Power FX.
ColSortBy	Имя столбца для предоставления событию OnChange при сортировке столбца. Например, если вы сортируете столбцы даты, вы хотите сортировать по фактическому значению даты, а не по форматированному тексту, отображаемому в столбце.
ColIsBold	True, если данные ячейки данных должны быть выделены полужирным шрифтом
ColTagColorColumn	Если тип ячейки — тег, установите шестнадцатеричный цвет фона текстового тега. Не может быть установлено значение transparent. Если тип ячейки не является тегом, установите шестнадцатеричный цвет для использования в качестве ячейки тега индикаторного круга. Если текстовое значение пусто, тег не отображается.
ColTagBorderColorColumn	Установите шестнадцатеричный цвет для использования в качестве цвета границы текстового тега. Не может быть установлено значение transparent.
ColHeaderPaddingLeft	Добавляет отступы к тексту заголовка столбца (в пикселях)
ColShowAsSubTextOf	Если задать для этого параметра имя другого столбца, этот столбец станет дочерним по отношению к данному столбцу. См. ниже в столбцах вложенного текста.
ColPaddingLeft	Добавляет отступ слева от дочерней ячейки (в пикселях)
ColPaddingTop	Добавляет отступ сверху от дочерней ячейки (в пикселях)
ColLabelAbove	Перемещает метку над значением дочерней ячейки, если она отображается в виде столбца вложенного текста.
ColMultiValueDelimiter	Объединяет значения массива с несколькими значениями вместе с этим разделителем. См. ниже под столбцами с несколькими значениями.
ColFirstMultiValueBold	При отображении многозначного значения массива первый элемент выделяется жирным шрифтом.
ColInlineLabel	Если установлено строковое значение, оно используется для отображения метки внутри значения ячейки, которое может отличаться от имени столбца. например
ColHideWhenBlank	При значении true любая встроенная метка и отступы ячейки будут скрыты, если значение ячейки пустое.
ColSubTextRow	При отображении нескольких ячеек в ячейке вложенного текста установите на индекс строки. Ноль указывает основную строку содержимого ячейки.
ColAriaTextColumn	Столбец, содержащий описание Aria для ячеек (например, ячеек значков).
ColCellActionDisabledColumn	Столбец, который содержит логический флаг, чтобы контролировать, отключено ли действие ячейки (например, ячейки значков).
ColImageWidth	Размер значка/изображения в пикселях.
ColImagePadding	Отступ вокруг ячейки значка/изображения.
ColRowHeader	Определяет столбец для отображения большего размера, чем другие ячейки (14 пикселей, а не 12 пикселей). Обычно для каждого набора столбцов будет только один заголовок строки.

Свойства стиля

Свойства событий

Базовое использование

Чтобы определить, какие столбцы отображаются в DetailsList, настройте следующие свойства DetailsList:

1. Поля. Добавьте нужные поля, выбрав пункт «Редактировать» во всплывающем меню элементов управления справа (тут используется тот же интерфейс для изменения предопределенных карточек данных).

2. Колонны. Обеспечьте конкретное сопоставление между столбцами и полями в свойстве Columns.

Пример:

Сопоставление с системной таблицей Учетные записи Dataverse, по следующей формуле:

Table(
    {
        ColName: "name",
        ColDisplayName: "Name",
        ColWidth: 200,
        ColSortable: true,
        ColIsBold: true,
        ColResizable: true
    },{
        ColName: "address1_city",
        ColDisplayName: "City:",
        ColShowAsSubTextOf: "name"
    },{
        ColName: "address1_country",
        ColDisplayName: "Country:",
        ColShowAsSubTextOf: "name"
    },{
        ColName: "telephone1",
        ColDisplayName: "Telephone",
        ColWidth: 100,
        ColSortable: true,
        ColResizable: true
    },{
        ColName: "primarycontactid",
        ColDisplayName: "Primary Contact",
        ColWidth: 200,
        ColSortable: true,
        ColSortBy: "_primarycontactid_value",
        ColResizable: true,
        ColCellType: "link"
    }
)

Вложенные текстовые столбцы

Свойство столбца ColShowAsSubTextOf определяет столбец, отображаемый под значением в другом столбце. Это можно использовать для отображения вторичной информации и расширяемого контента (см. ниже).

Если у вас есть коллекция, определенная как:

ClearCollect(colAccounts,
{id:"1",name:"Contoso",city:"Redmond",country:"U.S.",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",expand:false},
{id:"2",name:"Litware, Inc",city:"Dallas",country:"U.S.",description:"Donec vel pellentesque turpis.",expand:false});

Вы можете определить столбцы как:

Table(
    {
        ColName: "name",
        ColDisplayName: "Account Name",
        ColWidth: Self.Width-100,
        ColIsBold:true
    },
    {
        ColName: "city",
        ColDisplayName: "City:",
        ColShowAsSubTextOf:"name",
        ColLabelAbove:false,
        ColIsBold:true,
        ColSubTextRow: 1
    },
    {
        ColName: "country",
        ColDisplayName: "Country:",
        ColShowAsSubTextOf:"name",
        ColLabelAbove:false,
        ColIsBold:true,
        ColSubTextRow: 1
    },
    {
        ColName: "description",
        ColDisplayName: "",
        ColShowAsSubTextOf:"name",
        ColLabelAbove:false,
        ColIsBold:false,
        ColSubTextRow: 2
    }
)

В результате получится таблица следующего вида:

Типы ячеек

Свойство столбца ColCellType принимает следующие значения: expand, tag, image, indicatortag, clickableimage, link

Развернуть (свернуть)

Если для строк «Вложенный текст» требуется значок развертывания/свертывания, можно добавить дополнительный столбец к столбцу набора данных и определение столбца ColCellType устанавливает expand также:

{ColName:"expand",ColDisplayName:"",ColWidth:32,ColResponsive:false, ColRightAligned:true, ColCellType:"expand"}

Предполагая, что свойство RecordKey установлено в столбце index, событие OnChange может содержать следующее, чтобы развернуть/свернуть строки:

If(Self.EventName="CellAction" && Self.EventColumn="expand",
    With(LookUp(colExpand,index=Self.EventRowKey) As Row,
        Patch(colExpand,Row,{expand:!Row.expand})
        )
);

Это ищет строку, в которой было вызвано действие ячейки при использовании индекса (если RecordKey не установлен, то EventRowKey будет содержать номер строки), а затем переключает значение развертывания.

Это даст следующий результат:

Тег и тег индикатора

Используя тип ячейки tag или indicatortag, вы можете создавать встроенные цветные теги для отображения содержимого ячейки.

• tag - Появится поле тега с цветным фоном и рамкой.
• tagindicator - Показывает поле тега с цветным круглым индикатором

Цвета могут варьироваться в зависимости от строки, поэтому набор данных метаданных столбца просто предоставляет имена столбцов, содержащих цвета для тегов.

Рассмотрим набор данных:

ClearCollect(
    colAccounts,
    {
        name: "Contoso",
        city: "Redmond",
        country: "U.S.",
        TagColor: "rgb(0, 183, 195)",
        TagBorderColor: "rgb(0,137,147)"
    },
    {
        name: "Litware, Inc",
        city: "Dallas",
        country: "U.S.",
        TagColor: "rgb(255, 140, 0)",
        TagBorderColor: "rgb(194,107,0)"
    }
);

Затем вы можете добавить метаданные столбца, чтобы добавить два столбца, один из которых отображается как тег, а другой как tagindicator, каждый из которых использует столбцы TagColor и TagBorderColor для определения цветов:

{
        ColName: "country",
        ColDisplayName: "Country",
        ColCellType:"tag",
        ColWidth: 60,
        ColTagColorColumn: "TagColor",
        ColTagBorderColorColumn: "TagBorderColor"
},
{
        ColName: "country",
        ColDisplayName: "Country",
        ColCellType:"indicatortag",
        ColWidth: 60,
        ColTagColorColumn: "TagColor",
        ColTagBorderColorColumn: "TagBorderColor"
}

Это даст следующий результат:

Изображение и изображение, доступное для щелчка

Используя тип ячейки image или clickableimage, вы можете настроить встроенные изображения, которые можно дополнительно выбрать для установки действия OnChange.

Содержимое изображения может быть определено с помощью префикса:

• https: Ссылка на внешнее изображение. например, https://via.placeholder.com/100x70
• icon: Используя один из Иконки пользовательского интерфейса Fluent например, icon:SkypeCircleCheck
• data: Использование встроенных данных изображения SVG: например, data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%2020...

Если изображение имеет тип clickableimage, событие OnChange сработает при выборе значка, с EvenName из CellAction, EventColumn предоставляет имя столбца изображения, а EventRowKey является RecordKey строки (если не задан RecordKey, то EventRowKey будет содержать номер строки).

например, рассмотрим данные строки:

{
        id: "1",
        name: "Contoso",
        city: "Redmond",
        country: "U.S.",
        ImageColor: "rgb(0, 183, 195)",
        externalimage: "https://via.placeholder.com/100x70",
        iconimage: "icon:SkypeCircleCheck"
    },
    {
        id: "2",
        name: "Litware, Inc",
        city: "Dallas",
        country: "U.S.",
        ImageColor: "rgb(255, 140, 0)",
        externalimage: "https://via.placeholder.com/100x70",
        iconimage: "icon:SkypeCircleCheck"
    }

и метаданные столбца:

 {
        ColName: "externalimage",
        ColDisplayName: "Image",
        ColCellType:"image",
        ColWidth: 60,
        ColImageWidth: 60,
        ColImagePadding: 8,
        ColVerticalAlign: "Top"
},
{
        ColName: "iconimage",
        ColDisplayName: "Clickable Image",
        ColCellType:"clickableimage",
        ColWidth: 60,
        ColImageWidth: 60,
        ColImagePadding: 8,
        ColVerticalAlign: "Top"
}

Это даст результат:

Для столбца clickableimage событие OnChange может затем обрабатываться, когда пользователь выбирает (мышью или клавиатурой) значок (при условии, что он не отключен), используя:

If(Self.EventName="CellAction",
	Notify("CellAction " & Self.EventColumn & " " & Self.EventRowKey)
)

EventRowKey будет заполнен значением столбца, определенным как свойство RecordKey.

Ссылки.

Столбцы могут отображаться как ссылки, которые будут вызывать событие OnChange при выборе ссылки аналогично тому, как работают интерактивные изображения, описанные выше.

Метаданные столбца для ссылки настроены следующим образом:

  {
        ColName: "name",
        ColDisplayName: "Account Name",
        ColWidth: 150,
        ColIsBold:true,
        ColCellType: "link"
    }

Это приведет к следующему отображению содержимого ячейки:

Событие OnChange снова запускается при нажатии на ссылку, при этом EventColumn является именем столбца, содержащего ссылку, и EventRowKey заполняется значением столбца, определенным как свойство RecordKey.

Многозначные столбцы

Если значение столбца может иметь несколько значений путем установки его в таблицу/коллекцию. Это затем отобразит значения как несколько значений ячеек. например:

 {
        id: "1",
        name: "Contoso",
        tags:["#PowerApps","#PowerPlatform"]
    },

Тогда метаданные столбца могут быть:

 {
        ColName: "tags",
        ColDisplayName: "Tags",
        ColWidth: 250,
        ColFirstMultiValueBold :true,
        ColMultiValueDelimiter:" "
    }

Это приведет к таблице, показывающей:

Поведение

События сортировки

Столбец определяется как сортируемый путем установки для свойства ColSortable значения true. Если в столбце отображается текстовое значение, которое отличается от требуемого порядка сортировки (например, отформатированная дата или столбец состояния), то можно указать другой столбец сортировки с помощью свойства ColSortBy.

Затем сортировка выполняется двумя способами:

1. Автоматически при подключении к источнику данных Dataverse.
2. Вручную при использовании коллекций.

Автоматическая сортировка

Когда набор данных элементов является родным набором данных Dataverse, он будет автоматически отсортирован, если столбец помечен как сортируемый. Если были внесены какие-либо изменения в форму коллекции Dataverse с помощью AddColumn или путем сортировки данных в коллекции, автоматическая сортировка больше не будет работать, и необходимо реализовать ручную сортировку.

Сортировка вручную

Ручная сортировка поддерживается за пределами компонента, чтобы обеспечить поддержку настраиваемого соединителя и сортировку локальной коллекции, когда она не подключена к подключению Dataverse. Столбцы могут быть определены как сортируемые или нет. Когда выбрана сортировка по столбцу, событие OnChange возникает, предоставляя столбец и направление. Затем приложение должно использовать эти значения, чтобы изменить связанную коллекцию на таблицу для обновления отсортированными записями.

1. В коллекции столбцов добавьте сортируемый логический столбец

2. Добавьте имя сортируемого столбца в свойство Columns.ColSortable

3. Внутри события OnChange таблицы добавьте код:

   If(Self.EventName="Sort", 
   UpdateContext({
                   ctxSortCol:Self.SortEventColumn,
                   ctxSortAsc:If(Self.SortEventDirection='PowerCAT.FluentDetailsList.SortEventDirection'.Ascending,true,false)
    })
   );
   

4. Установите свойство Sort Column в значение ctxSortCol

5. Установите для свойства Sort Direction значение:

   If(ctxSortAsc,
       'PowerCAT.FluentDetailsList.CurrentSortDirection'.Ascending,
       'PowerCAT.FluentDetailsList.CurrentSortDirection'.Descending) 
   

6. Настройте коллекцию входных элементов для сортировки с использованием переменных контекста, установленных выше:

   SortByColumns(colData,ctxSortCol,If(ctxSortAsc,SortOrder.Ascending,SortOrder.Descending))
   

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

Разбиение на страницы

Разбиение на страницы обрабатывается внутри компонента, однако кнопки для перемещения назад/вперед должны быть созданы хост-приложением, а события должны отправляться компоненту.

Следующие свойства используются для управления разбиением на страницы:

• PageSize - Определяет, сколько записей следует загружать на страницу.
• PageNumber - Выводит текущую отображаемую страницу.
• HasNextPage - Выводит true, если есть следующая страница.
• HasPreviousPage - Выводит true, если предыдущая страница есть.
• TotalRecords - Выводит общее количество доступных записей.

Кнопки разбиения на страницы могут быть определены следующим образом:

• Загрузить первую страницу
  • OnSelect: UpdateContext({ctxGridEvent:"LoadFirstPage" & Text(Rand())})
  • DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
• Загрузить предыдущую страницу
  • OnSelect: UpdateContext({ctxGridEvent:"LoadPreviousPage" & Text(Rand())})
  • DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
• Загрузить следующую страницу
  • OnSelect: UpdateContext({ctxGridEvent:"LoadNextPage" & Text(Rand())})
  • DisplayMode: If(grid.HasNextPage,DisplayMode.Edit,DisplayMode.Disabled)

Метка количества записей может быть установлена в виде выражения, подобного следующему:

grid.TotalRecords & " record(s)  " & Text(CountRows(grid.SelectedItems)+0) & " selected" 

Показать верхнюю часть следующей страницы

Это реализуется с помощью события "SetFocusOnRow". Если бы у вас было свойство InputEvent, привязанное к ctxGridEvent, в свойстве OnSelect кнопки следующей страницы вы бы использовали: UpdateContext({ctxGridEvent:"LoadNextPageSetFocusOnRow" & Text(Rand())});

Входные события

Для свойства InputEvent можно задать одно из следующих значений:

• SetFocus - Устанавливает фокус на первую строку сетки
• ClearSelection - Отменяет любой выбор и возвращается к выбору по умолчанию.
• SetSelection - Устанавливает выбор, как определено RowSelected столбец.
• LoadNextPage - Загружает следующую страницу, если она есть
• LoadPreviousPage - Загружает предыдущую страницу, если она есть
• LoadFirstPage - Загружает первую страницу

Чтобы гарантировать, что входное событие будет выбрано, оно должно быть дополнено случайным суффиксом. например, SetSelection" & Text(Rand())

Дополнительные сведения см. ниже.

Выбранные элементы и действия со строками

Компонент поддерживает режимы выбора Один, Несколько или Нет.

При выборе элементов свойства SelectedItems и Selected обновляются.

• SelectedItems - Если таблица находится в режиме множественного выбора, она будет содержать одну или несколько записей из коллекции элементов.
• Selected - Если таблица находится в режиме одиночного выбора, она будет содержать выбранные записи.

Когда пользователь вызывает действие строки, либо двойным щелчком, либо нажатием клавиши ввода, либо выбранной строки, вызывается событие OnSelect. Свойство Selected будет содержать ссылку на запись, которая была вызвана. Это событие можно использовать для отображения подробной записи или перехода к другому экрану.

Если свойство RaiseOnRowSelectionChangeEvent включено, когда выбранные строки изменены, событие OnChange вызывается с EventName со значением OnRowSelectionChange. Если приложению необходимо реагировать на выбор одной строки, а не на двойной щелчок строки, событие OnChange может обнаружить это с помощью кода, аналогичного следующему:

If(
    Self.EventName = "OnRowSelectionChange",
        If(!IsBlank(Self.EventRowKey),
        	// Row Selected
        )
);

Очистка текущих выбранных элементов

Для очистки выбранных записей необходимо установить свойство InputEvent на строку, начинающеюся с

например

UpdateContext({ctxTableEvent:"ClearSelection"&Text(Rand())})

Контекстная переменная ctxTableEvent затем может быть привязана к свойству InputEvent.

Задание выбора строк

Если существует сценарий, в котором определенный набор записей должен быть выбран программно, свойство InputEvent может быть установлено на SetSelection или SetFocusOnRowSetSelection в сочетании с установкой свойства RecordSelected в записи.

например, если бы у вас был следующий набор данных:

{RecordKey:1, RecordSelected:true, name:"Row1"}

Чтобы выбрать и выбрать первую строку, вы можете установить InputEvent на "SetFocusOnRowSetSelection"&Text(Rand()) или "SetSelection"&Text(Rand())

Настройка поведения «При изменении»

Добавьте и измените приведенную ниже формулу в свойстве компонента OnChange для настройки определенных действий на основе значения EventName, которое предоставляется компонентом:

• Инициировать события, когда пользователь изменяет выбранную строку: Включите свойство Вызвать событие OnRowSelectionChange в компоненте.
• Настроить поведение ссылки: Добавьте столбцы, для которых значение ColCellType установлено как ссылка.

/* Runs when selected row changes and control property 'Raise OnRowSelection event' is true */
If( Self.EventName = "OnRowSelectionChange",
    Notify( "Row Select " & Self.EventRowKey )
);

/* Runs when a user selects a column with ColCellType set to 'link' */
If( Self.EventName = "CellAction",
    Notify( "Open Link " &  Self.EventColumn & " " & Self.EventRowKey )
)

Ограничения

Этот компонент кода можно использовать только в приложениях на основе холста и настраиваемых страницах.