ทริคPower Apps

Responsive Layout

ทำหน้าแอปให้ปรับตามขนาดจอมือถือ/แท็บเล็ต/เดสก์ท็อป

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

Responsive Layout คือเรื่องที่ช่วยให้เราใช้ทำแอปภายในทีมแบบ low-codeได้ถูกทางขึ้น

ระดับ

เหมาะกับคนที่ต้องตรวจงานหรือวางมาตรฐาน

ใช้เมื่อไหร่

แอปต้องใช้งานได้ทั้งบนมือถือและจอเดสก์ท็อป

อ่านแล้วทำอะไรต่อ

ตั้งความกว้างการ์ดให้อ้างพื้นที่ของ container แทนค่าตายตัว

เห็นภาพ: ทริคนี้เป็นยังไง

ตายตัว

X = 40
Width = 760
// ล้นจอมือถือ

ยืดหยุ่น

Width = Parent.Width - 40
// หดตามพื้นที่ที่มี

ตำแหน่งตายตัวล้นจอเล็ก — อ้างพาเรนต์ปรับตามจอ

ใช้ตอนไหน?

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

ความหมาย

Responsive layout (เลย์เอาต์ที่ปรับตามขนาดจอ) ใน Power Apps ทำได้โดยปิดการล็อกอัตราส่วนหน้าจอ แล้วใช้ container แบบยืดหยุ่น (เช่น Horizontal/Vertical container) จัดวาง control ให้ขยาย/หดตามความกว้าง แทนการตั้งตำแหน่ง X/Y แบบตายตัว

ตั้งค่าให้แอป responsive

ปิด Scale to fit ใน App settings แล้วใช้ container จัดวาง พร้อมอ้างขนาดจากพาเรนต์

1. Settings > Display > ปิด "Scale to fit" และ "Lock aspect ratio"
2. เพิ่ม Container แบบ Horizontal/Vertical
3. ตั้งความกว้าง control อ้างพาเรนต์ เช่น Parent.Width - 40
4. ใช้ App.Width / App.Height คุม breakpoint ของหน้าจอ

ตัวอย่างการใช้

การ์ดที่หดตามจอ