Blog นี้เราจะมากำหนดรูปแบบการแสดงผล Column ของ SharePoint List กันนะคะ ซึ่งทำได้ง่าย ๆ สบาย ๆ อีกแล้วค่า โดยการกำหนดรูปแบบให้กับ Column ของ SharePoint List นั้น จะใช้ JSON text format นะคะ
ไม่รู้จัก JSON มาก่อนจะทำได้หรือป่าว ? ได้สิคะ เพราะมีตัวอย่าง JSON ที่เราสามารถหยิบเอามาใช้และแก้ไขให้ตรงกันกับข้อมูลของเราได้ โดยที่ไม่ต้องเข้าใจ JSON ให้มากมายก็ได้ เหมือนกับผู้เขียน (แฮ่ ๆ) ถึงได้บอกไงละคะว่า ง่าย ๆ สบาย ๆ อีกแล้ว ส่วนใครที่เข้าใจและใช้ JSON อยู่แล้ว ก็ไม่ต้องพูดมากให้เจ็บคอ สบายบรื๋อออ แน่นอน
Blog นี้ ผู้เขียนขอรวบรวมเอาการกำหนดรูปแบบให้กับ Column ที่มีชนิดฟิลด์ข้อมูลเป็น Choice หรือ Text กันก่อนนะคะ
Column formatting เป็นการกำหนดรูปแบบของ Column ไม่ได้มีผลกับข้อมูลใน Column นะคะ
Let’s Play –
ก่อนอื่นไปที่ Column ของ List ที่เราต้องการจัดรูปแบบ แล้วคลิกหัวของ column นั้น แล้วเลือกเมนู “Column Settings” และเลือก “Formatting this column” ดังรูป อย่างตัวอย่าง ผู้เขียนอยากจัดรูปแบบของ column สถานะ
![](https://sysadmin.psu.ac.th/wp-content/uploads/2020/11/image-207.png)
ส่วนของ Format columns Panel ก็จะโผล่ขึ้นมา ดังรูป เอา JSON มาวาง แก้ไขตามข้อมูลของเรา แล้ว บันทึก (Save) เท่านี้ก็เป็นอันเสร็จ สมหวังดั่งตั้งใจ
![](https://sysadmin.psu.ac.th/wp-content/uploads/2020/11/image-203.png)
มาลองทำกันซัก 2 ตัวอย่างนะคะ
![](https://sysadmin.psu.ac.th/wp-content/uploads/2020/11/image-234.png)
ตัวอย่างแรก สีจะมาจาก Class ส่วน ICON เปลี่ยนได้ ก็หยิบมาใช้ได้จากที่นี้นะคะ Fluent UI Icons
![](https://sysadmin.psu.ac.th/wp-content/uploads/2020/11/image-214.png)
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"attributes": {
"class": "=if(@currentField == 'เสร็จสิ้น', 'sp-field-severity--good', if(@currentField == 'รอดำเนินการ', 'sp-field-severity--low', if(@currentField == 'ดำเนินการแล้วรอทดสอบ', 'sp-field-severity--warning', if(@currentField == 'รอเปิดโครงการ', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 2px"
},
"attributes": {
"iconName": "=if(@currentField == 'เสร็จสิ้น', 'CheckMark', if(@currentField == 'รอดำเนินการ', 'Forward', if(@currentField == 'ดำเนินการแล้วรอทดสอบ', 'Error', if(@currentField == 'รอเปิดโครงการ', 'Warning', 'ErrorBadge'))))"
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}
มากันที่ตัวอย่างที่ 2 JSON ตามด้านล่าง ตัวอย่างนี้สำหรับใครอยากเปลี่ยนสี ก็แก้ไขโค้ดสีกันได้เลยค่ะ ส่วนใครอยากจะใช้ ICON อื่น ก็หยิบมาใช้ได้จากที่นี้ Fluent UI Icons เช่นเดิมนะคะ
![](https://sysadmin.psu.ac.th/wp-content/uploads/2020/11/image-211.png)
{
"elmType": "div",
"style": {
"background-color": "=if(@currentField == 'ดีมาก', '#7ed9a1', if(@currentField == 'ดี','#eded6b', '#f27ce0'))",
"color": "#0d0101",
"white-space": "nowrap"
},
"children": [
{
"elmType": "span",
"txtContent": "@currentField",
"style": {
"font-size": "1em",
"display": "inline-block",
"padding": "0 3px"
},
"attributes": {
"iconName": "=if(@currentField == 'ดีมาก', 'Emoji', if(@currentField == 'ดี','Emoji2', 'EmojiNeutral'))"
}
}
]
}
สำหรับ Blog นี้ ก็ฝากกันเอาไว้เท่านี้ก่อนนะคะ ขอให้สนุกกับ SharePoint List กันนะค่า 🙂 สำหรับ Blog หน้า มากำหนดรูปแบบฟิลด์ชนิดอื่นกันอีกนะคะ
Ref:
https://pnp.github.io/sp-dev-list-formatting/
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting