การแสดงข้อมูลด้วยแกลเลอรี

Power Apps เบื้องต้น

Luise Freese

Azure & Power Platform Architect

การเพิ่มแหล่งข้อมูลด้วย SharePoint

 

  • แผง Data → + เพิ่มข้อมูล → SharePoint
  • เลือก site แล้วเลือก list
  • list จะปรากฏเป็น แหล่งข้อมูล

แผง Data ของ Power Apps ขณะค้นหา SharePoint แสดงตัวเชื่อมต่อ SharePoint เป็นผลลัพธ์แรก

Power Apps เบื้องต้น

แกลเลอรีความสูงยืดหยุ่น

$$

แกลเลอรีของ Power Apps ที่แสดงแถวงาน 3 แถวพร้อมชื่อเรื่องและคำบรรยายย่อย โดยแต่ละแถวปรับขนาดอัตโนมัติตามเนื้อหา

 

  • แถว ขยายขนาดให้พอดี กับเนื้อหา
  • ไม่มีชื่อเรื่องหรือป้ายสถานะถูกตัดให้สั้นลง
  • เป็นค่าเริ่มต้นของแอป canvas รุ่นใหม่
Power Apps เบื้องต้น

การปรับแต่งเทมเพลต

 

  • เลือก แถวเทมเพลต (การ์ดบนสุด)
  • แต่ละคอนโทรลในเทมเพลตใช้ ThisItem.Column
  • แก้ไขครั้งเดียว ทุกแถวอัปเดตตาม

$$

แกลเลอรีของ Power Apps ในโหมดแก้ไขเทมเพลต โดยเลือกป้ายชื่อเรื่องไว้ และแถบสูตรแสดง ThisItem.Title ทำให้แต่ละแถวแสดงชื่องานของตัวเอง

Power Apps เบื้องต้น

การอ่านค่าด้วย Text()

 

Text(ThisItem.DueDate, "[$-en-US]mmm d")
  • พิมพ์ . หลังชื่อออบเจ็กต์เพื่อดู คุณสมบัติและคอลัมน์ ของมัน
  • ค่าต่างๆ มีชนิดข้อมูล: Text, Number, Boolean, Date/Time, Record, Table
  • ThisItem.DueDate เป็นชนิด Date ดังนั้น Text() จะจัดรูปแบบเป็น Jun 15
  • [$-en-US] กำหนดภาษา ส่วน mmm d กำหนดรูปแบบ
Power Apps เบื้องต้น

การจัดรูปแบบตามเงื่อนไข

 

  • สีของคอนโทรลสามารถขึ้นอยู่กับ ข้อมูลของแถว
  • ใช้ If() ในคุณสมบัติ Color ของป้ายกำกับ
  • ตัวอย่างเช่น:

If(ThisItem.Priority = "High", Color.Red, Color.Gray)

 

แกลเลอรีของ Power Apps ที่ป้ายกำกับ Priority มีสีตามเงื่อนไข If(ThisItem.Priority = High, Red, Gray) แสดง High เป็นสีแดงในสองแถว และ Medium เป็นสีเทา

Power Apps เบื้องต้น

การเน้น DueDate

 

  • จัดรูปแบบวันที่ด้วยวิธีเดียวกัน:

If(ThisItem.DueDate < Today(), Color.Red, Color.Black)

  • แถวที่เลยกำหนดจะโดดเด่นทันที

แกลเลอรีของ Power Apps ที่ป้ายกำกับวันครบกำหนดมีสีตามเงื่อนไข If(ThisItem.DueDate < Today(), Red, Black) แสดงวันที่ผ่านมาแล้วเป็นสีแดง และวันที่ในอนาคตเป็นสีดำ

Power Apps เบื้องต้น

สถานะว่างเปล่า

หน้าจอแอปที่แสดงสถานะว่างเปล่า มีไอคอนถ้วยกาแฟที่เป็นมิตรและข้อความ "No matching tasks" อยู่ตรงกลางหน้าจอ

 

  • แสดง ข้อความที่เป็นมิตร เมื่อแกลเลอรีว่างเปล่า
  • ใช้ Visible = IsEmpty(Gallery1.AllItems) กับป้ายกำกับตัวยึดตำแหน่ง
  • ใช้ได้ทั้งกรณี ไม่มีข้อมูล และ ผลการกรองเป็นศูนย์
Power Apps เบื้องต้น

ตอนนี้คือ collection ในที่ทำงานคือตัวเชื่อมต่อ

 

  • ในแบบฝึกหัดนี้ แถวข้อมูลอยู่ใน collection
  • ในองค์กรจริง จะชี้ไปที่ SharePoint list หรือแหล่งข้อมูลที่คล้ายกัน
  • แนวคิดของแกลเลอรีทั้งหมดทำงาน เหมือนกัน

$$

$$

แผนภาพ: SharePoint list และ collection ภายในแอป ต่างป้อนข้อมูลเข้าแกลเลอรี Power Apps เดียวกัน แสดงว่าแกลเลอรีทำงานเหมือนกันไม่ว่าแหล่งข้อมูลจะเป็นอะไร

Power Apps เบื้องต้น

มาฝึกกันเถอะ!

Power Apps เบื้องต้น

Preparing Video For Download...