การใช้งาน Property AllItemsCount และการตั้งค่า Navigation ใน Gallery ของ Power Apps

ใน Power Apps เรามักใช้ Gallery เพื่อแสดงรายการข้อมูลจำนวนมาก เช่น ข้อมูลจาก SharePoint List, Dataverse หรือแหล่งข้อมูลอื่นๆ อย่างไรก็ตาม การแสดงข้อมูลทั้งหมดพร้อมกันใน Gallery อาจทำให้ระบบโหลดช้าหรือใช้งานยาก Power Apps จึงมีฟีเจอร์ Navigation เพื่อช่วยควบคุมการโหลดข้อมูลทีละส่วน

นอกจากนี้ยังมี Property อย่าง AllItemsCount ซึ่งใช้ แสดงจำนวนรายการที่ถูกโหลดเข้ามาใน Gallery ณ ขณะนั้น โดยไม่ได้แสดงจำนวนรายการทั้งหมดใน Data Source และบางครั้งค่า AllItemsCount อาจไม่ตรงกับจำนวนรายการที่มองเห็นในหน้าจอ

ในตัวอย่างนี้ เราใช้ Gallery ชื่อ galNetFlixTitles ที่ดึงข้อมูลจาก SharePoint List จำนวน 6,099 รายการ แต่ในแต่ละหน้าจอจะแสดงเพียง 10 รายการแรกเท่านั้น ซึ่งเป็นการแสดงผลปกติของ Gallery ตามขนาดที่กำหนด

ในบทความนี้ เราจะอธิบายการทำงานของ Property AllItemsCount และการตั้งค่า Navigation พร้อมรูปประกอบเพื่อให้เข้าใจได้ง่ายขึ้น

การตั้งค่าของ Gallery และ Property ที่เกี่ยวข้อง

• การตั้งค่า Navigation  ใน Gallery galNetFlixTitles (ดูภาพประกอบ หมายเลข 1) มีการตั้งค่าที่สำคัญดังนี้
  • ปิด Scrollbar (Show scrollbar = Off) เพื่อไม่ให้แถบเลื่อนแสดง
  • เปิด Navigation (Show navigation = On) พร้อมปุ่มเลื่อนขึ้น-ลง
  • กำหนดค่า Navigation step = 500 ซึ่งหมายความว่าเมื่อคลิกปุ่มลูกศรใน Navigation จะโหลดข้อมูลเพิ่มทีละ 500 รายการ

• การใช้ Property AllItemsCount

Property AllItemsCount ถูกนำมาแสดงใน Text Label (ดูภาพประกอบ หมายเลข 2) โดยมีการตั้งค่า Text ดังนี้ “Loaded: ” & galNetFlixTitles.AllItemsCount

• AllItemsCount: แสดงจำนวนรายการที่ถูกโหลดเข้ามาใน Gallery ณ เวลานั้น ไม่ใช่จำนวนรายการทั้งหมดใน Data Source หรือจำนวนที่แสดงบนหน้าจอ

การทำงานของ AllItemsCount และ Navigation พร้อมอธิบายภาพ

หมายเลข  2: การเริ่มต้นโหลด Gallery

• เมื่อโหลด Gallery ครั้งแรก:
  • ระบบโหลดรายการล่วงหน้า 100 รายการ ซึ่งแสดงใน Text Label ว่า Loaded: 100
  • แต่ Gallery บนหน้าจอจะแสดงเพียง 10 รายการแรก ตามขนาด Template ของ Gallery

หมายเลข 3: การคลิกปุ่ม Navigate ลงครั้งที่ 1

• เมื่อคลิกปุ่ม Navigate ลง:
  • Gallery จะโหลดรายการเพิ่มอีก 500 รายการ
  • AllItemsCount จะเพิ่มเป็น 600 (100 เดิม + 500 เพิ่มเติม)
  • อย่างไรก็ตาม บนหน้าจอจะแสดงเฉพาะ 510 รายการแรก

หมายเลข 4: การคลิกปุ่ม Navigate ลงครั้งที่ 2

• เมื่อคลิกปุ่ม Navigate ลงครั้งที่ 2:
  • ระบบจะโหลดรายการเพิ่มอีก 500 รายการ
  • AllItemsCount จะเพิ่มเป็น 1,100 รายการ
  • อย่างไรก็ตาม บนหน้าจอจะแสดงเฉพาะ 1010 รายการแรก

หมายเลข 5: การคลิกปุ่ม Navigate เรื่อยๆ ลงจนสุด

• เมื่อคลิกปุ่ม Navigate ลงไปเรื่อยๆ:
  • ระบบจะโหลดข้อมูลจนเต็มจำนวนทั้งหมด 6,099 รายการ ดังหมายเลข 5
  • เมื่อโหลดครบ ปุ่ม Navigate ลงจะหายไป จะเห็นว่ามีแต่ ปุ่ม Navigate ขึ้นดังหมายเลข 6
  • ค่า AllItemsCount จะเท่ากับ 6,099

กรณีคลิก Navigation ขึ้น (Scroll ขึ้น)

• หากคลิก Navigate ขึ้น เพื่อเลื่อนกลับไปดูข้อมูลรายการก่อนหน้า:
  • จำนวนรายการใน Label (AllItemsCount) จะไม่ลดลง เพราะระบบไม่ลดจำนวนรายการที่โหลดเข้ามาใน Gallery

เหตุผล: AllItemsCount แสดงจำนวน รายการทั้งหมดที่ถูกโหลดในระบบ และไม่ได้เกี่ยวข้องกับทิศทางการ Navigate (ขึ้นหรือลง)

บทสรุป

การตั้งค่า Navigation และการใช้ Property AllItemsCount ช่วยให้ Power Apps สามารถทำงานกับข้อมูลจำนวนมากได้อย่างมีประสิทธิภาพ โดยไม่ต้องโหลดข้อมูลทั้งหมดในคราวเดียว แต่จะค่อยๆ โหลดข้อมูลเพิ่มขึ้นเมื่อมีการ Navigate ลง หรือเลื่อน Scrollbar

ในตัวอย่างนี้ Gallery ไม่ได้แสดงข้อมูลทั้งหมด 6,099 รายการพร้อมกัน แต่จะแสดงเพียง 10 รายการแรกในแต่ละหน้าจอ และจะโหลดข้อมูลเพิ่มเติมเมื่อมีการ Navigate ลงจนกว่ารายการทั้งหมดจะถูกโหลดครบ

Property AllItemsCount มีหน้าที่แสดงจำนวนรายการที่โหลดเข้ามาใน Gallery แต่ไม่ได้สะท้อนจำนวนรายการทั้งหมดใน Data Source และไม่ตรงกับจำนวนรายการที่แสดงบน Gallery เสมอไป

การเข้าใจหลักการทำงานเหล่านี้ช่วยให้สามารถออกแบบแอปที่รองรับข้อมูลขนาดใหญ่ได้ดีขึ้น และสามารถใช้ Navigation หรือ Scrollbar ให้เหมาะสมกับการแสดงผลข้อมูลใน Power Apps

แนะนำหลักสูตร Microsoft Power Apps (Canvas App) Workshop
สนใจสมัครอบรม/ดูรายละเอียดหลักสูตร:
https://training.m365.co.th/training-course/power-apps/power-apps-canvas-app/

สนใจสอบถามรายละเอียดเพิ่มเติม

Tel: 021198405

Line: @M365th

Email: Sales@m365.co.th