ปรับ Layout หรือ เพิ่ม functions กับ SharePoint List (Form) ด้วย Power Apps (SharePoint Integration)

Content difficulty — moderate

ตัวอย่างเปลี่ยนจาก Form ดังเดิมของ SharePoint ใส่ style ของ Power Apps + ความสามารถเพิ่มเติม

SharePoint List เป็นหนึ่งใน feature ที่คนที่ใช้ Office 365 ระดับองค์กรน่าจะหยิบนำมาใช้เพื่อเก็บข้อมูลในรูปแบบต่างๆของส่วนงานภายใน ซึ่งสามารถกำหนด Column types (Data types) ได้โดยที่ในตัวมันเองก็มีเป็น form based ให้ user ได้เข้ามา input ข้อมูลซึ่งก็จะเป็นรูปแบบที่ SharePoint ให้มา (Default SharePoint form)

ซึ่ง Theme ของ Form ก็จะ based จาก Theme ของ SharePoint Site นั้นๆที่ setup กันมา โดยใน List แต่ละ column type ก็จะมี input control การกรอกไม่เหมือนกัน เช่น Single line of text ก็จะเป็น Textbox หรือ Date and Time ก็จะได้เป็น DatePicker (Calendar) ซึ่งก็เป็นพื้นฐานที่เปลี่ยนหน้าตาไม่ได้

SharePoint List Form

แต่ในระยะหลังก็มีการใช้ตัว Power Apps เพื่อเป็น form ให้เพื่อให้ user เข้าถึงง่ายขึ้นรวมถึงมี Input control ที่ปรับ style หลากหลายมากว่า input พื้นฐาน

Power Apps Form (Connect กับ SharePoint List)

อันที่จริงแล้วเราสามารถรวม Power Apps Canvas style มาใน SharePoint List และเพิ่มความสามารถของ Form ทั่วไปของ SharePoint List ได้ซึ่งเรียกว่า SharePoint Integration ซึ่งเป็น low code ตาม style ของ Power Apps ซึ่ง build in และไม่ต้องถึงขนาดใช้ customization เช่น C# หรือ InfoPath มาช่วย

• ซึ่ง feature ตัวนี้ ก็จะมาแทนการใช้งาน InfoPath ของ SharePoint Online
• โดยตัวมันจะไม่ Responsive หรือใช้ใน Power Apps mobile App ไดัเพราะทำตัวเป็น tile เสริมของ SharePoint List

โดย permission user ในการสร้าง, add/edit item ก็ตาม permission ของ SharePoint Site และ List แบบเดิม และในส่วน license requirement ก็ใช้ Based-line ของ Office 365

ในเบื้องลึก role group ที่สร้าง SharePoint form customizationได้ก็คือ Environment Maker role ซึ่งใน Default environment ตัว user บน Office 365 จะได้ role นี้อยู่แล้ว

เริ่มต้นการสร้างไปที่ SharePoint List เราแล้วเลือกในส่วน Integrate -> Power Apps -> Customized forms

Customized Form

ระบบจะพาเราเข้ามาใน Power Apps ซึ่งก็จะอารมณ์เดียวกับเราสร้าง Canvas App ที่ Connect กับ SharePoint List ที่เป็นการสร้าง

FormScreen (Form เป็นส่วนให้ user ทำการ add หรือ edit ข้อมูล)

ถ้าออกมาแล้วสามารถกลับเข้าไปหน้า edit ใหม่โดยวิธีเดิม Integrate -> Power Apps -> Customized forms

ถ้ามีการไปเปลี่ยน Site Address ของ SharePoint อาจจะต้องสร้าง Form ตัวนี้ใหม่

อาจจะมีบาง Column types ใหม่ๆของ SharePoint List ที่ยังไม่ support กับ Data types ของ Power Apps

List templates (เช่น App พวก Announcements, Tasks)อาจจะยังไม่ support การ integrate ตัว Form กับ Power App

SharePoint integration customized form

จะมีระบุว่าเป็น SharePoint Integration อยู่

ซึ่งเราก็สามารถใช้ Skill ความรู้ของ Power Apps canvas ในการ add control ข้อมูลและเปลี่ยนรูปแบบ สีต่างๆได้ดังตัวอย่างของ SharePoint List (ชื่อว่า Content Scheduler) ข้างล่าง

ตัวอย่าง SharePoint List และ column

มีการปรับ style สี, เปลี่ยน order, control การกรอกข้อมูล, เพิ่ม conditional formatting และเพิ่มปุ่มส่ง email

ในการเพิ่ม function ที่มีมากว่าของที่ SharePoint List เช่น ในบทความนี้จะทดลองโดยทำการเพิ่มปุ่มส่ง email เพิ่มเติมง่ายๆ ซึ่งมี ช่องให้ user กรอกผู้รับแล้วคนรับจะได้ link to item ของ SharePoint List นั้น

เขียน function ให้มีปุ่งส่ง email แล้วโดดไปอีก screen ว่า complete

ตรงส่วน Form สามารถเขียน function เพิ่มเติมได้ เช่น เมื่อ Save form (OnSave) ให้ทำอะไรต่อ

เมื่อ edit เสร็จแล้วก็ publish ความเปลี่ยนแปลงได้

Edit เสร็จก็สามารถ publish ความเปลี่ยนแปลงได้ (คลิก Back to SharePoint)

ก่อนใช้ Power Apps มา integrate

หลัง integrate แล้วทดลองใส่ข้อมูล แล้ว save ได้

นอกจากเปลี่ยน style แล้วเพิ่ม function อื่น เช่น field ที่ส่ง email ในด้านล่าง

ทดลองส่ง email

ได้รับ email ตาม parameter ว่าให้เข้ามาดู list item นี้

เมื่อ user คลิกเข้ามาดู Link to item

ใน Power Apps portal จะเห็น canvas app ชื่อเดียวกับ SharePoint List อยู่ซึ่งถ้าเข้าตรงนี้จาก edit mode จะไม่ได้เป็นตัว style ที่ผูกกับ SharePoint ที่เราเพิ่งทำไปเมื่อครู่ ซึ่งถ้าจะเข้าไปตรงนั้นให้ไปเข้าที่ SharePoint List นั้นเหมือนเดิมคือ Integrate -> Power Apps -> Customized forms

ใน Portal ของ Power App ก็จะเห็นการสร้าง canvas app ชื่อเดียวกับ SharePoint List

ถ้าเข้ามาจะไม่ใช่ SharePoint integration mode

ในส่วนของคนที่สร้าง SharePoint List ก็สามารถมา manage การใช้ Power Apps form ใน List ได้โดยไปที่ List settings -> Form settings

List settings

เลือกได้ว่าจะกลับมาเป็นแบบเดิมหรือไม่

พอเลือกเป็น default จะสามารถให้ owner ไปคลิก delete ได้

ใน SharePoint ของ Document Library ก็จะสามารถ Customized Form ได้เช่นกันแต่จะ support แค่การไปสร้างเพื่อ edit ตัว metadata ตาม custom column ที่ user สร้างเท่านั้น ไม่ได้เป็นการ manage ตัว file แต่อย่างใด

สร้าง form ตาม custom column จาก document library

ในส่วนถ้าองค์กรไหนมีการทำ Center of Excellence (CoE) ก็สามารถเห็น list ของ SharePoint Integration ทั้งหมดในองค์กรเช่นกัน

ดูผ่าน Power BI Template ของ CoE