DetailsList контроль

Елемент керування, що використовується для відображення набору даних.

Опис

Список відомостей (DetailsList) — це надійний спосіб відображення інформаційно-насиченої колекції елементів, а також можливість сортувати, групувати та фільтрувати вміст. Використовуйте DetailsList, якщо щільність потоку інформації є критичною.

Компонент коду DetailsList дає змогу використовувати компонент Fluent UI DetailsList з компонованих програм та настроюваних сторінок.

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

Властивості

Ключові властивості

Items Властивості

Ці атрибути мають бути доступними в джерелі даних, щоб увімкнути пов’язані функціональні можливості. Щоб додати ці значення до вихідного джерела даних, можна використовувати формулу Power Fx AddColumns().

Columns Властивості

Властивість	Опис
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	Стовпець, який містить опис арії для клітинок (наприклад, осередків значків).
ColCellActionDisabledColumn	Стовпець, який містить логічний прапорець для керування вимкненням дії клітинки (наприклад, клітинок піктограм).
ColImageWidth	Розмір піктограми/зображення в пікселях.
ColImagePadding	Заповнення навколо клітинки піктограми/зображення.
ColRowHeader	Визначає стовпець, який буде відображатися більшим за інші комірки (14 px, а не 12 px). Для кожного набору стовпців зазвичай буде лише один заголовок рядка.

Властивості стилю

Властивості події

Базове використання

Щоб визначити, які стовпці повинні відображатися в 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)"
    }
);

Потім можна додати метадані стовпця, щоб додати два стовпці: один, який відображатиметься як тег, а інший, який — як індикаторний тег, і обидва з них використовують 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: Tпов’язане із зовнішнім зображенням. наприклад 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 кнопки OnSelect на наступній сторінці, ви б використовували: UpdateContext({ctxGridEvent:"LoadNextPageSetFocusOnRow" & Text(Rand())});

Події введення

Для властивості InputEvent можна встановити одне або кілька з наведених нижче значень:

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

Щоб гарантувати вибір події введення, для неї потрібно вказати випадкове значення. наприклад SetSelection" & Text(Rand())

Див. нижче для детальної інформації.

Вибрані елементи та дії з рядками

Компонент підтримує такі режими вибору: Один, Кілька або Немає.

Під час вибору елементів оновлюються властивості SelectedItems і Selected.

• SelectedItems - Якщо таблиця знаходиться в режимі множинного вибору, вона буде містити один або кілька записів з колекції Items.
• Selected - Якщо таблиця знаходиться в режимі Єдиного вибору, вона буде містити вибрані записи.

Коли користувач викликає дію рядка чи то подвійним клацанням, чи то натисканням клавіші Enter або вибраного рядка, буде ініційовано подію 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 be "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 )
)

Обмеження

Цей компонент коду можна використовувати лише в компонованих програмах і настроюваних сторінках.