ตัวควบคุม DetailsList

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

Description

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

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

• สามารถผูกกับชุดข้อมูล 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	เป็นจริงหากข้อความในเซลล์ควรตัดบรรทัดเมื่อยาวเกินกว่าจะพอดีกับความกว้างที่มีอยู่
ColResizable	เป็นจริงเมื่อความกว้างส่วนหัวของคอลัมน์ควรปรับขนาดได้
ColSortable	จริงเมื่อคอลัมน์ควรสามารถเรียงลำดับได้ หากชุดข้อมูลรองรับการเรียงลำดับอัตโนมัติผ่านการเชื่อมต่อ Dataverse โดยตรง ข้อมูลจะถูกเรียงลำดับโดยอัตโนมัติ มิฉะนั้น เอาต์พุต SortEventColumn และ SortEventDirection จะถูกตั้งค่าและต้องใช้ในเรกคอร์ดนิพจน์การผูก Power FX
ColSortBy	ชื่อของคอลัมน์ที่จะให้กับเหตุการณ์ OnChange เมื่อมีการเรียงลำดับคอลัมน์ ตัวอย่างเช่น หากคุณกำลังเรียงลำดับคอลัมน์วันที่ คุณต้องการเรียงลำดับตามค่าวันที่จริงแทนที่จะเป็นข้อความที่จัดรูปแบบที่แสดงในคอลัมน์
ColIsBold	เป็นจริงเมื่อข้อมูลในเซลล์ข้อมูลควรแสดงเป็นตัวหนา
ColTagColorColumn	หากชนิดของเซลล์เป็นแท็ก ให้ตั้งค่าเป็นค่าสีพื้นหลังแบบฐานสิบหกของแท็กข้อความ สามารถตั้งค่าเป็น transparent ได้ หากประเภทเซลล์ไม่ใช่แท็ก ให้ตั้งค่าเป็นค่าสีฐานสิบหกเพื่อใช้เป็นเซลล์แท็กแบบวงกลมตัวบ่งชี้ หากค่าข้อความว่างเปล่า แท็กจะไม่แสดง
ColTagBorderColorColumn	ตั้งค่าเป็นค่าสีฐานสิบหกสำหรับใช้เป็นสีเส้นขอบของแท็กข้อความ สามารถตั้งค่าเป็น transparent ได้
ColHeaderPaddingLeft	เพิ่มช่องว่างภายในข้อความส่วนหัวของคอลัมน์ (พิกเซล)
ColShowAsSubTextOf	การตั้งค่านี้เป็นชื่อของคอลัมน์อื่นจะย้ายคอลัมน์ไปเป็นคอลัมน์ย่อยของคอลัมน์นั้น ดูด้านล่างภายใต้คอลัมน์ข้อความย่อย
ColPaddingLeft	เพิ่มช่องว่างภายในด้านซ้ายของเซลล์ย่อย (พิกเซล)
ColPaddingTop	เพิ่มช่องว่างภายในที่ด้านบนของเซลล์ย่อย (พิกเซล)
ColLabelAbove	ย้ายป้ายชื่อเหนือค่าเซลล์ย่อยถ้าแสดงเป็นคอลัมน์ข้อความย่อย
ColMultiValueDelimiter	รวมค่าต่างๆ ในอาร์เรย์แบบหลายค่าโดยใช้ตัวคั่นนี้ ดูด้านล่างในคอลัมน์ที่มีหลายค่า
ColFirstMultiValueBold	เมื่อแสดงค่าอาร์เรย์ที่มีหลายค่า รายการแรกจะแสดงเป็นตัวหนา
ColInlineLabel	หากตั้งค่าเป็นค่าสตริง จะใช้เพื่อแสดงป้ายชื่อภายในค่าเซลล์ที่อาจแตกต่างไปจากชื่อคอลัมน์ ตัวอย่างเช่น
ColHideWhenBlank	เมื่อเป็นจริง ป้ายชื่อและช่องว่างภายในเซลล์ใดๆ จะถูกซ่อนหากค่าของเซลล์ว่างเปล่า
ColSubTextRow	เมื่อแสดงหลายเซลล์ในเซลล์ข้อความย่อย ให้ตั้งค่าเป็นดัชนีแถว ค่า 0 หมายถึงแถวเนื้อหาหลักของเซลล์
ColAriaTextColumn	คอลัมน์ที่มีคําอธิบาย Aria สำหรับเซลล์ (ตัวอย่างเช่น เซลล์ไอคอน)
ColCellActionDisabledColumn	คอลัมน์ที่มีแฟล็กแบบบูลีนเพื่อควบคุมว่าการดำเนินการของเซลล์ (ตัวอย่างเช่น เซลล์ไอคอน) ถูกปิดใช้งานหรือไม่
ColImageWidth	ขนาดไอคอน/รูปภาพเป็นพิกเซล
ColImagePadding	ช่องว่างภายในรอบๆ เซลล์ไอคอน/รูปภาพ
ColRowHeader	กำหนดคอลัมน์เพื่อแสดงขนาดใหญ่กว่าเซลล์อื่นๆ (14 px แทนที่จะเป็น 12 px) โดยปกติจะมีเพียงส่วนหัวของแถวต่อชุดคอลัมน์เท่านั้น

คุณสมบัติ Style

คุณสมบัติของเหตุการณ์

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

เพื่อกำหนดว่าจะแสดงคอลัมน์ใดใน 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: ลิงก์ไปยังรูปภาพภายนอก ตัวอย่างเช่น 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

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

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 - แสดงผลเป็นจริงหากมีหน้าถัดไป
• 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 )
)

ข้อจำกัด

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