ใน EP นี้เราจะพาทุกคนไปเจาะลึกใน Canva Apps การแสดงข้อมูลผ่าน Gallery และ การบันทึก แก้ไข ผ่าน Edit form
Beginner Canvas Apps
คือจุดเริ่มต้นแรกสำหรับผู้ที่ต้องการสร้างแอปพลิเคชันใช้งานเองในองค์กรโดยไม่ต้องเขียนโค้ดซับซ้อน (Low-Code Framework) ความพิเศษของ Canvas Apps อยู่ที่แนวคิด “What You See Is What You Get” (WYSIWYG) หรือการลากวางองค์ประกอบหน้าจอและกำหนดตรรกะการทำงานได้อย่างอิสระคล้ายกับการทำ PowerPoint ร่วมกับ Excel
Gallery
คอนโทรลสำหรับแสดงรายการข้อมูลซ้ำ ๆ กันหลายแถว/หลายการ์ด เช่น รายชื่อลูกค้า, สินค้า หรือคำขอเบิกต่าง ๆ ดึงข้อมูลจากแหล่งข้อมูล (SharePoint, Excel, Dataverse) มาวนแสดงให้อัตโนมัติ โดยไม่ต้องสร้างการ์ดทีละอันเอง
กดที่ Insert จากนั้น เลือก Vertical gallery จะได้ Gallery ออกมา
จากนั้นจะทำการเชื่อมต่อ Data ด้วยการคลิกที่ แถบที่ 3 ด้านซ้าย > Add Data > เลือก Sharepoint
จากนั้น เลือก Site และ List Sharepoint ที่เราต้องการเชื่อมต่อ Data เมื่อเสร็จแล้วกด Connect
เมื่อทำการ Connect แล้ว Sharepoint List ที่เลือกจะถูกดึงข้อมลมายัง Power Apps
จากนั้นจะทำการเชื่อมต่อ List Sharepoint กับ Gallery
โดยคลิกที่ Gallery > Data source > เลือก List Sharepoint ที่ทำการเชื่อมต่อไว้ก่อนหน้า
เมื่อเชื่อม List Sharepoint กับ Gallery แล้ว ข้อมูลจะแสดงบน Gallery โดยสามารถปรับ Layout ของ Gallery ได้
โดยคลิกที่ Layout จะมีรูปแบบ List Layout ให้เลือกหลายรูปแบบ และยังสามารถปรับแต่งตารางหรือข้อมูลต่างๆใน Gallery ได้อีกด้วย
การดึงข้อมูลมาแสดงใน Gallery จะใช้คำสั่ง Thisitem. ตามด้วย ชื่อ Column ใน Sharepoint ที่เราต้องการดึงข้อมูลมาแสดง
เช่น Thisitem.ID , Thisitem.FullName,Thisitem.Status
เมื่อดึงข้อมูลที่ต้องการแล้ว เรายังสามารถใส่สูตรแสดงสีของแต่ละ Status ของใบงานได้อีกด้วย โดยการเพิ่ม Button หรือ Text label สำหรับดึง Column ที่เราต้องการมาแสดง ตัวอย่าง :
เพิ่ม Button จากนั้น ที่ Text ของ Button ใส่ Thisitem.approval_status (ชื่อ Column ที่เราต้องการ) ปุ่ม Button ก็จะแสดง Text ที่ดึงข้อมูลมาจาก Column ที่เราเลือก และที่ Fill ของ Button เราจะกำหนดสีของแต่ละ Status ด้วยการใส่สูตร :
If(Thisitem.approval_status = “approved” ,Color.Green,If(Thisitem.approval_status = “rejected”,Color.Red,Color.Yellow))
โดยสูตรที่ใส่นั้น มีเงื่อนไข่ว่า หาก approval_status = “approved” จะเป็นสีเขียว หาก approval_status = “rejected” จะเป็นสีแดง
และหาก approval_status ไม่ใช่ “approved” หรือ “rejected” จะเป็นสีเหลือง
Edit form
คอนโทรลสำหรับสร้างฟอร์มกรอก/แก้ไขข้อมูลแบบผูกกับแหล่งข้อมูลโดยตรง พอเลือกคอลัมน์ที่จะให้กรอก ระบบจะสร้างช่องกรอกที่ตรงกับชนิดข้อมูลให้อัตโนมัติ (เช่น วันที่ ตัวเลข ข้อความ) ใช้ได้ทั้งเพิ่มข้อมูลใหม่และแก้ไขของเดิม
กดที่ Insert > เลือก Edit form
จากนั้น ทำการเชื่อม List Sharepoint กับ Edit form โดยคลิกที่ Edit form > Data > List Sharepoint
เมื่อเชื่อม Edit form กับ Sharepoint เสร็จแล้ว ตัว Edit form จะแสดง Data card ต่างๆ และ เรายังสามารถ เพิ่ม หรือ ลบ Data card ได้
โดยกดไปที่ Edit form > Properties > Fields หากต้องการลบ ให้คลิกที่ จุด 3 จุด และเลือก Remove
หากต้องการเพิ่มให้เลือกที่ + Add field และยังสามารถ สลับตำแหน่งของ Data card ได้อีกด้วย โดยการคลิกค้างแล้วลากสลับตำแหน่ง
เมื่อเราสร้าง Edit form แล้วต้องการแก้ไข Data card ต้องทำการปลดล็อค Data card ก่อน
โดยคลิกที่ Data card ที่ต้องการแก้ไข > Properties > Advanced > Unlock change properties. เพื่อปลดล็อค Data card จึงจะสามารถแก้ไข Data card ให้เป็นแบบที่เราต้องการได้
คลิกที่ Data card travel_purpose > เพิ่ม Combobox > ลบ TextInput เดิมออก
และเพิ่ม Choice ให้กับ Combobox โดยคลิกที่ Combobox1 > Items > เพิ่ม [“conference”,”meeting”,”traning”]
จากนั้น คลิกที่ Data card travel_purpose เปลี่ยน Update ให้เป็น Combobox1.selected.value1
การ Submit form ให้เพิ่ม Button ขึ้นมาเพื่อใส่คำสั่งให้บันทึกข้อมูลที่กรอกในฟอร์ม
โดยใส่สูตร SubmitForm(Form1) ที่ Onselect ของ Button เพียงเท่านี้ก็สามารถ บันทึกข้อมูลลง Sharepoint List ได้แล้ว
กด Play > กรอกข้อมูล > Submit ข้อมูลจะถูกบันทึกลง Sharepoint List ที่เราเชื่อมต่อไว้
จากนั้นกลับไปยัง Screen3 (Screen Gallery) คลิกที่ Gallery > คลิกที่ Column ที่ต้องการให้เป็นปุ่มนำทางไปยังหน้า Create/Edit
ที่ OnSelect ใส่สูตร Navigate(Screen4); และ Set(var_modue,”edit”) หากคลิกแล้วจะไปยัง Screen 4 เพื่อแก้ไขข้อมูล
แต่หากต้องการสร้างข้อมูลใหม่ ให้สร้าง Button ขึ้นมานอก Gallery จากนั้นเปลี่ยนชื่อเป็น Create และ ที่ OnSelect ของ Button Create
ให้ใส่สูตร Navigate(Screen4); Set(var_modue,”new”); และ ResetForm(ชื่อForm);
ต่อมาจะทำการปรับ DefaultMode ของ Edit form โดยคลิกที่ Edit form เลือก DefaultMode
จากนั้นใส่สูตร If(var_modue = “new” , FormMode.New , FormMode.Edit)
Publish
ขั้นตอนเผยแพร่แอปเวอร์ชันล่าสุดให้กลายเป็นเวอร์ชันที่ผู้ใช้งานจริงเห็น ต่างจาก Save ตรงที่ Save เป็นแค่การเก็บงานแบบร่างไว้ในเครื่องมือแก้ไข ส่วน Publish คือการ “อัพเดทเวอร์ชั่นล่าสุดที่ได้ Save ไว้” ให้ทุกคน
กด Save เพื่อบันทึก
เมื่อ Save แล้ว กดที่ปุ่ม Publish > Publish this version เพียงเท่านี้แอปที่ใช้งานก็จะเป็นเวอร์ชั่นล่าสุดแล้ว
เมื่อเข้าไปยังแอป จะมี warning tab ด้านบนเพื่อบอกว่า version ใหม่กำลังจะมา
เมื่อ version ใหม่พร้อมใช้แล้ว จะมี refresh tab ขึ้นมาอีก ทำการกด Refresh ได้เลย
และแอปจะให้ Allow connector ทำการกด Allow เพียงเท่านี้ก็สามารถใช้งานแอปในเวอร์ชั่นล่าสุดได้แล้ว
— THE MATRIX × MICROSOFT —
เมื่อทำความเข้าใจการวางโครงสร้าง Studio, การเลือกใช้ Controls ให้เหมาะสมกับงาน และการเขียนสูตร Power Fx พื้นฐานเพื่อเชื่อมหน้าจอและบันทึกข้อมูลได้แล้ว ผู้พัฒนาจะสามารถสร้าง “แอปพลิเคชัน CRUD” (Create, Read, Update, Delete) พื้นฐาน เช่น ระบบลงทะเบียน, ระบบแจ้งซ่อม หรือฟอร์มเก็บข้อมูลเบื้องต้นได้ทันที ก่อนจะก้าวไปสู่ระดับ Intermediate ที่ต้องบริหารจัดการข้อมูลซับซ้อนขึ้นด้วย Collections และ Patch ต่อไป
อ้างอิง : https://learn.microsoft.com/en-us/power-platform/power-fx/overview