แชร์ผ่าน


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

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

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

หมายเหตุ

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

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

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

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

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

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

      แทรกตัวควบคุม

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

      คุณสมบัติ OnSelect

    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" เท่านั้น:
    ตัวเลื่อนการแสดงตัวอย่างด้วย 30

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

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

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

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

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

หมายเหตุ

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

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