DetailsList ตัวควบคุม

บทความ
05/01/2023

ตัวควบคุมที่ใช้แสดงชุดข้อมูล

หมายเหตุ

รหัสแหล่งที่มาของส่วนประกอบและข้อมูลเพิ่มเติมใน ที่เก็บส่วนประกอบของโค้ด GitHub

ตัวควบคุม DetailsList

Description

รายการรายละเอียด (DetailsList) เป็นวิธีที่มีประสิทธิภาพในการแสดงรายการที่มีข้อมูลจำนวนมาก และอนุญาตให้บุคคลจัดเรียง จัดกลุ่ม และกรองเนื้อหาได้ ใช้ DetailsList เมื่อความหนาแน่นของข้อมูลเป็นสิ่งสำคัญ

ส่วนประกอบของโค้ด DetailsList อนุญาตให้ใช้ ส่วนประกอบ DetailsList ของ Fluent UI จากภายในแอปพื้นที่ทำงานและหน้าแบบกำหนดเอง

สามารถผูกกับชุดข้อมูล Dataverse หรือคอลเลกชันท้องถิ่นได้
รองรับคอลัมน์ที่กำหนดค่าได้ซึ่งแยกจากข้อมูลเมตาของคอลัมน์ที่ชุดข้อมูลแหล่งที่มาให้มาเพื่อความยืดหยุ่น
ชนิดเซลล์สำหรับเซลล์ลิงก์ ไอคอน ขยาย/ยุบ และข้อความย่อย
สนับสนุนสำหรับการแบ่งหน้า
รองรับการเรียงลำดับโดยใช้การเรียงลำดับ Dataverse หรือคุณสมบัติ SortBy ที่กำหนดค่าได้

คุณสมบัติ

คุณสมบัติที่สำคัญ

คุณสมบัติ	Description
`Items`	ชุดข้อมูลที่มีแถวที่จะแสดง แสดงเป็น `Records` ด้วย ดูตารางคุณสมบัติของรายการด้านล่าง
`Columns`	ชุดข้อมูลที่มีข้อมูลเมตาของตัวเลือกสำหรับคอลัมน์ หากมีการระบุชุดข้อมูลไว้ ระบบจะแทนที่คอลัมน์ที่ให้ไว้ในชุดข้อมูลเรกคอร์ดโดยสมบูรณ์ ดูตารางคุณสมบัติของคอลัมน์ด้านล่าง
`SelectionType`	ชนิดตัวเลือก (ไม่มี ตัวเลือกเดียว หลายตัวเลือก)
`PageSize`	กำหนดจำนวนเรกคอร์ดที่จะโหลดต่อหน้า
`PageNumber`	แสดงผลหน้าปัจจุบันที่แสดง
`HasNextPage`	แสดงผลเป็นจริงหากมีหน้าถัดไป
`HasPreviousPage`	แสดงผลเป็นจริงหากมีหน้าก่อนหน้า
`TotalRecords`	แสดงจำนวนเรกคอร์ดทั้งหมดที่มีอยู่
`CurrentSortColumn`	ชื่อของคอลัมน์ที่จะแสดงตามที่ใช้สำหรับการเรียงลำดับในปัจจุบัน
`CurrentSortDirection`	ทิศทางของคอลัมน์การเรียงลำดับปัจจุบันที่ใช้

`Items`คุณสมบัติ

แอตทริบิวต์เหล่านี้ต้องมีอยู่ในแหล่งข้อมูลเพื่อเปิดใช้งานฟังก์ชันที่เกี่ยวข้อง สูตร Power Fx AddColumns() สามารถใช้เพื่อเพิ่มค่าเหล่านี้ต่อท้ายแหล่งข้อมูลเดิม

คุณสมบัติ	Description
`RecordKey`	(ไม่บังคับ) - ชื่อคอลัมน์หลักเฉพาะ ระบุสิ่งนี้หากคุณต้องการเก็บส่วนที่เลือกไว้เมื่อมีการอัปเดตเรกคอร์ดและเมื่อคุณต้องการให้ `EventRowKey` มีรหัสแทนดัชนีแถวหลังเหตุการณ์ `OnChange` ถูกเปิด
`RecordCanSelect`	(ไม่บังคับ) - ชื่อคอลัมน์ที่มีค่า `boolean` ที่กำหนดว่าสามารถเลือกแถวได้หรือไม่
`RecordSelected`	(ไม่บังคับ) - ชื่อคอลัมน์ที่มีค่า `boolean` ที่กำหนดถ้าแถวถูกเลือกโดยค่าเริ่มต้นและเมื่อตั้งค่า `InputEvent` ให้มี `SetSelection` ดูส่วนบน `Set Selection` ด้านล่าง

`Columns` คุณสมบัติ

คุณสมบัติ	Description
`ColDisplayName`	(จำเป็น) - ระบุชื่อของคอลัมน์ที่จะแสดงในส่วนหัว
`ColName`	(จำเป็น) - ระบุชื่อฟิลด์จริงของคอลัมน์ในคอลเลกชันรายการ
`ColWidth`	(จำเป็น) - ระบุความกว้างคงที่สัมบูรณ์ของคอลัมน์เป็นพิกเซล
`ColCellType`	ชนิดของเซลล์ที่จะแสดงผล ค่าที่เป็นไปได้: `expand`, `tag`, `indicatortag`, `image`, `clickableimage`, `link` สำหรับข้อมูลเพิ่มเติม ดูส่วนต่อไป
`ColHorizontalAlign`	การจัดแนวข้อความของเนื้อหาเซลล์ถ้า `ColCellType` เป็นชนิด `image` หรือ `clickableimage`
`ColVerticalAlign`	การจัดแนวข้อความของเนื้อหาเซลล์ถ้า `ColCellType` เป็นชนิด `image` หรือ `clickableimage`
`ColMultiLine`	เป็นจริงเมื่อข้อความในเซลล์ควรตัดข้อความหากยาวเกินไปเพื่อให้พอดีกับความกว้างที่มีอยู่
`ColResizable`	เป็นจริงเมื่อความกว้างส่วนหัวของคอลัมน์ควรปรับขนาดได้
`ColSortable`	จริงเมื่อคอลัมน์ควรสามารถเรียงลำดับได้ หากชุดข้อมูลรองรับการเรียงลำดับอัตโนมัติผ่านการเชื่อมต่อ Dataverse โดยตรง ข้อมูลจะถูกเรียงลำดับโดยอัตโนมัติ มิฉะนั้น เอาต์พุต `SortEventColumn` และ `SortEventDirection` จะถูกตั้งค่าและต้องใช้ในเรกคอร์ดนิพจน์การผูก Power FX
`ColSortBy`	ชื่อของคอลัมน์ที่จะให้กับเหตุการณ์ `OnChange` เมื่อมีการเรียงลำดับคอลัมน์ ตัวอย่างเช่น หากคุณกำลังเรียงลำดับคอลัมน์วันที่ คุณต้องการเรียงลำดับตามค่าวันที่จริงแทนที่จะเป็นข้อความที่จัดรูปแบบที่แสดงในคอลัมน์
`ColIsBold`	เป็นจริงเมื่อข้อมูลเซลล์ข้อมูลควรเป็นตัวหนา
`ColTagColorColumn`	ถ้าชนิดเซลล์เป็นแท็ก ให้ตั้งค่าเป็นสีพื้นหลังฐานสิบหกของแท็กข้อความ สามารถตั้งค่าเป็น `transparent` ได้ ถ้าชนิดเซลล์ไม่ใช่แท็ก ให้ตั้งค่าเป็นสีฐานสิบหกเพื่อใช้เป็นเซลล์แท็กวงกลมตัวบ่งชี้ หากค่าข้อความว่างเปล่า แท็กจะไม่แสดง
`ColTagBorderColorColumn`	ตั้งค่าเป็นสีฐานสิบหกเพื่อใช้เป็นสีเส้นขอบของแท็กข้อความ สามารถตั้งค่าเป็น `transparent` ได้
`ColHeaderPaddingLeft`	เพิ่มช่องว่างภายในข้อความส่วนหัวของคอลัมน์ (พิกเซล)
`ColShowAsSubTextOf`	การตั้งค่านี้เป็นชื่อของคอลัมน์อื่นจะย้ายคอลัมน์ไปเป็นคอลัมน์ย่อยของคอลัมน์นั้น ดูด้านล่างภายใต้คอลัมน์ข้อความย่อย
`ColPaddingLeft`	เพิ่มช่องว่างภายในที่ด้านซ้ายของเซลล์ย่อย (พิกเซล)
`ColPaddingTop`	เพิ่มช่องว่างภายในที่ด้านบนของเซลล์ย่อย (พิกเซล)
`ColLabelAbove`	ย้ายป้ายชื่อเหนือค่าเซลล์ย่อยถ้าแสดงเป็นคอลัมน์ข้อความย่อย
`ColMultiValueDelimiter`	รวมค่าอาร์เรย์หลายค่าร่วมกับตัวคั่นนี้ ดูด้านล่างในคอลัมน์ที่มีหลายค่า
`ColFirstMultiValueBold`	เมื่อแสดงค่าอาร์เรย์ที่มีหลายค่า รายการแรกจะแสดงเป็นตัวหนา
`ColInlineLabel`	หากตั้งค่าเป็นค่าสตริง จะใช้เพื่อแสดงป้ายชื่อภายในค่าเซลล์ที่อาจแตกต่างไปจากชื่อคอลัมน์ ตัวอย่างเช่น
`ColHideWhenBlank`	เมื่อเป็นจริง ป้ายชื่อและช่องว่างภายในเซลล์ใดๆ จะถูกซ่อนหากค่าของเซลล์ว่างเปล่า
`ColSubTextRow`	เมื่อแสดงหลายเซลล์ในเซลล์ข้อความย่อย ให้ตั้งค่าเป็นดัชนีแถว ศูนย์ระบุแถวเนื้อหาเซลล์หลัก
`ColAriaTextColumn`	คอลัมน์ที่มีคําอธิบาย Aria สำหรับเซลล์ (ตัวอย่างเช่น เซลล์ไอคอน)
`ColCellActionDisabledColumn`	คอลัมน์ที่มีแฟล็กแบบบูลีนเพื่อควบคุมว่าการดำเนินการของเซลล์ (ตัวอย่างเช่น เซลล์ไอคอน) ถูกปิดใช้งานหรือไม่
`ColImageWidth`	ขนาดไอคอน/รูปภาพเป็นพิกเซล
`ColImagePadding`	ช่องว่างภายในรอบๆ เซลล์ไอคอน/รูปภาพ
`ColRowHeader`	กำหนดคอลัมน์เพื่อแสดงขนาดใหญ่กว่าเซลล์อื่นๆ (14 px แทนที่จะเป็น 12 px) โดยปกติจะมีเพียงส่วนหัวของแถวต่อชุดคอลัมน์เท่านั้น

คุณสมบัติ Style

คุณสมบัติ	Description
`Theme`	JSON ของธีม Fluent UI ที่จะใช้ที่สร้างและส่งออกจาก ตัวออกแบบธีม Fluent UI ดูที่ ชุดรูปแบบ สำหรับความช่วยเหลือเกี่ยวกับวิธีกำหนดค่า
`Compact`	จริงเมื่อควรใช้สไตล์กะทัดรัด
`AlternateRowColor`	ค่าฐานสิบหกของสีแถวที่จะใช้กับแถวอื่น
`SelectionAlwaysVisible`	ปุ่มตัวเลือกการเลือกควรปรากฏให้เห็นเสมอแทนที่จะมองเห็นได้เฉพาะเมื่อวางเมาส์เหนือแถว
`AccessibilityLabel`	ป้ายชื่อเพื่อเพิ่มลงในตารางคําอธิบาย Aria

คุณสมบัติ Event

คุณสมบัติ	Description
`RaiseOnRowSelectionChangeEvent`	เหตุการณ์ `OnChange` ถูกยกขึ้นเมื่อแถวถูกเลือก/ไม่ถูกเลือก (ดูด้านล่างนี้)
`InputEvent`	เหตุการณ์อินพุตอย่างน้อยหนึ่งรายการ (ที่สามารถรวมเข้าด้วยกันโดยใช้การต่อสตริง) ค่าที่เป็นไปได้ `SetFocus`, `SetFocusOnRow`, `SetFocusOnHeader`, `ClearSelection`, `SetSelection` ต้องตามด้วยองค์ประกอบสตริงแบบสุ่มเพื่อให้แน่ใจว่ามีการทริกเกอร์เหตุการณ์ เหตุการณ์สามารถรวมได้ ตัวอย่างเช่น `SetFocusClearSelection` จะล้างค่าและตั้งโฟกัสไปพร้อมกัน `SetFocusOnRowSetSelection` จะกำหนดโฟกัสที่แถวและตั้งค่าการเลือกพร้อมกัน
`EventName`	เหตุการณ์เอาท์พุทเมื่อ `OnChange` ถูกทริกเกอร์ ค่าที่เป็นไปได้ - `Sort`, `CellAction`, `OnRowSelectionChange`
`EventColumn`	ชื่อฟิลด์คอลัมน์ของเหตุการณ์เอาต์พุตที่ใช้เมื่อ `CellAction` ถูกเรียกใช้
`EventRowKey`	คอลัมน์เหตุการณ์เอาต์พุตที่มีดัชนีของแถวที่เรียกใช้เหตุการณ์หรือคีย์แถวหากมีการตั้งค่าคุณสมบัติ `RecordKey`
`SortEventColumn`	ชื่อของคอลัมน์ที่เรียกใช้เหตุการณ์การเรียงลำดับ `OnChange`
`SortEventDirection`	ทิศของการเรียงลำดับที่เรียกใช้เหตุการณ์การเรียงลำดับ `OnChange`

การใช้งานพื้นฐาน

เพื่อกำหนดว่าจะแสดงคอลัมน์ใดใน DetailsList กำหนดค่าคุณสมบัติต่อไปนี้ของ DetailsList:

ฟิลด์ เพิ่มฟิลด์ที่คุณต้องการโดยเลือกตัวเลือกแก้ไขในเมนูลอยตัวควบคุมทางด้านขวา (ใช้อินเทอร์เฟซเดียวกันสำหรับการแก้ไข การ์ดข้อมูลที่กำหนดไว้ล่วงหน้า)
คอลัมน์ ระบุการแมปเฉพาะระหว่างคอลัมน์และฟิลด์ในคุณสมบัติ 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: ลิงก์ไปยังรูปภาพภายนอก ตัวอย่างเช่น https://via.placeholder.com/100x70
icon: การใช้หนึ่งใน ไอคอน Fluent UI ตัวอย่างเช่น 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 ให้เป็นจริง หากคอลัมน์แสดงค่าข้อความที่แตกต่างจากลำดับการเรียงลำดับที่ต้องการ (ตัวอย่างเช่น คอลัมน์วันที่ที่จัดรูปแบบหรือสถานะ) คอลัมน์การเรียงลำดับอื่นสามารถระบุได้โดยใช้คุณสมบัติ ColSortBy

การเรียงลำดับจะได้รับการจัดการในสองวิธี:

โดยอัตโนมัติเมื่อเชื่อมต่อกับแหล่งข้อมูล Dataverse
ด้วยตนเองเมื่อใช้คอลเลกชัน

การเรียงลำดับอัตโนมัติ

เมื่อชุดข้อมูลรายการเป็นชุดข้อมูล Dataverse เดิม ระบบจะเรียงลำดับโดยอัตโนมัติหากคอลัมน์ถูกทำเครื่องหมายว่าเรียงลำดับได้ หากมีการเปลี่ยนแปลงรูปร่างของคอลเลกชัน Dataverse โดยใช้ AddColumn หรือการจัดเก็บข้อมูลในคอลเลกชัน การเรียงลำดับอัตโนมัติจะไม่ทำงานอีกต่อไป และการเรียงลำดับด้วยตนเองจะต้องดำเนินการ

การเรียงลำดับด้วยตนเอง

การเรียงลำดับด้วยตนเองได้รับการสนับสนุนภายนอกส่วนประกอบเพื่อให้รองรับตัวเชื่อมต่อแบบกำหนดเองและการเรียงลำดับคอลเลกชันในเครื่องเมื่อไม่ได้เชื่อมต่อกับการเชื่อมต่อ Dataverse คอลัมน์สามารถกำหนดได้ว่าสามารถเรียงลำดับได้หรือไม่ เมื่อเลือกการเรียงลำดับคอลัมน์แล้ว เหตุการณ์ OnChange ถูกยกขึ้นโดยให้คอลัมน์และทิศทาง แอปควรใช้ค่าเหล่านี้เพื่อเปลี่ยนคอลเลกชันที่ผูกไว้กับตารางเพื่ออัปเดตกับเรกคอร์ดที่เรียงลำดับ

ในคอลเลกชันคอลัมน์ ให้เพิ่มคอลัมน์บูลีนที่เรียงลำดับได้
เพิ่มชื่อของคอลัมน์ที่เรียงลำดับได้ไปยังคุณสมบัติ Columns.ColSortable

ภายในเหตุการณ์ OnChange ของตาราง เพิ่มรหัส:

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

ตั้งค่าคุณสมบัติ Sort Column เป็น ctxSortCol

ตั้งค่าคุณสมบัติ Sort Direction เป็น:

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

ตั้งค่าคอลเลกชันรายการอินพุตเพื่อเรียงลำดับโดยใช้ตัวแปรบริบทที่ตั้งไว้ด้านบน:
```
SortByColumns(colData,ctxSortCol,If(ctxSortAsc,SortOrder.Ascending,SortOrder.Descending))
```

เมื่อเหตุการณ์ OnChange เริ่มทำงานหลังจากที่ผู้ใช้เลือกส่วนหัวของคอลัมน์เพื่อเปลี่ยนการเรียงลำดับ ตัวแปรบริบทการเรียงลำดับจะได้รับการอัปเดต โดยใช้ข้อมูลการเรียงลำดับใหม่ที่มีให้ ซึ่งทำให้ชุดข้อมูลอินพุตถูกเรียงลำดับใหม่ และตารางจะได้รับการอัปเดตตามนั้น

การแบ่งหน้า

ส่วนประกอบจะจัดการการแบ่งหน้าภายใน อย่างไรก็ตาม ต้องสร้างปุ่มสำหรับเลื่อนกลับ/ไปข้างหน้าโดยแอปโฮสต์ และกิจกรรมต่างๆ ที่ส่งไปยังส่วนประกอบ

คุณสมบัติต่อไปนี้ใช้เพื่อควบคุมการแบ่งหน้า:

PageSize - กำหนดจำนวนเรกคอร์ดที่จะโหลดต่อหน้า
PageNumber - แสดงผลหน้าปัจจุบันที่แสดง
HasNextPage - แสดงผลเป็นจริงหากมีหน้าถัดไป
HasPreviousPage - แสดงผลเป็นจริงหากมีหน้าก่อนหน้า
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 - หากตารางอยู่ในโหมด การเลือกเดียว จะมีเรกคอร์ดที่เลือกไว้

เมื่อผู้ใช้เรียกใช้การทำงานของแถว ไม่ว่าจะโดยคลิกสองครั้งหรือกด 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 เป็น "SetFocusOnRowSetSelection"&Text(Rand()) หรือ "SetSelection"&Text(Rand())

กำหนดค่าลักษณะ "เมื่อเปลี่ยนแปลง"

เพิ่มและแก้ไขสูตรต่อไปนี้ในคุณสมบัติ OnChange ของส่วนประกอบเพื่อกำหนดค่าการดำเนินการเฉพาะตาม EventName ที่จัดทำโดยส่วนประกอบ:

ทริกเกอร์เหตุการณ์เมื่อผู้ใช้เปลี่ยนแถวที่เลือก: เปิดใช้งานคุณสมบัติ Raise OnRowSelectionChange event ในส่วนประกอบ
กำหนดค่าลักษณะการทำงานของลิงก์: เพิ่มคอลัมน์ด้วยค่า 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 )
)

ข้อจำกัด

ส่วนประกอบโค้ดนี้ใช้ได้เฉพาะในแอปพื้นที่ทำงานและหน้าที่กำหนดเองเท่านั้น

แชร์ผ่าน

DetailsList ตัวควบคุม

Description

คุณสมบัติ

คุณสมบัติที่สำคัญ

`Items`คุณสมบัติ

`Columns` คุณสมบัติ

คุณสมบัติ Style

คุณสมบัติ Event

การใช้งานพื้นฐาน

คอลัมน์ข้อความย่อย

ชนิดเซลล์

ขยาย/ยุบ

แท็กและแท็กตัวบ่งชี้

รูปภาพและรูปภาพที่คลิกได้

ลิงก์

คอลัมน์หลายค่า

พฤติกรรม

เรียงลำดับเหตุการณ์

การเรียงลำดับอัตโนมัติ

การเรียงลำดับด้วยตนเอง

การแบ่งหน้า

แสดงด้านบนของหน้าถัดไป

เหตุการณ์อินพุต

รายการที่เลือกและการดำเนินการแถว

การล้างรายการที่เลือกอยู่

การเลือกชุดแถว

กำหนดค่าลักษณะ "เมื่อเปลี่ยนแปลง"

ข้อจำกัด

คำติชม

คำติชม

แหล่งทรัพยากรเพิ่มเติม

แชร์ผ่าน

DetailsList ตัวควบคุม

Description

คุณสมบัติ

คุณสมบัติที่สำคัญ

Itemsคุณสมบัติ

Columns คุณสมบัติ

คุณสมบัติ Style

คุณสมบัติ Event

การใช้งานพื้นฐาน

คอลัมน์ข้อความย่อย

ชนิดเซลล์

ขยาย/ยุบ

แท็กและแท็กตัวบ่งชี้

รูปภาพและรูปภาพที่คลิกได้

ลิงก์

คอลัมน์หลายค่า

พฤติกรรม

เรียงลำดับเหตุการณ์

การเรียงลำดับอัตโนมัติ

การเรียงลำดับด้วยตนเอง

การแบ่งหน้า

แสดงด้านบนของหน้าถัดไป

เหตุการณ์อินพุต

รายการที่เลือกและการดำเนินการแถว

การล้างรายการที่เลือกอยู่

การเลือกชุดแถว

กำหนดค่าลักษณะ "เมื่อเปลี่ยนแปลง"

ข้อจำกัด

คำติชม

คำติชม

แหล่งทรัพยากรเพิ่มเติม

`Items`คุณสมบัติ

`Columns` คุณสมบัติ