DetailsList menguasai

Kontrol yang digunakan untuk menampilkan rangkaian data.

Description

Daftar rincian (DetailsList) adalah cara canggih untuk menampilkan kumpulan item yang kaya informasi dan memungkinkan orang mengurutkan, mengelompokkan, dan memfilter konten. Gunakan DetailsList bila kepadatan informasinya penting.

Komponen kode DetailsList memungkinkan menggunakan komponen Fluent UI DetailsList dari aplikasi kanvas dalam dan halaman kustom.

• Dapat diikat ke himpunan data Dataverse atau kumpulan lokal.
• Mendukung kolom yang dapat dikonfigurasi terpisah ke metadata kolom yang disediakan oleh himpunan data sumber untuk fleksibilitas.
• Jenis sel untuk tautan, ikon, perluas/ciutkan, dan sel sub teks.
• Dukungan halaman.
• Dukungan untuk mengurutkan menggunakan properti pengurutan Dataverse atau SortBy yang dapat dikonfigurasi.

Properti

Properti kunci

Items Properti

Atribut ini harus tersedia di sumber data untuk mengaktifkan fungsi terkait. Rumus Power Fx AddColumns() dapat digunakan untuk menambahkan nilai ini ke sumber data.

Columns Properti

Properti	Description
ColDisplayName	(Wajib) - Memberikan nama kolom untuk ditampilkan di header.
ColName	(Wajib) - Memberikan nama bidang aktual kolom dalam kumpulan item.
ColWidth	(wajib) - Memberikan lebar tetap absolut kolom dalam piksel.
ColCellType	Jenis sel untuk ditampilkan. Nilai yang mungkin: expand, tag, indicatortag, image, clickableimage, link. Untuk informasi selengkapnya, lihat bagian berikutnya.
ColHorizontalAlign	Kesejajaran konten sel jika ColCellType berjenis image atau clickableimage.
ColVerticalAlign	Kesejajaran konten sel jika ColCellType berjenis image atau clickableimage.
ColMultiLine	True bila teks dalam teks sel harus dibungkus jika terlalu panjang untuk sesuai dengan lebar yang tersedia.
ColResizable	True bila lebar header kolom harus dapat diubah ukurannya.
ColSortable	Benar ketika kolom harus dapat diurutkan. Jika himpunan data mendukung pengurutan otomatis melalui sambungan Dataverse langsung, data akan secara otomatis diurutkan. Jika tidak, maka output SortEventColumn dan SortEventDirection output akan diatur dan harus digunakan dalam ekspresi ikatan power FX rekaman.
ColSortBy	Nama kolom untuk diberikan ke aktivitas OnChange saat kolom diurutkan. Misalnya, jika Anda mengurutkan kolom tanggal, Anda ingin mengurutkan nilai tanggal aktual daripada teks yang diformat yang ditampilkan di kolom.
ColIsBold	True ketika data sel data harus tebal
ColTagColorColumn	Jika jenis sel adalah tag, atur ke warna latar belakang hex dari tag teks. Dapat diatur ke transparent. Jika jenis sel bukan tag, atur ke warna hex untuk digunakan sebagai sel tag lingkaran indikator. Jika nilai teks kosong, tag tidak ditampilkan.
ColTagBorderColorColumn	Atur ke warna hex untuk digunakan sebagai warna batas tag teks. Dapat diatur ke transparent.
ColHeaderPaddingLeft	Menambahkan padding ke teks header kolom (piksel)
ColShowAsSubTextOf	Pengaturan ini ke nama kolom lain akan memindahkan kolom untuk menjadi anak dari kolom tersebut. Lihat di bawah dalam kolom Sub Teks.
ColPaddingLeft	Menambahkan padding di kiri sel anak (piksel)
ColPaddingTop	Menambahkan padding di atas sel anak (piksel)
ColLabelAbove	Memindahkan label di atas nilai sel turunan jika ditampilkan sebagai kolom Sub Teks.
ColMultiValueDelimiter	Menggabungkan nilai larik multi-nilai bersama dengan pemisah ini. Lihat di bawah ini dalam kolom multi-nilai.
ColFirstMultiValueBold	Bila menampilkan nilai larik multi-nilai, item pertama ditampilkan sebagai tebal.
ColInlineLabel	Jika diatur ke nilai string, maka ini digunakan untuk menampilkan label di dalam nilai sel yang dapat berbeda dengan nama kolom. misalnya
ColHideWhenBlank	Ketika true, label & padding sebaris sel apa pun akan disembunyikan jika nilai sel kosong.
ColSubTextRow	Saat menampilkan beberapa sel di sub sel teks, atur ke indeks baris. Nol menunjukkan baris konten sel utama.
ColAriaTextColumn	Kolom yang berisi deskripsi aria untuk sel (misalnya, sel ikon).
ColCellActionDisabledColumn	Kolom yang berisi bendera Boolean untuk mengontrol apakah tindakan sel (misalnya, sel ikon) dinonaktifkan.
ColImageWidth	Ukuran ikon/gambar dalam piksel.
ColImagePadding	Padding di sekitar ikon/sel gambar.
ColRowHeader	Menentukan kolom yang akan dirender lebih besar dari sel lain (14 px, bukan 12 px). Biasanya hanya akan ada satu Header Baris per rangkaian kolom.

Properti gaya

Properti kejadian

Penggunaan dasar

Untuk menentukan kolom yang akan ditampilkan di DetailsList, konfigurasikan properti berikut dari DetailsList:

1. Bidang. Tambahkan bidang yang Anda inginkan dengan memilih pilihan Edit di menu flyout kontrol di kanan (antarmuka yang sama digunakan untuk memodifikasi kartu data yang telah ditetapkan sebelumnya).

2. Kolom. Berikan pemetaan khusus antara kolom dan bidang di properti Columns.

Contoh:

Pemetaan ke tabel sistem Akun Dataverse, dengan rumus berikut:

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

Kolom sub teks

Properti kolom ColShowAsSubTextOf mendefinisikan kolom sebagaimana ditunjukkan di bawah nilai di kolom lain. Informasi ini dapat digunakan untuk menampilkan informasi kedua dan konten yang dapat diperluas (lihat di bawah).

Jika Anda memiliki kumpulan yang didefinisikan sebagai:

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

Anda dapat menentukan kolom untuk menjadi:

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

Hasilnya akan menjadi tabel yang terlihat seperti berikut:

Jenis Sel

Properti kolom ColCellType menerima nilai berikut: expand, tag, image, indicatortag, clickableimage, link

Perluas/Ciut

Jika baris 'Sub Teks' harus memiliki ikon perluasan/ciutkan, kolom tambahan dapat ditambahkan ke himpunan data kolom, dan definisi ColCellType kolom juga ditetapkan expand :

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

Dengan asumsi bahwa properti RecordKey diatur ke kolom index , maka aktivitas OnChange dapat berisi berikut untuk memperluas/menciutkan baris:

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

Pencarian ini untuk baris yang telah mengaktifkan Tindakan Sel menggunakan indeks (jika RecordKey tidak diatur, maka EventRowKey akan berisi nomor baris), lalu mengganti nilai perluasan.

Langkah ini akan memberikan hasil berikut:

Tag & Tag Indikator

Menggunakan jenis sel atau tag Anda indicatortag dapat membuat tag berwarna sebaris untuk menampilkan konten sel.

• tag - Ini akan menampilkan kotak tag dengan latar belakang dan batas berwarna
• tagindicator - Menampilkan kotak tag dengan indikator lingkaran berwarna

Warna dapat bervariasi menurut baris, sehingga himpunan data metadata kolom hanya menyediakan nama kolom yang menyimpan warna untuk tag.

Pertimbangkan himpunan data:

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)"
    }
);

Anda kemudian dapat menambahkan metadata kolom untuk menambahkan dua kolom, yang ditampilkan sebagai tag dan lainnya sebagai tagindicator - masing-masing menggunakan kolom TagColor dan TagBorderColor untuk menentukan warna:

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

Langkah ini akan memberikan hasil berikut:

Gambar & Gambar yang Dapat Diklik

Menggunakan jenis sel image atau clickableimage, Anda dapat mengkonfigurasi gambar inline yang dapat dipilih secara opsional untuk meningkatkan tindakan OnChange.

Konten gambar dapat didefinisikan dengan awalan dengan:

• https: tautkan ke gambar eksternal. misalnya https://via.placeholder.com/100x70
• icon: Menggunakan salah satu ikon Fluent UI misalnya, icon:SkypeCircleCheck
• data: Menggunakan data gambar svg sebaris: misalnya, data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%2020...

Jika gambar dari jenis clickableimage, aktivitas OnChange akan muncul bila ikon dipilih, dengan EvenName dari CellAction, EventColumn asalkan nama kolom gambar dan EventRowKey adalah RecordKey dari baris (jika tidak RecordKey, diatur, maka EventRowKey gambar akan berisi nomor baris).

Misalnya, Pertimbangkan data baris:

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

dan metadata kolom:

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

Hal ini akan memberikan hasil:

Untuk clickableimage kolom,event OnChange kemudian dapat menangani ketika pengguna memilih (mouse atau keyboard) dan ikon (dengan asumsi bahwa itu tidak dinonaktifkan) menggunakan:

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

EventRowKey akan diisi dengan nilai kolom yang didefinisikan sebagai properti RecordKey.

Link

Kolom dapat ditampilkan sebagai tautan, yang akan menimbulkan aktivitas OnChange bila tautan dipilih dengan cara yang sama seperti cara kerja gambar yang dapat diklik seperti dijelaskan di atas.

Metadata kolom untuk tautan dikonfigurasi sebagai berikut:

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

Hal ini akan mengakibatkan konten sel ditampilkan sebagai:

Aktivitas OnChange kembali diklik saat tautan diklik, dengan EventColumn menjadi nama kolom yang berisi tautan dan EventRowKey diisi dengan nilai kolom yang didefinisikan sebagai properti RecordKey.

Kolom multi-nilai

Jika nilai kolom dapat memiliki beberapa nilai dengan mengaturnya ke Tabel/Kumpulan. Ini selanjutnya akan menampilkan nilai sebagai beberapa nilai sel. misalnya:

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

Metadata kolom kemudian dapat menjadi:

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

Hal ini akan mengakibatkan tabel menampilkan:

Perilaku

Aktivitas urutkan

Kolom didefinisikan sebagai dapat diurutkan dengan mengatur properti ColSortable ke benar. Jika kolom memperlihatkan nilai teks yang berbeda dengan urutan pengurutan yang diperlukan (misalnya, kolom tanggal atau status yang diformat), maka kolom pengurutan yang berbeda dapat ditentukan menggunakan ColSortBy properti.

Selanjutnya, pengurutan akan ditangani dengan dua cara:

1. Secara otomatis saat tersambung ke sumber data Dataverse.
2. Secara manual saat menggunakan kumpulan.

Pengurutan Otomatis

Bila dataset Item adalah dataset asli Dataverse , maka akan secara otomatis diurutkan jika kolom ditandai sebagai dapat diurutkan. Jika ada perubahan yang dibuat pada bentuk kumpulan Dataverse menggunakan AddColumn, atau dengan menyimpan data dalam kumpulan, pengurutan otomatis tidak akan lagi berfungsi, dan pengurutan manual harus diimplementasikan.

Pengurutan manual

Pengurutan Manual didukung di luar komponen untuk memungkinkan dukungan konektor kustom dan pengurutan kumpulan lokal bila tidak tersambung ke sambungan Dataverse. Kolom dapat didefinisikan sebagai dapat diurutkan atau tidak. Bila pengurutan kolom dipilih, aktivitas OnChange terjadi yang memberikan kolom dan arah. Selanjutnya aplikasi harus menggunakan nilai ini untuk mengubah kumpulan terikat ke tabel untuk memperbarui dengan rekaman yang diurutkan.

1. Pada kumpulan Kolom, tambahkan kolom Boolean yang dapat diurutkan

2. Tambahkan nama kolom yang dapat diurutkan ke properti Columns.ColSortable

3. Di dalam aktivitas OnChange Tabel, tambahkan kode:

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

4. Atur properti Sort Column ke ctxSortCol

5. Atur properti Sort Direction menjadi:

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

6. Atur kumpulan item input untuk diurutkan menggunakan variabel konteks yang diatur di atas:

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

Ketika peristiwa OnChange diaktifkan setelah pengguna memilih header kolom untuk mengubah pengurutan, variabel konteks pengurutan diperbarui, menggunakan informasi pengurutan baru yang disediakan, yang menyebabkan himpunan data input diurutkan ulang dan tabel diperbarui sesuai dengan itu.

Halaman

Halaman ditangani secara internal oleh komponen, namun tombol untuk kembali/meneruskan harus dibuat oleh aplikasi hosting, dan aktivitas yang dikirim ke komponen.

Properti berikut digunakan untuk mengontrol halaman:

• PageSize - Menentukan berapa banyak catatan yang akan dimuat per halaman.
• PageNumber - Menampilkan halaman saat ini yang ditampilkan.
• HasNextPage - Keluaran true jika ada halaman berikutnya.
• HasPreviousPage - Keluaran true jika ada halaman sebelumnya.
• TotalRecords - Menghasilkan jumlah total catatan yang tersedia.

Tombol halaman kemudian dapat didefinisikan sebagai berikut:

• Muat Halaman Pertama
  • OnSelect: UpdateContext({ctxGridEvent:"LoadFirstPage" & Text(Rand())})
  • DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
• Muat Halaman Sebelumnya
  • OnSelect: UpdateContext({ctxGridEvent:"LoadPreviousPage" & Text(Rand())})
  • DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
• Muat Halaman Berikutnya
  • OnSelect: UpdateContext({ctxGridEvent:"LoadNextPage" & Text(Rand())})
  • DisplayMode: If(grid.HasNextPage,DisplayMode.Edit,DisplayMode.Disabled)

Jumlah label rekaman dapat diatur ke ekspresi yang mirip dengan:

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

Tampilkan bagian atas halaman berikutnya

Ini diimplementasikan menggunakan peristiwa 'SetFocusOnRow'. Jika Anda memiliki properti InputEvent yang terikat, ctxGridEvent pada properti OnSelect tombol halaman berikutnya, Anda akan menggunakan: UpdateContext({ctxGridEvent:"LoadNextPageSetFocusOnRow" & Text(Rand())});

Aktivitas Input

Properti InputEvent dapat diatur ke salah satu atau lebih yang berikut:

• SetFocus - Menetapkan fokus pada baris pertama grid
• ClearSelection - Menghapus pilihan apa pun, dan mengatur kembali ke pilihan default.
• SetSelection - Menetapkan pilihan seperti yang ditentukan oleh RowSelected kolom.
• LoadNextPage - Memuat halaman berikutnya jika ada
• LoadPreviousPage - Memuat halaman sebelumnya jika ada
• LoadFirstPage - Memuat halaman pertama

Untuk memastikan bahwa aktivitas input dipilih, aktivitas tersebut harus tidak memiliki nilai acak. misalnya SetSelection" & Text(Rand())

Lihat di bawah ini untuk lebih jelasnya.

Tindakan Item dan Baris yang Dipilih

Komponen mendukung mode pemilihan Tunggal, Beberapa atau Tidak Ada.

Saat memilih item, dan properti SelectedItems dan Selected akan diperbarui.

• SelectedItems - Jika tabel dalam mode Beberapa pilihan, ini akan berisi satu atau beberapa rekaman dari koleksi Item.
• Selected - Jika tabel dalam mode Pilihan tunggal, ini akan berisi catatan yang dipilih.

Saat pengguna mengaktifkan tindakan baris, baik dengan mengeklik dua kali atau menekan enter atau baris yang dipilih, aktivitas OnSelect akan diaktifkan. Properti Selected akan berisi referensi ke rekaman yang telah diaktifkan. Aktivitas ini dapat digunakan untuk menampilkan rekaman rinci atau menavigasi ke layar lain.

Jika RaiseOnRowSelectionChangeEvent properti diaktifkan, ketika baris yang dipilih diubah, OnChange peristiwa dinaikkan dengan diatur EventName ke OnRowSelectionChange. Jika aplikasi perlu merespons satu pilihan baris, bukan klik dua kali baris, aplikasi OnChange dapat mendeteksi ini menggunakan kode yang mirip dengan:

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

Mengosongkan item yang saat ini dipilih

Untuk mengosongkan rekaman yang dipilih, Anda harus mengatur properti InputEvent ke string yang dimulai dengan

misalnya

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

Selanjutnya, variabel konteks ctxTableEvent dapat diikat ke properti InputEvent.

Atur Pilihan baris

Jika ada skenario di mana sekumpulan rekaman tertentu harus dipilih secara terprogram, InputEvent properti dapat diatur ke atau SetSelection dikombinasikan SetFocusOnRowSetSelection dengan pengaturan RecordSelected properti pada rekaman.

Misalnya Jika Anda memiliki himpunan data sebagai berikut:

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

Untuk memilih dan memilih baris pertama, Anda dapat mengatur menjadi InputEvent atau "SetFocusOnRowSetSelection"&Text(Rand()) "SetSelection"&Text(Rand())

Mengkonfigurasi perilaku "On Change"

Tambahkan dan modifikasi rumus berikut di properti OnChange komponen untuk mengkonfigurasi tindakan tertentu berdasarkan EventName yang diberikan oleh komponen:

• Memicu aktivitas saat pengguna mengubah baris yang dipilih: Aktifkan aktivitas Raise OnRowSelectionChange properti di komponen.
• Konfigurasikan perilaku tautan: Tambah kolom dengan nilai ColCellType yang diatur ke tautan.

/* 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 )
)

Pembatasan

Komponen kode ini hanya dapat digunakan pada aplikasi kanvas dan halaman kustom.