กลับไปหน้า SharePoint
ทริคSharePoint

แต่ง List ด้วย JSON Formatting

แต่งคอลัมน์ SharePoint list ด้วย JSON — ป้ายสีสถานะ แถบ progress โดยไม่ต้องเขียนแอป.

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

แต่ง List ด้วย JSON Formatting คือเรื่องที่ช่วยให้เราใช้จัดการเว็บทีม ไฟล์ รายการข้อมูล และสิทธิ์การเข้าถึงได้ถูกทางขึ้น

ระดับ

เหมาะกับคนที่เริ่มลงมือทำแล้ว

ใช้เมื่อไหร่

อยากให้คอลัมน์สถานะอ่านปุ๊บรู้ปั๊บ (สีเขียว/เหลือง/แดง) โดยไม่ต้องสร้าง Power Apps

อ่านแล้วทำอะไรต่อ

คอลัมน์ Choice มีแบบสำเร็จรูป — Format this column > เลือกสีต่อค่าได้เลย ไม่ต้องแตะ JSON แล้วค่อยกด Advanced เมื่ออยากปรับเกิน

เห็นภาพ: ทริคนี้เป็นยังไง

ก่อนแต่ง

สถานะ เสร็จ กำลังทำ เลยกำหนด

หลังแต่งด้วย JSON

สถานะ 🟢 เสร็จ 🟡 กำลังทำ 🔴 เลยกำหนด

คอลัมน์สถานะข้อความล้วน เทียบกับหลังแต่งด้วย JSON — อ่านปุ๊บรู้ปั๊บ

ใช้ตอนไหน?

  • อยากให้คอลัมน์สถานะอ่านปุ๊บรู้ปั๊บ (สีเขียว/เหลือง/แดง) โดยไม่ต้องสร้าง Power Apps
  • list ถูกใช้เป็น tracker ของทีม อยากให้ดู professional ขึ้นทันที
  • ต้องการไฮไลต์แถวที่เลยกำหนด หรือทำปุ่มลิงก์ในแต่ละแถว

ความหมาย

list formatting คือการแต่งการแสดงผลคอลัมน์หรือทั้งแถวของ SharePoint list ด้วยโครง JSON ที่ Microsoft กำหนด เช่น เปลี่ยนคอลัมน์สถานะเป็นป้ายสี เพิ่มไอคอน หรือทำแถบความคืบหน้า — ข้อมูลจริงไม่เปลี่ยน เปลี่ยนแค่หน้าตาที่คนเห็น และมีแบบสำเร็จรูปให้เลือกก่อนเขียนเอง

โครง JSON แต่งคอลัมน์สถานะ

เปิดหัวคอลัมน์ > Column settings > Format this column แล้ววาง JSON (หรือเลือกแบบสำเร็จรูปก่อน)

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'เสร็จ', 'sp-css-backgroundColor-successBackground50', 'sp-css-backgroundColor-warningBackground50')"
  },
  "txtContent": "@currentField"
}

ตัวอย่างการใช้

ป้ายสีสถานะแบบไม่เขียนเอง

คอลัมน์ Choice มีแบบสำเร็จรูป — Format this column > เลือกสีต่อค่าได้เลย ไม่ต้องแตะ JSON แล้วค่อยกด Advanced เมื่ออยากปรับเกิน