แสดง เรียงลำดับ และกรองข้อมูลในแกลเลอรีแอปพื้นที่ทำงาน

สร้างแกลเลอรีเพื่อแสดงรูปภาพและข้อความเกี่ยวกับหลายผลิตภัณฑ์ แล้วเรียงลำดับ และกรองข้อมูลนั้น

ใน Power Apps คุณสามารถใช้แกลเลอรีเพื่อแสดงหลายรายการที่เกี่ยวข้องกัน เช่นเดียวกับที่คุณเห็นในแค็ตตาล็อก แกลเลอรีเหมาะสำหรับการแสดงข้อมูลเกี่ยวกับผลิตภัณฑ์ เช่นชื่อและราคามาก ในหัวข้อนี้ เราสร้างแกลเลอรี และเรียงลำดับและกรองข้อมูลโดยใช้ฟังก์ชันที่คล้ายกับ Excel และเมื่อรายการถูกเลือก ก็วาดเส้นขอบล้อมรอบรายการนั้น

หมายเหตุ

หัวข้อนี้จะใช้แอปของแท็บเล็ต คุณสามารถใช้แอปมือถือ แต่คุณจะต้องปรับขนาดตัวควบคุมบางตัว

ข้อกำหนดเบื้องต้น

• ลงทะเบียน สำหรับ Power Apps แล้ว ลงชื่อเข้าใช้ โดยใช้ข้อมูลประจำตัวเดียวกับที่คุณใช้ในการลงทะเบียน
• สร้างแอปแท็บเล็ตจาก เทมเพลต จาก ข้อมูล หรือ ตั้งแต่เริ่มต้น
• เรียนรู้วิธี กำหนดค่าตัวควบคุม
• ขั้นตอนเหล่านี้ ใช้ CreateFirstApp เป็นตัวอย่างข้อมูลป้อนเข้า ซึ่งมีรูปภาพ .jpg ไฟล์ zip ประกอบด้วยไฟล์ XML ที่แปลงไปยัง Excel ได้ หรือ Power Apps อ่านไฟล์ในไฟล์ .zip โดยอัตโนมัติ และนำเข้าได้สำเร็จ คุณสามารถดาวน์โหลด และใช้ข้อมูลตัวอย่างนี้ หรือนำเข้าข้อมูลของคุณเอง

แสดงข้อมูลในแกลเลอรี

1. สร้างคอลเลกชันที่มีชื่อว่า Inventory โดยใช้ข้อมูลตัวอย่าง ขั้นตอนได้แก่:

   1. บนแท็บ แทรก เลือก ตัวควบคุม แล้วเลือก นำเข้า:

      

   2. ตั้งค่าคุณสมบัติ OnSelect ของตัวควบคุมการนำเข้าด้วยสูตรต่อไปนี้:
      Collect(Inventory, Import1.Data)

      

   3. เลือกปุ่ม นำเข้าข้อมูล เพื่อเปิด Windows Explorer เลือก CreateFirstApp.zip และเลือก เปิด

   4. ในเมนู ไฟล์ เลือก คอลเลกชัน คอลเลกชันสินค้าคงคลังจะแสดงรายการ ด้วยข้อมูลที่คุณนำเข้า:

      

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

      หมายเหตุ

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

2. เลือกลูกศรย้อนกลับเพื่อกลับไปยังตัวออกแบบ

3. บนแท็บ แทรก คลิกหรือแตะ แกลเลอรี และจากนั้นคลิกหรือแตะแกลเลอรี แนวนอน

   

4. ในบานหน้าต่างด้านขวา คลิกหรือแตะตัวเลือกที่มี ชื่อเรื่องและคำบรรยายวางซ้อนทับกราฟฟิคอยู่:

   

5. ตั้งค่าคุณสมบัติ รายการ ของแกลเลอรีเป็น สินค้าคงคลัง:

   

6. เปลี่ยนชื่อแกลเลอรีไปเป็น ProductGallery และย้ายแกลเลอรีเพื่อให้ไม่บังตัวควบคุมอื่น ๆ ปรับขนาดแกลเลอรีจนแสดงสามผลิตภัณฑ์:

   

7. ในรายการแรกของแกลเลอรี เลือกป้ายชื่อด้านล่าง:

   

   หมายเหตุ

   เมื่อคุณเปลี่ยนชื่อรายการแรกในแกลเลอรีใด ๆ คุณจะเปลี่ยนรายการอื่น ๆ ทั้งหมดในแกลเลอรีโดยอัตโนมัติ

8. ตั้งค่าคุณสมบัติ ข้อความ ของแต่ละป้ายชื่อให้เป็นนิพจน์ต่อไปนี้:
   ThisItem.UnitsInStock
   

   เมื่อคุณทำเช่นนี้ ป้ายชื่อจะแสดงจำนวนหน่วยในสินค้าคงคลังของแต่ละผลิตภัณฑ์:

หมายเหตุ

ตามค่าเริ่มต้น คุณสมบัติ ข้อความ ของป้ายชื่อด้านบนจะถูกตั้งค่าเป็น ThisItem.ProductName คุณสามารถเปลี่ยนเป็นรายการใดก็ได้ในคอลเลกชันของคุณ ตัวอย่างเช่น ถ้าคอลเลกชันของคุณมีฟิลด์ ProductDescription หรือ ราคา คุณสามารถตั้งค่าป้ายชื่อเป็น ThisItem.ProductDescription หรือ ThisItem.Price ก็ได้

ด้วยขั้นตอนเหล่านี้ คุณได้นำเข้าข้อมูลที่มีรูปภาพ .jpg ลงในคอลเลกชันแล้ว จากนั้น คุณได้เพิ่มแกลเลอรีที่แสดงข้อมูล และกำหนดค่าป้ายชื่อเพื่อแสดงจำนวนหน่วยในสินค้าคงคลังของแต่ละผลิตภัณฑ์

ไฮไลต์รายการแกลเลอรีที่คุณเลือก

1. เลือกรายการใด ๆ ในแกลเลอรี ยกเว้น รายการแรก ไอคอนแก้ไขจะแสดงขึ้นมา (มุมบนซ้าย) เลือกไอคอนแก้ไข:
   

2. บนแท็บ แทรก เลือก รูปร่าง แล้วเลือกสี่เหลี่ยม สี่เหลี่ยมผืนผ้าทึบสีน้ำเงินจะปรากฏในแต่ละรายการของแกลเลอรี

3. บนแท็บ หน้าแรก เลือก เติม แล้ว เลือก ไม่เติม

4. เลือก เส้นขอบ เลือก สไตล์เส้นขอบ แล้วเลือกเส้นทึบ

5. เลือก เส้นขอบ อีกครั้ง และตั้งค่าความหนาเป็น 3 ปรับขนาดสี่เหลี่ยมให้ล้อมรอบรายการแกลเลอรี รายการในแกลเลอรีของคุณ มีเส้นขอบสีน้ำเงินแล้วตอนนี้ และควรมีลักษณะคล้ายกับต่อไปนี้:
   

6. บนแท็บ รูปร่าง เลือก มองเห็นได้ แล้วใส่สูตรต่อไปนี้ในแถบสูตร:

   If(ThisItem.IsSelected, true)

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

เคล็ดลับ

เลือกสี่เหลี่ยม เลือก จัดลำดับใหม่ บนแท็บ หน้าแรก จากนั้นเลือก ส่งไปด้านหลัง ในการใช้คุณลักษณะนี้ คุณจะสามารถเลือกรายการในแกลเลอรี โดยไม่มีเส้นขอบมาบัง

ในการทำตามขั้นตอนเหล่านี้ คุณได้เพิ่มเส้นขอบรอบ ๆ รายการที่เลือกปัจจุบันในแกลเลอรีแล้ว

เรียงลำดับและกรองรายการในแกลเลอรี

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

เรียงลำดับจากน้อยไปหามาก หรือมากไปหาน้อย

1. เลือกรายการใด ๆ ในแกลเลอรี ยกเว้น รายการแรก

2. คุณสมบัติ รายการ ตอนนี้มีการตั้งค่าเป็นสินค้าคงคลัง (ชื่อของคอลเลกชันของคุณ) เปลี่ยนเป็นสูตรต่อไปนี้:

   Sort(Inventory, ProductName)

   เมื่อคุณทำเช่นนี้ รายการในแกลเลอรีจะเรียงลำดับตามชื่อผลิตภัณฑ์ จากน้อยไปหามาก:

   ลองเรียงลำดับจากมากไปหาน้อย ตั้งค่าคุณสมบัติ รายการ ของแกลเลอรีด้วยสูตรต่อไปนี้:

   Sort(Inventory, ProductName, Descending)

เพิ่มตัวควบคุมแถบเลื่อน และกรองรายการในแกลเลอรี

1. เพิ่มตัวควบคุมแถบเลื่อน (แท็บ แทรก > ตัวควบคุม) แล้วเปลี่ยนชื่อเป็น StockFilter และย้ายไปใต้แกลเลอรี

2. กำหนดค่าแถบเลื่อนเพื่อให้ผู้ใช้ไม่สามารถตั้งค่าอยู่นอกช่วงของจำนวนหน่วยในสินค้าคงคลัง:

   1. บนแท็บเนื้อหา เลือก ขั้นต่ำ จากนั้น ใส่นิพจน์ต่อไปนี้:
      Min(Inventory, UnitsInStock)
   2. บนแท็บเนื้อหา เลือก สูงสุด จากนั้น ใส่นิพจน์ต่อไปนี้:
      Max(Inventory, UnitsInStock)

3. เลือกรายการใด ๆ ในแกลเลอรี ยกเว้น รายการแรก ตั้งค่าคุณสมบัติ รายการ ของแกลเลอรีให้เป็นนิพจน์ต่อไปนี้:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. ใน ตัวอย่าง ปรับแถบเลื่อนให้เป็นค่าที่อยู่ระหว่างจำนวนสูงสุดและต่ำสุดในแกลเลอรี เมื่อคุณปรับเปลี่ยนแถบเลื่อน แกลเลอรีแสดงเฉพาะผลิตภัณฑ์ที่มีจำนวนหน่วยน้อยกว่าค่าที่คุณเลือก:
   

ตอนนี้ เรามาเพิ่มตัวกรองของเรา:

1. กลับไปยังตัวออกแบบ
2. บนแท็บ แทรก เลือก ข้อความ เลือก ป้อนข้อความ และเปลี่ยนชื่อตัวควบคุมใหม่เป็น NameFilter ย้ายตัวควบคุมข้อความ มาที่ด้านล่างแถบเลื่อน
3. ตั้งค่าคุณสมบัติ รายการ ของแกลเลอรีให้เป็นนิพจน์ต่อไปนี้:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. ใน ตัวอย่าง ตั้งค่าแถบเลื่อนเป็น 30 และพิมพ์ตัวอักษร g ในตัวควบคุมการป้อนข้อความ แกลเลอรีแสดงเฉพาะผลิตภัณฑ์ที่มีจำนวนหน่วยน้อยกว่า 30 ในสินค้าคงคลัง และ มีชื่อที่มีตัวอักษร "g" เท่านั้น:
   

เคล็ดลับและเทคนิค

• ทุกเวลา คุณสามารถเลือกปุ่มการแสดงตัวอย่าง () เพื่อดูสิ่งที่คุณสร้างและทดสอบ
• เมื่อคุณออกแบบแอปของคุณ คุณสามารถปรับขนาดตัวควบคุม และย้ายตัวควบคุมโดยใช้การคลิกแล้วลากได้
• กด ESC หรือเลือก X เพื่อปิดหน้าต่างแสดงตัวอย่าง
• เมื่อใช้แกลเลอรี เลือกรายการแรกในแกลเลอรีเพื่อเปลี่ยนรายการทั้งหมดในแกลเลอรี ตัวอย่างเช่น เลือกรายการแรกเพื่อเพิ่มเส้นขอบให้กับรายการทั้งหมดในแกลเลอรี
• เพื่อปรับปรุงคุณสมบัติของแกลเลอรี เลือกรายการใด ๆ ในแกลเลอรี ยกเว้น รายการแรก ตัวอย่างเช่น เลือกรายการสองเพื่อปรับปรุง รายการ ShowScrollbar และคุณสมบัติอื่น ๆ ที่จะใช้กับแกลเลอรี (ไม่ใช่ใช้กับรายการในแกลเลอรี)

สิ่งที่คุณได้เรียนรู้

ในหัวข้อนี้ คุณ:

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

หมายเหตุ

บอกให้เราทราบเกี่ยวกับภาษาที่คุณต้องการในคู่มือ ทำแบบสำรวจสั้นๆ (โปรดทราบว่าแบบสำรวจนี้เป็นภาษาอังกฤษ)

แบบสำรวจนี้ใช้เวลาทำประมาณเจ็ดนาที ไม่มีการเก็บข้อมูลส่วนบุคคล (คำชี้แจงสิทธิ์ส่วนบุคคล)