Power Apps 101 : Basic Concepts – ทำความเข้าใจโครงสร้าง Power Apps Studio, Controls และสูตร Power Fx พื้นฐาน

ต่อจาก EP 1-2 ที่เราคุยกันเรื่องภาพรวมเครื่องมือของ Power Apps กับเรื่อง Environment ไปแล้ว รอบนี้ขอพาไปเปิด Power Apps Studio กันจริง ๆ ดูว่าหน้าตาเป็นยังไง

Basic Concepts

คือก้าวแรกที่สำคัญที่สุดในการเรียนรู้ Canvas Apps บน Microsoft Power Platform เพราะก่อนที่เราจะต่อยอดไปสู่การสร้างระบบที่ซับซ้อน การเข้าใจว่า “เครื่องมือแต่ละส่วนใน Studio ทำหน้าที่อะไร”, “วัตถุบนหน้าจอ (Controls) แต่ละตัวใช้ทำอะไร” และ “การสั่งการด้วยสูตร Power Fx มีหลักคิดอย่างไร” จะเป็นเสาเข็มสำคัญที่ช่วยให้คุณพัฒนาแอปพลิเคชันได้อย่างมีโครงสร้างและไม่งงเมื่อระบบใหญ่ขึ้น

ส่วนประกอบต่างๆของ Power Apps Studio เบื้องต้น

Tree View (เมนูด้านซ้าย):

• ทำหน้าที่: แสดงแผนผังลำดับชั้น (Hierarchy) ขององค์ประกอบทั้งหมดในแอปพลิเคชัน
• การใช้งาน: ใช้บริหารจัดการลำดับของหน้าจอ (Screens) ดูว่าในแต่ละหน้าจอมีวัตถุ (Controls) อะไรอยู่บ้าง สามารถจัดกลุ่ม วางลำดับซ้อนหน้า-หลัง หรือเปลี่ยนชื่อ Control ให้เป็นหมวดหมู่ได้จากตรงนี้

Canvas Area (ผืนผ้าใบออกแบบตรงกลาง):

• ทำหน้าที่: พื้นที่วางและออกแบบหน้าจอแอปพลิเคชันในรูปแบบ WYSIWYG (What You See Is What You Get)
• การใช้งาน: สามารถลาก วาง จัดตำแหน่ง ขยาย/ย่อขนาด ของปุ่ม ข้อความ หรือรูปภาพได้โดยตรงเหมือนกำลังจัดสไลด์บน PowerPoint

Properties Panel (แถบปรับแต่งด้านขวา):

• ทำหน้าที่: กำหนดค่าคุณสมบัติ visual และพฤติกรรมพื้นฐานของ Control ที่เลือกอยู่
• การใช้งาน: ปรับเปลี่ยนสีพื้นหลัง (Fill), ขนาดและรูปแบบฟอนต์ (Font/Size), การจัดวางตำแหน่ง (X, Y, Width, Height) รวมถึงการผูกแหล่งข้อมูล (Data Source)

Formula Bar (แถบสูตรด้านบน):

การใช้งาน: ใช้เขียนสูตรด้วยภาษา Power Fx กำหนดว่าเมื่อเกิดเหตุการณ์บางอย่าง (เช่น ผู้ใช้คลิกปุ่ม หรือข้อความเปลี่ยน) ระบบจะต้องประมวลผลหรือส่งข้อมูลอย่างไร

ทำหน้าที่: หัวใจของการใส่ตรรกะและการทำงาน (Logic & Behavior)

6.Play ทดสอบแอปแบบเสมือนใช้งานจริง โดยไม่ต้อง Publish ก่อน
(เมื่อกด Play หน้าจอจะแสดงแบบภาพด้านล่าง สามารถกด x ที่มุมด้านขวาบน เพื่อออกจากโหมด Play)

7.Save บันทึกงานแบบร่าง คนอื่นยังไม่เห็นการเปลี่ยนแปลงจนกว่าจะ Publish

8.Publish เผยแพร่แอปเวอร์ชันล่าสุดให้ผู้ใช้จริงเห็น ต่างจาก Save ตรงที่มีผลกับทุกคนที่มีสิทธิ์เข้าใช้งานแอป

9.Environment บอกว่าแอปอยู่ใน Environment ไหน แต่ละ Environment แยกข้อมูลและสิทธิ์กันคนละชุด

ทดลองสร้าง Power Apps แบบเบื้องต้น

เมื่อเข้ามายังหน้า Power Apps แล้ว กด Icon Save และ ตั้งชื่อแอป จากนั้นกด Save แอปจะถูกบันทึกไปยัง Environment ที่เลือกไว้

ขั้นตอนต่อไป คลิกที่ Insert เลือก Text label และ Button

จากนั้น คลิกที่ Button และ ตั้งชื่อ Button ที่ Properties ในช่อง Text “Click ME!”

เลือก OnSelect ของ Button ใส่สูตร Notify(“Hello PowerApps”)

กดปุ่ม Play และ คลิกที่ Button Click ME! จะมีแถบแจ้งเตือนข้างบน “Hello PowerApps”

ไปที่เมนู Insert เพิ่ม Text Input จากนั้น คลิกที่ Text label ที่เพิ่มไว้ก่อนหน้า

เลือก Color และใส่สูตร If(Isblank(Textinput1.text),Color.Red,Color.Green)

เลือก Text และใส่สูตร If(Isblank(Textinput1.text),”Textinput1 is blank”,”Textinput1 not blank”)

กดที่ปุ่ม Play และทดลอง ลบ หรือ พิมพ์ข้อความทั้งหมดที่ Text Input1 จะสังเกตุได้ว่า ที่ Text label จะเปลี่ยนสี และ ข้อความตามที่เราได้ใส่สูตรไว้

Set Variable

การ Set Variable สามารถทำได้ด้วยสูตร Set(ชื่อVariable,สิ่งที่ต้องการSet) ขั้นตอนต่อไป ทดลอง Set Variable

เลือกเมนู Insert เพิ่ม Button และ Text label

จากนั้นคลิกที่ Button ตั้งชื่อในช่อง Text “Set User” และ เลือก OnSelect ใส่สูตร Set(var_User,User().FullName)

นำ Variable var_User ไปใส่ที่ช่อง Text ของ Text label ที่เพิ่มมา จากนั้นกด Play และ คลิกที่ Button Set User

Navigate

เมื่อแอปมีมากกว่า 1 หน้าจอ สิ่งที่ต้องรู้ต่อคือทำยังไงให้กดปุ่มแล้วเปลี่ยนไปอีกหน้าจอได้ ฟังก์ชันที่ใช้คือ Navigate

เพิ่ม Screen โดยการคลิกที่ +New screen เลือก Blank จะได้ Screen 2 มา

ที่ Screen 2 เพิ่ม Button ตั้งชื่อ Button “Screen 1” จากนั้นใส่สูตร Navigate(Screen1) ที่ OnSelect ของ Button Screen 1

กด Play และ คลิกที่ Button Screen 1 จะเป็นการเปลี่ยนหน้าไปยัง Screen 1

หากต้องการทำแบบเดียวกัน ที่ Screen 1 ให้เพิ่ม Button เช่นเดียวกับที่ทำไปก่อนหน้า ที่ Screen1 และใส่สูตร Navigate(Screen2)

กดปุ่ม Play และคลิกที่ Button จะเป็นการเปลี่ยนไปยัง Screen 2

Tips

Power Apps จะมีค่ามาตรฐาน Data Row Limit ที่ระบบตั้งไว้อยู่ที่ 500 สามารถตั้งได้มากสุดที่ 2000

โดย คลิกที่ฟันเฟืองมุมล่างซ้าย > General > Data row limit > ใส่จำนวน 2000

Controls พื้นฐานที่เป็นอิฐบล็อกของหน้าจอ (UI Building Blocks)

หน้าตาแอปพลิเคชันทั้งหมดเกิดขึ้นจากการนำ Controls สำเร็จรูปมาวางประกอบกัน ซึ่ง Controls พื้นฐานที่ต้องใช้อยู่เสมอ ได้แก่:

• Text Label (ป้ายแสดงข้อความ): ใช้แสดงผลข้อความคงที่ (Static Text) หรือแสดงผลลัพธ์ที่ดึงมาจากฐานข้อมูลและสูตรคำนวณ
• Text Input (ช่องรับข้อความ): เปิดให้ผู้ใช้งานพิมพ์กรอกข้อมูล เช่น ชื่อ-นามสกุล, รหัสพนักงาน, หรือหมายเหตุ
• Button (ปุ่มสั่งการ): ปุ่มสำหรับรับการกดของผู้ใช้ เพื่อรันชุดคำสั่งที่เขียนไว้ในคุณสมบัติ OnSelect
• Gallery (รายการแสดงชุดข้อมูล): เครื่องมือสำหรับดึงข้อมูลที่มีหลายๆ แถว (เช่น ตารางรายชื่อ หรือรายการสินค้า) มาแสดงผลซ้ำตามโครงสร้างการจัดวางที่เรากำหนดเพียงชุดเดียว
• Form (Edit Form / Display Form): ชุดฟอร์มสำเร็จรูปที่เชื่อมกับฐานข้อมูล (เช่น SharePoint หรือ Dataverse) โดยอัตโนมัติ ช่วยให้การสร้างหน้าเพิ่มข้อมูล แก้ไขข้อมูล หรืออ่านข้อมูลทำได้รวดเร็วโดยไม่ต้องวาง Control แยกทีละชิ้น

ภาษา Power Fx พื้นฐาน: หัวใจในการสั่งการแอป

Power Fx คือภาษา Low-code ที่ Microsoft ออกแบบมาให้มีไวยากรณ์ (Syntax) คล้ายคลึงกับสูตรใน Microsoft Excel ทำให้ผู้เริ่มต้นสามารถเรียนรู้ได้รวดเร็ว

Property สำคัญที่ต้องเขียนสูตรบ่อยที่สุด

• Text: กำหนดข้อความที่จะให้แสดงผลบน Control
• Items: กำหนดชุดข้อมูล (Table/List) ที่จะนำมาป้อนให้ Gallery หรือ Dropdown
• OnSelect: ใส่คำสั่งที่จะให้ทำงานทันทีเมื่อผู้ใช้คลิกหรือแตะที่ Control นั้น
• Visible: รับค่าความจริง true (แสดงผล) หรือ false (ซ่อน) เพื่อเปิด/ปิดการมองเห็น Control

ตัวอย่างสูตร Power Fx พื้นฐานที่ต้องเจอแน่นอน

การสั่งเปลี่ยนหน้าจอ (Navigate)

ข้อมูลโค้ด

Navigate(HomeScreen, ScreenTransition.Fade) 

ความหมาย: เมื่อคลิก ให้เปลี่ยนไปหน้า HomeScreen ด้วยเอฟเฟกต์การจางเปลี่ยนหน้า

การบันทึกและรีเซ็ตฟอร์ม (SubmitForm & ResetForm)

ข้อมูลโค้ด

SubmitForm(EditForm1); ResetForm(EditForm1) 

ความหมาย: สั่งบันทึกข้อมูลใน EditForm1 ลงฐานข้อมูล จากนั้นล้างค่าในฟอร์มให้พร้อมสำหรับการกรอกใหม่

การกรองข้อมูลมาแสดงใน Gallery (Filter)

ข้อมูลโค้ด

Filter(TaskLists, Status = "Pending") 

ความหมาย: ดึงเฉพาะข้อมูลจากตาราง TaskLists ที่มีสถานะเป็น “Pending” มาแสดงผล

การตรวจสอบเงื่อนไข (If)

ข้อมูลโค้ด

If( IsBlank(TextInput1.Text), Color.Red, Color.Black ) 

ความหมาย: ถ้าช่อง TextInput1 ว่างเปล่า ให้เปลี่ยนสีตัวอักษรเป็นสีแดง แต่ถ้ามีข้อมูลแล้วให้เป็นสีดำ

สรุปภาพรวม Basic Concepts

ความเข้าใจใน Basic Concepts จะช่วยเปลี่ยนมุมมองจากการ “ลากวางวัตถุตามคำบอก” มาเป็นการ “เข้าใจความสัมพันธ์ระหว่าง UI, Data และ Logic” เมื่อคุณเข้าใจว่า Studio จัดเก็บโครงสร้างอย่างไร, เลือกใช้ Control ได้เหมาะกับลักษณะงาน และเขียนสูตร Power Fx เพื่อเชื่อมโยงพฤติกรรมระหว่างกันได้ คุณก็พร้อมที่จะก้าวไปสู่ระดับ Intermediate Canvas Apps เพื่อจัดการข้อมูลชั่วคราวผ่าน Collections และปรับแต่งการบันทึกข้อมูลแบบยืดหยุ่นด้วย Patch() ในขั้นตอนถัดไป

— THE MATRIX × MICROSOFT —