สำหรับบล๊อกนี้ เราจะมาเพิ่มสีสันให้กับ ฟิลด์รายการ (Picklist Field) ของ Work item บน Azure DevOps กันค่า เพราะสีสันเป็นสิ่งที่มีอิทธิพลต่ออารมณ์และความรู้สึกของเรา (และ “มิตรภาพที่ดีก็เหมือนสีที่ติดแน่น ไม่จางหาย” อ่ะไปนั่นนน >,<)
![](https://sysadmin.psu.ac.th/wp-content/uploads/2022/06/image-1024x507.png)
Color picklist control ที่นำมาใช้นั้น จะช่วย
- ระบุความสำคัญของไอเท็ม
- สร้าง visual language (ภาษาภาพ หรือสิ่งที่มองเห็น) ให้กับ ฟิลด์ (field) เพื่อแทนความหมายที่ต้องการจะสื่อสาร
มาเริ่มกันเลยค่า
1. ไปที่ Work Item (ที่ต้องการปรับแต่ง Picklist Field) โดยคลิกเพิ่มเติม … แล้วเลือก “Cuztomize” ดังรูป
![](https://sysadmin.psu.ac.th/wp-content/uploads/2022/06/ภาพ-1024x485.png)
![](https://sysadmin.psu.ac.th/wp-content/uploads/2022/06/image-4-1024x502.png)
3. หน้าต่าง Add a custom control จะแสดงขึ้นมา ให้กดเลือก Control ชื่อ Color picklist control (Microsoft DevLabs) (ซึ่งเราได้ Add ไว้ใช้งานเรียบร้อยแล้ว) แล้วก็กดปุ่ม “OK” Let’s it goooo ดังรูป
![](https://sysadmin.psu.ac.th/wp-content/uploads/2022/06/image-5-1024x502.png)
4. เมื่อเลือก control เรียบร้อยแล้ว ไปที่แท๊ป Option เพื่อเข้าไปกำหนดสี และ Label ให้กับค่าต่างๆ ของ filed โดยให้ทำการเลือก Picklist Filed ที่ต้องการ แล้วระบุ label แล้วทำการกำหนดสี ให้กับแต่ละค่าของรายการใน filed ดังรูป
–> ในตัวอย่าง ผู้เขียนได้กำหนดสี และ Label ให้กับ filed > State ซึ่งมีทั้งหมด 4 ค่า คือ Active;Closed;Proposed ;Resovled และกำหนดสีดังนี้ Blue;Green;Grey;Orange (ในการกำหนดค่าให้ใช้ ; คั้นระหว่างค่าข้อมูล)
![](https://sysadmin.psu.ac.th/wp-content/uploads/2022/06/ภาพ-2-1024x483.png)
5. ไปที่แท๊ป Label กันซักหน่อย เพื่อกำหนด Label ของ Field ที่ต้องการให้แสดง ดังรูป ตัวอย่าง ผู้เขียนตั้งชื่อว่า State แล้วกดปุ่ม “OK” ก็เป็นอันเสร็จเรียบร้อยแล้วละค่า
![](https://sysadmin.psu.ac.th/wp-content/uploads/2022/06/ภาพ-4-1024x487.png)
มาดูหน้าตาหลังดำเนินการกันเรียบร้อยแล้วค่ะ
![](https://sysadmin.psu.ac.th/wp-content/uploads/2022/06/ภาพ-5-1024x485.png)
และในส่วนของหน้าจอกรอกข้อมูล … พอมีสีสันขึ้นมา อู้วววว ดีงามมากเลยค่า 🙂
![](https://sysadmin.psu.ac.th/wp-content/uploads/2022/06/ภาพ-6-1024x396.png)
อ้างอิง : https://marketplace.visualstudio.com/items?itemName=ms-devlabs.color-form-control&ssr=false#overview
https://azure.microsoft.com/en-us/services/devops/#overview
https://www.altv.tv/content/altv-news/623742784e62cb7e583a80a3