Power Apps 101 : Expert Canvas Apps – ฟังก์ชันขั้นสูง ระบบป๊อปอัป และ Cascading Dropdowns ระดับเซียน

สารบัญเนื้อหา

เรียนรู้เทคนิคที่จะทำให้แอปของเราดูดี และทำงานได้ดีมากขึ้น ทั้งการใช้ฟังก์ชั่นเฉพาะทาง การจัดองค์ประกอบที่ซับซ้อน และ
การสร้างป๊อปอัพสำหรับการยืนยันใน Expert Canvas

Expert Canvas Apps

คือการยกระดับการพัฒนาแอปพลิเคชันด้วย Power Apps Canvas Apps จากแอปพลิเคชันระดับเริ่มต้น (เช่น ฟอร์มบันทึกข้อมูลพื้นฐาน หรือแอปแบบลากวางทั่วไป) ไปสู่การเป็น Enterprise-Grade Application ที่มีประสิทธิภาพสูง สวยงาม ใช้งานง่าย และมีความปลอดภัยระดับมืออาชีพ

การพัฒนาแอปพลิเคชันในระดับ Expert Canvas Apps ไม่ได้วัดกันที่จำนวนหน้าจอ แต่วัดกันที่ “ความประณีตในการเขียนตรรกะ (Logic) ประสบการณ์ผู้ใช้ (UX/UI) และสถาปัตยกรรมโค้ดที่ดูแลรักษาง่าย”

User() ฟังก์ชันที่ดึงข้อมูลของคนที่กำลังล็อกอินใช้แอปอยู่ ณ ขณะนั้น ไม่ต้องให้ผู้ใช้กรอกชื่อเอง เพราะระบบรู้อยู่แล้วว่าใครล็อกอินค่าที่ได้มาจาก Microsoft 365 profile ของผู้ใช้ ไม่ใช่ค่าที่พิมพ์เองได้ จึงเหมาะกับงานที่ต้องอ้างอิงตัวตนจริง เช่น ระบบขออนุมัติที่ต้องรู้ว่าใครเป็นคนขอ ใครเป็นคนแก้ไขข้อมูล หรือ สร้างใบงาน

-User().FullName ชื่อเต็มของผู้ใช้
-User().Email อีเมลที่ใช้ล็อกอิน
-User().Image รูปโปรไฟล์

LookUp(แหล่งข้อมูล, เงื่อนไข) ค้นหาแล้วคืนค่ากลับมา แค่แถวเดียว (แถวแรกที่ตรงเงื่อนไข) ต่างจาก Filter ที่คืนมาหลายแถว เหมาะกับตอนอยากได้ค่าใดค่าหนึ่งไปใช้ต่อ เช่น ดึงชื่อจาก ID Email หรือเช็คว่ามีข้อมูลนี้อยู่ไหม
ตัวอย่งางการ Lookup โดยใช้เงื่อนไข Email โดยใช้สูตร LookUp(M_Employee,Email = User().Email).Department

Today() ฟังก์ชั่น Today() เป็นฟังก์ชั่นที่ใช้สำหรับดึงวันที่ปัจจุบัน จะดึงเฉพาะ วัน เดือน ปี มาแสดง โดยอ้างอิงจากเวลาบนเครื่องของผู้ใช้งาน และยังสามารถใส่ Format ได้โดยการใช้ text ครอบ เช่น Text(Today(),”dd/mm/yy”) และยังมีฟังก์ชั่น Now() ที่ใช้งานคล้ายกันเพียงแต่จะมีเวลามาแสดงด้วย

Launch(“URL”) ใช้สำหรับเปิดลิงก์เว็บไซต์ภายนอก เปิดไฟล์ หรือเปิดแอปอื่นจากภายใน Power Apps โดยไม่ต้องออกจากแอปตัวเอง ถ้าเปิดเว็บไซต์ บนมือถือจะเปิดผ่านเบราว์เซอร์ของเครื่อง ส่วนบน Teams/Canvas App ที่ฝังอยู่ในหน้าเว็บอื่น บางทีจะเปิดแท็บใหม่แทน ใส่ parameter ที่สองเพิ่มได้ เช่น Launch(URL, {target: “_blank”}) เพื่อคุมว่าจะเปิดแท็บใหม่หรือหน้าต่างเดิม
ต่างจาก Navigate ตรงที่ Navigate ใช้สลับหน้าจอภายในแอปเดียวกัน ส่วน Launch ใช้ออกไปหาอะไรที่อยู่นอกแอป

ตัวอย่าง SharePoint List ที่เก็บ Image เป็น Link URL สามาถใช้ฟังก์ชั่น Launch เพื่อเปิดลิงก์ได้

โดยการใส่สูตรที่ OnSelect ใน Image ของ Gallery ใช้สูตร Launch(Thisitem.Image) เมื่อเราคลิกที่รูปภาพก็จะเป็นการเปิดลิงก์รูปภาพขึ้นมา

ป๊อปอัพ ทำการ Insert > เลือก Rectangle และปรับ Fade ของสี

จากนั้นทำการ Insert > Button เพื่อเป็นตัวแสดงข้อมูล (ใช้ Button เนื่องจาก Button สามารถปรับโค้งมนได้) เมื่อ Insert Button แล้ว
ให้ตั้งค่า DisplayMode ให้เป็น Disabled

Insert Button อีกครั้งตั้งค่าเหมือนเดิม เพื่อเป็น Header ของป๊อปอัพ และ Insert Icon Cancel เพื่อใช้ปิดป๊อปอัพ

จากนั้น Insert Gallery และ ใส่ Collection Col_DetailEmployee เพื่อแสดงข้อมูลของพนักงาน และทำการ Grouping ป๊อปอัพ ด้วยการกด Control ค้างไว้ และ คลิกเลือก Action ที่ต้องการ Group จากนั้น คลิกขวาเลือก Group และตั้งชื่อ Group

ทำการ Set ค่าให้ป๊อปอัพแสดง ด้วยการคลิกที่ปุ่มที่ต้องการใช้เปิดป๊อปอัพ บน Gallery ไปที่ OnSelect
ใส่สูตร Set(var_Detail,true); และ ClearCollect(Col_DetailEmployee,{FillName:Thisitem.First_name & ” ” & Thisitem.Last_name,Department:Thisitem.Department,EmployeeID:Thisitem.EmployeeID,Jb_Title:Thisitem.Job_title,Image:Thisitem.Image}); เพื่อสร้าง Collection

จากนั้นนำ var_Detail ไปใส่ที่ Visible ของ Group ป๊อปอัพ เมื่อคลิกที่ปุ่มที่ใช้เปิดป๊อปอัพ ป๊อปอัพจะแสดงขึ้นมาจากนั้นใส่สูตร Set(var_Detail,false) ที่ Icon Cancel เพื่อใช้สำหรับปิดป๊อปอัพ

Cascading Dropdown รูปแบบการทำ Dropdown ที่ตัวเลือกใน Dropdown ตัวที่สอง เปลี่ยนไปตามค่าที่เลือกใน Dropdown ตัวแรก เช่น เลือกจังหวัดก่อน แล้วอำเภอที่โชว์จะกรองเหลือเฉพาะของจังหวัดนั้น ไม่ใช่ฟังก์ชันเดียว แต่เป็นการเอา Filter มาผูกกับ Items ของ Dropdown ตัวที่สอง

เพิ่ม Combobox ขึ้นมา 2 Combobox จากนั้นเชื่อมต่อข้อมูลที่ต้องการ ตัวอย่างจะเป็น Department และ Job title
ใส่สูตรที่ Items ของ Combobox Jobtitle : Filter(M_Job_Title,Department_Code = Combobox4.selected.Department_Code)
เมื่อเลือก Department แล้ว Job title จะแสดงออกมาเฉพาะ Job title ที่อยู่ภายใต้ Department ที่เลือกเท่านั้น

จากนั้นเพิ่มเงื่อนไขใน Filter ของ Gallery ด้วยสูตร And (IsBlank(Combobox4.Selected.Department_Code ) Or Department = Combobox4.Selected.Department_Code) And (IsBlank(Combobox5.Selected.Job_Title_Code ) Or Job_title = Combobox5.Selected._Job_Title_Code)

เมื่อทำการ Filter ข้อมูล Employee จะแสดง Department และ Job title ที่เกี่ยวข้องกับ Combobox ที่เรา Filter

จากนั้นใส่คำสั่ง Reset(Combobox5) ที่ OnChange ของ Combobox4 เพื่อเวลาเปลี่ยนค่าของ Department ให้ Job title Reset

ทำการ Insert Icon ถังขยะ และใส่คำสั่ง Set(var_Delete,true)

ต่อมาเราจะสร้างป๊อปอัพยืนยันการลบข้อมูล โดย Insert Rectangle และ Button เพื่อเป็นพื้นหลังเหมือนเดิม และเพิ่ม Button Cancel,Delete และ Groupping ป๊อปอัพ Delete จากนั้นที่ OnSelect ของ Button Cancel ให้ใส่คำสั่ง Set(var_Delete,false)
ที่ OnSelect ของ Button Delete ใส่คำสั่ง Remove(M_Employee,Gallery1.Selected); และ Set(var_Delete,false) ;

การ Comment Code คือการเขียนข้อความอธิบายไว้ในสูตร Formula โดยข้อความที่เราเขียนจะไม่ถูกนำไปประมวลผล จะมีไว้สำหรับอ่านเท่านั้น การ Comment Code ยังมีประโยชน์ในเรื่องของการส่งมอบงานต่อให้กับผู้อื่น เมื่อผู้ที่ได้รับช่วงดูแลแอปต่อเข้ามาอ่าน Code และเห็น Comment ที่เราใส่ไว้ก็จะเข้าใจว่า Logic ของแอปเป็นลักษณะไหน และยังสามารถปิดการทำงานชั่วคราวของ Code โดยที่ไม่ต้องลบ Code ทิ้ง การ Comment Code มี 2 รูปแบบ

1.Single Line โดยใช้ // ไว้ที่หน้าข้อความหรือ Code ที่เราต้องการ Comment เช่น //Codeที่ต้องการComment
2.Block comment โดยจะใช้ /* ไว้หน้า Code และ */ ไว้หลัง Code ที่ต้องการ Comment เช่น /*Codeที่ต้องการComment*/