Bạn đang tìm cách tùy chỉnh giao diện hiển thị dữ liệu trong danh sách SharePoint Online của mình? Bài viết này sẽ hướng dẫn bạn cách kết hợp tính năng wrap text (tự động xuống dòng), màu sắc và định dạng chiều rộng cột một cách dễ dàng bằng cách sử dụng JSON. Việc làm này giúp bạn trình bày thông tin một cách rõ ràng, dễ đọc và chuyên nghiệp hơn.
JSON (JavaScript Object Notation) là một định dạng dữ liệu nhẹ, dễ đọc và dễ viết. Trong SharePoint Online, JSON được sử dụng để định dạng các cột và chế độ xem danh sách, cho phép bạn tùy chỉnh giao diện mà không cần phải viết code phức tạp. Dưới đây là một số lợi ích của việc sử dụng JSON để định dạng cột:
Tính năng wrap text cho phép văn bản dài trong một ô cột tự động xuống dòng, thay vì bị cắt ngắn hoặc tràn ra ngoài. Điều này đặc biệt hữu ích khi bạn có các cột chứa nhiều thông tin.
Để kích hoạt tính năng wrap text, bạn có thể sử dụng đoạn mã JSON sau:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": {
"white-space": "wrap"
},
"txtContent": "@currentField"
}
Cách sử dụng:
Sau khi lưu, nội dung trong cột sẽ tự động xuống dòng nếu quá dài.
Bạn có thể kết hợp tính năng wrap text với màu sắc và định dạng chiều rộng cột để tạo ra giao diện trực quan hơn. Dưới đây là ví dụ về đoạn mã JSON kết hợp cả ba tính năng:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": {
"white-space": "wrap",
"color": "green",
"width": "300px"
},
"txtContent": "@currentField"
}
Giải thích:
"color": "green": Đặt màu chữ của cột thành màu xanh lá cây. Bạn có thể thay đổi thành bất kỳ màu nào bạn muốn (ví dụ: "red", "blue", "#FF0000", "rgb(255, 0, 0)")."width": "300px": Đặt chiều rộng của cột thành 300 pixel. Bạn có thể điều chỉnh giá trị này để phù hợp với nội dung của cột. Lưu ý rằng việc đặt chiều rộng cố định có thể ảnh hưởng đến khả năng wrap text nếu chiều rộng quá nhỏ so với nội dung. Hãy thử nghiệm với các giá trị khác nhau để tìm ra sự cân bằng phù hợp.Để đảm bảo tính tương thích và tận dụng các tính năng mới nhất, bạn nên sử dụng schema phiên bản v2 cho định dạng cột JSON. Thay đổi dòng đầu tiên của đoạn mã JSON như sau:
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json"
Bạn có thể kết hợp nhiều thuộc tính CSS trong thuộc tính "style" để tùy chỉnh giao diện của cột một cách toàn diện hơn. Ví dụ:
"style": {
"white-space": "wrap",
"color": "green",
"width": "300px",
"font-weight": "bold",
"background-color": "#f0f0f0"
}
Trong ví dụ này, chúng ta đã thêm thuộc tính "font-weight": "bold" để in đậm chữ và "background-color": "#f0f0f0" để đặt màu nền cho cột.
Khi bạn đặt chiều rộng cố định cho cột (ví dụ: "width": "300px"), tính năng wrap text có thể không hoạt động như mong đợi nếu chiều rộng quá nhỏ so với nội dung. Hãy thử nghiệm với các giá trị khác nhau để tìm ra sự cân bằng phù hợp giữa chiều rộng cột và khả năng wrap text. Bạn cũng có thể sử dụng giá trị "auto" cho chiều rộng để cột tự động điều chỉnh theo nội dung.
Để tìm hiểu thêm về định dạng cột trong SharePoint Online bằng JSON, bạn có thể tham khảo tài liệu chính thức của Microsoft:
Định dạng cột trong SharePoint Online bằng JSON là một cách mạnh mẽ và linh hoạt để tùy chỉnh giao diện hiển thị dữ liệu trong danh sách của bạn. Bằng cách kết hợp tính năng wrap text, màu sắc và định dạng chiều rộng cột, bạn có thể tạo ra các danh sách SharePoint có giao diện đẹp mắt, chuyên nghiệp và dễ sử dụng. Hãy thử nghiệm với các đoạn mã JSON khác nhau và khám phá các khả năng tùy chỉnh để tạo ra giao diện phù hợp nhất với nhu cầu của bạn.
Bài viết liên quan