สร้าง Application จาก Canva Apps ตั้งแต่สร้าง SharePoint List เก็บข้อมูล ไปจนถึงต่อเข้า Power Apps ให้กลายเป็นแอปใช้งานได้จริง
Intermediate Canvas Apps
คือระดับการพัฒนา Power Apps ที่ก้าวข้ามจากการใช้ฟอร์มสำเร็จรูป (Form Controls) ไปสู่การควบคุมโครงสร้างข้อมูลในหน่วยความจำชั่วคราวและการจัดการฐานข้อมูลอย่างมีอิสระ ทำให้แอปพลิเคชันทำงานได้เร็วขึ้น รองรับเวิร์กโฟลว์ที่ซับซ้อน และให้อิสระในการออกแบบหน้าจอ (UI/UX) อย่างเต็มที่
การสร้าง SharePoint List
ขั้นตอนแรก Login เข้าสู่ระบบ Microsoft Office 365 จากนั้น คลิกที่ Apps เลือก SharePoint
เลือก Site SharePoint ที่ต้องการสร้าง List SharePoint
การสร้าง List SharePoint ไปที่ New > List
ตั้งชื่อ List SharePoint ให้เรียบร้อย กด Create
เมื่อได้ SharePoint List ออกมาแล้ว จะทำการเพิ่ม Column โดยคลิกที่ Add Column แล้วเลือกประเภท Type ของ Column
จากนั้นตั้งชื่อ Column และกด Save
สร้าง Power Apps และ เชื่อมต่อ SharePoint List
หลังจากสร้าง SharePoint List เรียบร้อยแล้ว ขั้นตอนต่อไปจะเป็นการสร้าง Power Apps
โดยกลับไปที่ Apps > เลือก Power Apps
เมื่อเข้าไปยัง Power Apps แล้ว ให้คลิกไปที่ Apps > New Apps > Start with a page design > เลือก Blank Canvas
เริ่มลงมือสร้าง Apps ขั้นแรก สร้าง Header และ Footer แบบ Custom
คลิกที่ Insert > Rectangle
จากนั้น ปรับขนาด Header ใส่ text ชื่อระบบ และ ปรับสีพื้นหลังและข้อความตามที่ต้องการได้ที่ Properties
เมื่อเสร็จแล้วให้ทำวิธีเดิมสำหรับ Footer
เมื่อสร้าง Header และ Footer เสร็จแล้ว ให้คลิกที่จุดสามจุดท้ายชื่อ Screen และทำการ Duplicate screen
และ สามารถตั้งชื่อ screen ได้ที่ Rename
ทำการดึง SharePoint list เข้ามาใน Power Apps คลิกที่ Data > Add data > Connectors > SharePoint
เลือก Site และ List ที่ต้องการดึงข้อมูล
จากนั้น Insert > Edit form และ เชื่อมต่อกับ SharePoint List ที่พึ่งนำเข้ามาใน Power Apps
จากนั้น จัดรูปแบบ Edit form ตามที่ต้องการ โดยคลิกที่ Properties > Fields,Column,Layout
เพิ่ม Button Back และ Save โดย Button Back ใส่สูตร Navigate(Screen_Home) เพื่อกลับไปยังหน้าที่ต้องการ
และ Button Save ใส่สูตร SubmitForm(Form1); เพื่อบันทึก Edit form และใส่สูตร Navigate(Screen_Home); เพื่อให้กลับไปหน้า Home
จากนั้นให้ตั้ง DefaultMode ของ Edit form โดยคลิกที่ Edit form > Properties > DefaultMode > เปลี่ยนเป็น New เพื่อสร้างใบงานใหม่
ขั้นตอนต่อไปเป็นการเพิ่ม Gallery เพื่อแสดงข้อมูล ที่หน้า Home โดยการ Insert > Vertical Gallery
จากนั้นจัดวาง format ตามที่ต้องการ โดยการดึงข้อมูลแต่ละ Column ใช้คำสั่ง Thisitem.ชื่อColumn เช่น Thisitem.FullName
และ เชื่อมต่อ Gallery กับ SharePoint โดยคลิกที่ Data source > SharePoint
จากนั้นทดสอบการบันทึกข้อมูล โดยการกรอกข้อมูล และ กด Save
เมื่อทำการ Save แล้ว ข้อมูลจะถูกบันทึกลงที่ SharePoint List และจะแสดงที่หน้า Gallery
จากนั้นจะทำการจะทำการแก้ไขข้อมูลผ่าน Form โดยจะคลิกข้อมูลจาก Gallery
ทำการใส่สูตรที่ Gallery โดยคลิกที่ Icon > และใส่สูตร Navigate(Screen_Detail); และ Set(var_module,”Detail”);
เมื่อกด Play และคลิกที่ Icon > จะเปิดไปยัง Screen_Detail แต่ Edit form จะไม่แสดง เนื่องจาก DefaultMode ยังเป็น Mode New
ให้ทำการ คลิกที่ Edit form และตั้งค่า DefauleMode ใส่สูตร If(var_Module = “Detail”,FormMode.View,FormMode.New)
จากนั้นตั้งค่า Item ของ Edit form ใส่สูตร Gallery1.Select เพียงเท่านี้ข้อมูลก็จะแสดงบน Edit form แล้ว
จากนั้นคลิกที่ปุ่ม Save เลือก Displaymode เพื่อตั้งค่าไม่ให้กด Save ได้เวลากดเข้ามาดูข้อมูล
โดยใส่สูตร If(var_Module = “Detail” , DisplayMode.Disabled,DisplayMode.Edit)
จากนั้น Insert Button สำหรับแก้ไข โดยตั้งชื่อ Edit และ ตั้งค่า Visible ของ Button โดยใส่สูตร var_Module = “Detail”
Button Edit จะแสดงเมื่อ Module = Detail เท่านั้น และทำการตั้งค่า OnsSelect ใส่สูตร Set(var_module”Edit”)
จากนั้นคลิกที่ Edit form ไปที่ DefaultMode จะเพิ่มเงื่อนไข Edit เข้าไป
ใส่สูตร If(var_Module = “Detail” , FormMode.View,If(var_Module = “Edit” , FormMode.Edit , FormMode.New))
เมื่อกด Play และคลิกที่ Edit Form จะกลับมาเป็นโหมด Edit เพื่อให้แก้ไขข้อมูลได้ สามารถแก้ไขข้อมูลและกด Save ได้เลย
ข้อมูลใน SharePoint List แและ Gallery จะถูกเปลี่ยนตามข้อมูลที่แก้ไข
จากนั้นจะทำการสร้างปุ่ม Create ข้อมูลใหม่ ที่หน้าจอ Home เพิ่ม Button New Employee และใส่สูตร
Navigate(Screen_Detail); และ Set(var_Module,”New”);
เมื่อกด Play และ คลิกที่ Button New Employee จะแสดงหน้าจอ Edit form สามารถกกรอกข้อมูลและกด Save เพื่อสร้างข้อมูลชุดใหม่
Collection
ตัวแปรชนิดพิเศษที่เก็บข้อมูลแบบเป็นตาราง (หลายแถว หลายคอลัมน์) อยู่ในเครื่องผู้ใช้ชั่วคราว ไม่ได้บันทึกลงแหล่งข้อมูลจริงอย่าง SharePoint หรือ Dataverse ใช้บ่อยตอนอยากเก็บข้อมูลไว้ใช้ข้ามหน้าจอ เพื่อแสดงข้อมูลชั่วคราว หรือพักข้อมูลไว้ก่อนค่อยบันทึกจริงทีหลัง
โดยมี 3 คำสั่งหลัก ๆ
1.ClearCollect ล้างของเก่าทิ้งแล้วใส่ข้อมูลใหม่ทับทั้งหมดในคำสั่งเดียว
สูตร : ClearCollect(ชื่อ Collection, แหล่งข้อมูล)
2.Collect เพิ่มข้อมูลเข้าไปต่อท้ายของเดิม ไม่ลบของเก่าทิ้ง เหมาะกับตอนอยากค่อย ๆ สะสมข้อมูลไปเรื่อย ๆ
สูตร : Collect(ชื่อ Collection, ข้อมูล)
3.Clear ล้างข้อมูลทั้งหมดใน Collection ให้ว่างเปล่า โดยไม่ใส่อะไรกลับเข้าไปใหม่
สูตร : Clear(ชื่อ Collection)
Filter
Filter(แหล่งข้อมูล, เงื่อนไข) ดึงเฉพาะแถวที่ตรงตามเงื่อนไขที่กำหนดออกมาจากแหล่งข้อมูลหรือ Collection โดยไม่แก้ไขข้อมูลต้นทาง ใช้บ่อยที่สุดตอนจะเอาไปแสดงใน Gallery แบบมีเงื่อนไข เช่น โชว์เฉพาะรายการที่ Status เป็น “Pending” หรือค้นหาจากช่อง Search
ทดลองใช้ Filter เพื่อค้นหาข้อมูลใน Gallery ขั้นตอนแรก เพิ่ม TextInput ขึ้นมา จากนั้นคลิกที่ Gallery > Items
ใส่สูตร Filter(M_Employee,First_name = TextInput1.text) ตัวอย่างนี้เป็นการค้นหา First_Name โดย Gallery จะแสดงข้อมูลที่ตรงกับข้อมูลที่กรอกใน TextInput
ตัวอย่าง Filter ข้างต้นนั้น หากไม่มีการกรอกข้อมูลใน TextInput Gallery ก็จะไม่แสดงอะไรเลย หากเราต้องการให้แสดงข้อมูลทั้งหมดเมื่อไม่ได้ Filter สามารถเพิ่มเงื่อนไขลงในสูตรเดิมได้ เพียงเท่านี้ Gallery ก็จะแสดงข้อมูลทั้งหมดเมื่อไม่ได้กรอกข้อมูล Filter
สูตร : Filter(M_Employee,Isblank(TextInput1.text) Or First_name = TextInput1.text) แต่สูตรนี้ต้องพิมพ์ค้นหาให้ตรงกับชื่อที่ต้องการค้นหา แต่ยังมีอีกสูตรที่ช่วยให้ค้นหาได้ง่ายขึ้น เช่น ค้นหาด้วยอักษรขึ้นต้น สามาใช้สูตร StartsWith
สูตร : Filter(M_Employee,Isblank(TextInput1.text) Or StartsWith(First_name,TextInput1.text))
แต่สูตรข้างต้นต้องพิมพ์ค้นหาให้ตรงกับชื่อที่ต้องการค้นหา แต่ยังมีอีกสูตรที่ช่วยให้ค้นหาได้ง่ายขึ้น เช่น ค้นหาด้วยอักษรขึ้นต้น
ด้วยการใช้สูตร StartsWith สูตร : Filter(M_Employee,Isblank(TextInput1.text) Or StartsWith(First_name,TextInput1.text))
นอกจากนี้เรายังสามารถเพิ่มเงื่อนไขมากกว่า 1 เงื่อนไขเช่น ค้นหา Last_name ตัวอย่างเช่น
ใช้สูตร Filter(M_Employee,Isblank(TextInput1.text) Or StartsWith(First_name,TextInput1.text)) Or Isblank(TextInput1.text) Or StartsWith(Last_name,TextInput1.text)) จากสูตรนี้เมื่อพิมพ์ Filter ใน TextInput จะค้นหาทั้ง First_name และ Last_name ที่ขึ้นต้นด้วยตัวอักษรที่พิมพ์ลงใน TextInput
จากนั้นไปที่ OnStart คำสั่งใน OnStart จะทำงานเมื่อเปิดระบบ ใส่สูตร ClearCollect(col_gender,{Gender:”Female”},{Gender:”Male”},{Gender:”Other”}) จากนั้น คลิกขวาที่ App เลือก Run OnStart เพื่อให้ คำสั่งใน OnStart ทำงานใหม่อีกครั้ง
เพิ่ม Combobox Gender จากนั้น นำชื่อ Collection col_Gender มาใส่ที่ Items ของ Combobox ที่พึ่งสร้าง
จากนั้นคลิกที่ Gallery และเพิ่มคำสั่งต่อท้ายจากเดิมด้วย And
Filter(M_Employee,Isblank(TextInput1.text) Or StartsWith(First_name,TextInput1.text)) Or Isblank(TextInput1.text) Or StartsWith(Last_name,TextInput1.text) And (Isblank(Combobox1.selected.Gender) Or Gender = Combobox1.Selected.Gender)) จะสามารถคนหาทั้ง First_name , Last_name และ Gender ได้
จากนั้น Save และ Publish เพียงเท่านี้ แอปก็พร้อมใช้งานแล้ว
การเปรียบเทียบ: Basic vs Intermediate Canvas Apps
| มิติการทำงาน | Basic Canvas Apps | Intermediate Canvas Apps |
| โครงสร้างหน้าจอ | ใช้ EditForm สดจากตัวสร้างสำเร็จรูป | ออกแบบคอนโทรลแยกอิสระ (Custom UI) |
| การบันทึกข้อมูล | สั่งงานผ่าน SubmitForm(FormName) | บันทึกเฉพาะจุดด้วย Patch() |
| การรับข้อมูลหลายรายการ | บันทึกทีละ 1 รายการต่อ 1 ฟอร์ม | พักข้อมูลใน Collection แล้ว Patch พร้อมกัน |
| ประสิทธิภาพระบบ | ดึงข้อมูลจาก Server ทุกครั้งที่มีการเปลี่ยนแปลง | ประมวลผลบน RAM ผ่าน Collection ก่อนส่งไป Server |
ประโยชน์ที่ได้รับเมื่อนำไปปรับใช้จริง
- แก้ปัญหาความล่าช้า (Performance Optimization): แอปไม่ต้องรอดึงข้อมูลจาก Server ทุกครั้งที่ผู้ใช้คลิกปุ่ม
- จัดการเวิร์กโฟลว์ซับซ้อนได้จบในปุ่มเดียว: เช่น การสร้างเอกสารแบบ Header & Details (เช่น ใบสั่งซื้อ 1 ใบที่มีรายการสินค้า 10 รายการ) สามารถบันทึกข้ามตารางพร้อมกันได้อย่างแม่นยำ
- ยกระดับประสบการณ์ผู้ใช้งาน (UX): หน้าจอทำงานได้รวดเร็ว ตอบสนองทันที และไม่มีข้อจำกัดเรื่องเค้าโครงฟอร์มสำเร็จรูป
— THE MATRIX × MICROSOFT —