คอนโทรลตัวแรกของคุณ

Power Apps เบื้องต้น

Luise Freese

Azure & Power Platform Architect

คอนโทรลคือส่วนประกอบพื้นฐาน

 

  • คอนโทรลคือ ส่วนประกอบพื้นฐาน ของ canvas app ทุกแอป
  • แต่ละตัวทำหน้าที่เดียว เช่น แสดงข้อความ รับข้อมูล หรือสั่งการ
  • กำหนดค่าผ่าน แถบสูตร ที่ด้านบนของตัวแก้ไข

 

แผง Insert ของ Power Apps Studio ที่เปิดจากแถบเครื่องมือ แสดงหมวดหมู่คอนโทรล เช่น Text label, Button และ Gallery

Power Apps เบื้องต้น

อ่านค่าจาก text input

 

  • Text Input เก็บสิ่งที่ผู้ใช้พิมพ์
  • ค่าปัจจุบันอยู่ใน TextInput1.Text
  • อ้างอิงค่านี้ได้ทุกที่ รวมถึง Text ของ Label

 

Power Apps Studio ที่เลือก label ไว้ แถบสูตรแสดง Text = "Welcome, " & TextInput1.Text ทำให้ label แสดงผล "Welcome, Sam" จาก text input ด้านบน

Power Apps เบื้องต้น

ตัวแปรด้วย Set()

 

Power Apps Studio ที่เลือก Button2 แถบสูตรแสดง OnSelect = Set(isSignedIn, true) และปุ่ม Sign in ถูกไฮไลต์บน canvas

 

  • ตัวแปร เก็บค่าไว้ใช้ข้ามการกระทำต่าง ๆ
  • Set(isSignedIn, true) สร้างตัวแปรชื่อ isSignedIn
  • เราจะพบ Set() แบบนี้อีกครั้งใน บทที่ 3
Power Apps เบื้องต้น

การแสดงผลแบบมีเงื่อนไขด้วย If()

 

  • Visible = isSignedIn แสดง Label เฉพาะเมื่อเป็นจริง
  • กดปุ่ม → ตัวแปรอัปเดต → Label ปรากฏขึ้น
  • If(condition, value-if-true, value-if-false) สำหรับทางเลือกสองทาง

$$

Power Apps Studio ที่เลือก label ข้อความขอบคุณไว้ แถบสูตรแสดง Visible = isSignedIn โดย label ถูกซ่อนบน canvas เพราะ isSignedIn เป็นเท็จ

Power Apps เบื้องต้น

ธีมดีกว่าการจัดสไตล์ทีละตัว

 

ตัวเลือกธีมของ Power Apps Studio แสดงกริดตัวอย่างธีมสีให้นำไปใช้กับทั้งแอป

 

  • ธีม กำหนดจานสี ตัวอักษร ขอบ เงา → ใช้ทั้งแอป
  • คอนโทรลสมัยใหม่ ทุกตัวสืบทอดธีม → เปลี่ยนครั้งเดียวปรับทั้งหมด
  • ขนาด รูปร่าง ทิศทาง ยังคงกำหนดแยกตามคอนโทรล
Power Apps เบื้องต้น

ปรับแต่งสีเน้นหนึ่งจุด

  $$

อยากให้คอนโทรลตัวหนึ่งโดดเด่น?

  • เลือกคอนโทรลนั้น แล้วกำหนด Fill โดยตรง: RGBA(...) หรือ Color.Teal
  • ใช้แต่น้อย เพราะมันจะทับค่าธีม

ภาพหน้าจอจริงของ canvas Power Apps ที่ใช้ธีม Steel พร้อมการปรับแต่งสีเน้นหนึ่งจุด

Power Apps เบื้องต้น

สรุป

canvas app Library Sign-in ที่เปิดอยู่ใน Power Apps Studio แสดง tree view, canvas พร้อมคอนโทรล, แถบสูตร และแผง properties

  • Text Input ส่งค่าแบบเรียลไทม์ไปยังคอนโทรลอื่นผ่านแถบสูตร
  • Set() เก็บค่า ส่วน If() แสดงหรือซ่อนตามค่านั้น
  • ธีม จัดสไตล์ทุกหน้าจอพร้อมกัน ปรับแต่ง Fill ของคอนโทรลตัวใดตัวหนึ่งเพื่อเน้นจุดเด่น
Power Apps เบื้องต้น

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

Power Apps เบื้องต้น

Preparing Video For Download...