Hiển thị các biểu tượng tùy chỉnh cùng với các giá trị dạng xem danh sách
Quản trị viên và người tùy chỉnh môi trường Power Apps có thể thêm đồ họa vào dạng xem và thiết lập lô-gic dùng để chọn đồ họa dựa trên giá trị cột bằng JavaScript. Khả năng này cho phép bạn tùy chỉnh dạng xem danh sách hiển thị các biểu tượng cùng với văn bản hoặc giá trị số.
Ví dụ này hiển thị các biểu tượng tùy chỉnh trong dạng xem cho bảng cơ hội, có sẵn với một số ứng dụng nhất định, chẳng hạn như Dynamics 365 Sales. Bạn có thể hiển thị các biểu tượng tùy chỉnh trong dạng xem với các bảng tiêu chuẩn khác, chẳng hạn như bảng tài khoản hoặc liên hệ, cũng như các bảng tùy chỉnh.
Các biểu tượng tùy chỉnh trong chế độ xem danh sách có thể hiển thị trong Giao diện Hợp nhất, máy khách web cũ, ứng dụng di động và Ứng dụng cho Outlook.
Lưu ý
Biểu tượng tùy chỉnh không khả dụng khi ứng dụng ở chế độ ngoại tuyến trên thiết bị di động.
Thêm đồ hoạ và JavaScript tùy chỉnh dưới dạng tài nguyên web
Tạo các tệp đồ họa mới cần thiết để tùy chỉnh. Chúng đề xuất sử dụng biểu tượng có kích cỡ 16 x 16 pixel (hình ảnh lớn hơn sẽ được thu nhỏ lại).
Viết một hoặc nhiều chức năng JavaScript thiết lập các biểu tượng để hiển thị cho giá trị (thông thường, bạn sẽ cần một chức năng cho mỗi cột mình muốn tùy chỉnh). Mỗi chức năng phải chấp nhận một đối tượng dữ liệu hàng và mã ngôn ngữ (LCID) làm đầu vào và trả về một mảng chứa tên hình ảnh và văn bản chú giải công cụ. Để biết ví dụ về hàm, hãy xem Mẫu hàm JavaScript ở phần sau của bài viết này.
Đăng nhập vào môi trường của bạn với tư cách là quản trị viên và mở trình khám phá giải pháp.
Cửa sổ bật lên Giải pháp mặc định sẽ mở ra. Điều hướng đến Thành phần > Tài nguyên Web ở đây.
Bây giờ, bạn sẽ tải lên từng đồ họa tùy chỉnh một dưới dạng tài nguyên web. Chọn nút Mới trên thanh công cụ để tạo tài nguyên web mới. Một cửa sổ bật lên khác sẽ mở ra để giúp bạn tạo tài nguyên. Làm theo các bước sau:
Đặt Tên có nghĩa cho tài nguyên mới. Đây là tên bạn sẽ sử dụng để đề cập đến từng đồ họa từ mã JavaScript của mình.
Thiết lập Loại cho định dạng đồ họa bạn đã sử dụng để lưu tệp đồ họa của mình (PNG, JPEG hoặc GIF).
Chọn Chọn Tệp để mở một cửa sổ trình duyệt tệp. Sử dụng cửa sổ này để tìm và chọn tệp đồ họa của bạn.
Thêm Tên hiển thị và/hoặc Mô tả nếu bạn muốn.
Chọn Lưu rồi đóng cửa sổ Tài nguyên Web.
Lặp lại bước trước đó cho mỗi tệp đồ họa mà bạn có.
Bây giờ, bạn sẽ thêm JavaScript làm tài nguyên web cuối cùng. Chọn Mới trên thanh công cụ để tạo tài nguyên web mới. Một cửa sổ bật lên khác sẽ mở ra để giúp bạn tạo tài nguyên. Thực hiện những điều sau đây:
Đặt Tên có nghĩa cho tài nguyên mới.
Đặt Loại thành Mã lệnh (JScript).
Chọn Trình chỉnh sửa Văn bản (bên cạnh thiết đặt Loại) để mở cửa sổ trình chỉnh sửa văn bản. Dán mã Javascript của bạn vào đây và chọn OK để lưu.
Thêm Tên hiển thị và/hoặc Mô tả nếu bạn muốn.
Chọn Lưu rồi đóng cửa sổ Tài nguyên Web.
Với cửa sổ bật lên Giải pháp mặc định vẫn còn mở, mở rộng cây Thành phần > Bảng và xác định vị trí bảng mà bạn muốn tùy chỉnh.
Mở rộng bảng và chọn biểu tượng Dạng xem.
Bây giờ, bạn thấy một danh sách các dạng xem cho bảng được chọn. Chọn một dạng xem từ danh sách. Sau đó, mở danh sách thả xuống Hành động khác trong thanh công cụ và chọn Chỉnh sửa.
Một cửa sổ bật lên sẽ mở ra với các điều khiển để chỉnh sửa dạng xem mà bạn chọn. Cửa sổ này hiển thị từng cột là một phần của dạng xem. Chọn cột mục tiêu rồi chọn Thay đổi Thuộc tính trong hộp Nhiệm vụ Phổ biến. Hộp thoại Thay đổi cột thuộc tính mở ra; thực hiện các thiết đặt như sau:
Tài nguyên Web: Chỉ định tên của tài nguyên web mà bạn đã tạo để lưu giữ các chức năng của Javascript (chọn Duyệt để chọn từ một danh sách).
Tên Chức năng: Nhập tên của chức năng mà bạn đã ghi để sửa đổi cột và dạng xem đã chọn.
Chọn OK để đóng hộp thoại Thay đổi Thuộc tính Cột.
Chọn Lưu và Đóng để lưu dạng xem.
Lặp lại các bước này cho mỗi bảng, dạng xem và cột nếu cần.
Khi bạn đã sẵn sàng, hãy chọn Đăng Tất cả Tùy chỉnh để đăng các thay đổi của bạn. Sau đó, đóng cửa sổ Giải pháp Mặc định.
Chức năng JavaScript mẫu
Chức năng JavaScript để hiển thị biểu tượng tùy chỉnh và chú giải công cụ dự kiến hai tham số sau đây: đối tượng toàn bộ hàng được chỉ định trong layoutxml và ID Bản địa (LCID) của người dùng gọi. Tham số LCID cho phép bạn nêu rõ văn bản chú giải công cụ bằng nhiều ngôn ngữ. Để biết thêm thông tin về các ngôn ngữ mà môi trường hỗ trợ, hãy xem Kích hoạt ngôn ngữ và Cài đặt hoặc nâng cấp gói ngôn ngữ. Để có danh sách các giá trị ID bản địa (LCID) bạn có thể sử dụng trong mã, hãy xem ID ngôn ngữ được Microsoft chỉ định.
Giả sử bạn sẽ thêm các biểu tượng tùy chỉnh cho một loại thuộc tính theo được đặt theo tùy chọn, trong đó có một bộ các tùy chọn xác định trước, hãy đảm bảo rằng bạn sử dụng giá trị số nguyên của các tùy chọn thay vì nhãn để tránh các vấn đề về bản địa hóa.
Lưu ý: Nếu cần truy xuất dữ liệu để xác định biểu tượng, Giao diện hợp nhất hỗ trợ trả về đối tượng JavaScript Promise phân giải thành boolean (tương tự như quy tắc ruy băng). Không sử dụng XMLHttpRequest (XHR) đồng bộ trong hàm tùy chỉnh của bạn.
Mã ví dụ sau sẽ hiển thị biểu tượng và chú giải công cụ dựa trên một trong ba giá trị (1: Nóng, 2: Ấm, 3: Lạnh) trong thuộc tính mã xếp hạng cơ hội (Xếp hạng). Mã ví dụ cũng cho thấy cách hiển thị văn bản công cụ chú giải được bản địa hóa. Để mẫu này hoạt động, bạn phải tạo 3 tài nguyên web hình ảnh với các hình ảnh 16x16 có các tên sau: new_Hot, new_Warm và new_Cold.
Quan trọng
Mẫu này đòi hỏi phải có bảng cơ hội, có thể sử dụng với các ứng dụng Dynamics 365 Sales.
function displayIconTooltip(rowData, userLCID) {
var str = JSON.parse(rowData);
var coldata = str.opportunityratingcode_Value;
var imgName = "";
var tooltip = "";
switch (parseInt(coldata,10)) {
case 1:
imgName = "new_Hot";
switch (userLCID) {
case 1036:
tooltip = "French: Opportunity is Hot";
break;
default:
tooltip = "Opportunity is Hot";
break;
}
break;
case 2:
imgName = "new_Warm";
switch (userLCID) {
case 1036:
tooltip = "French: Opportunity is Warm";
break;
default:
tooltip = "Opportunity is Warm";
break;
}
break;
case 3:
imgName = "new_Cold";
switch (userLCID) {
case 1036:
tooltip = "French: Opportunity is Cold";
break;
default:
tooltip = "Opportunity is Cold";
break;
}
break;
default:
imgName = "";
tooltip = "";
break;
}
var resultarray = [imgName, tooltip];
return resultarray;
}
Hành vi hiển thị dạng xem biểu tượng tùy chỉnh
Cột chính
Trong dạng xem danh sách lưới, các biểu tượng tùy chỉnh được áp dụng cho cột chính của bảng sẽ thay thế biểu tượng mặc định do hệ thống tạo.
Các cột khác
Trong dạng xem danh sách lưới, các biểu tượng tùy chỉnh được áp dụng cho cột không phải là cột chính của bảng hiển thị dưới dạng biểu tượng phụ ngoài biểu tượng mặc định do hệ thống tạo.
Biểu mẫu thẻ
Biểu tượng tùy chỉnh thay thế biểu tượng do hệ thống tạo mặc định khi chế độ xem được định cấu hình để sử dụng biểu mẫu thẻ.
Xem thêm
Hiểu dạng xem ứng dụng dựa trên mô hình
Lưu ý
Bạn có thể cho chúng tôi biết bạn thích dùng ngôn ngữ nào cho tài liệu không? Làm một cuộc khảo sát ngắn. (xin lưu ý, khảo sát này bằng tiếng Anh)
Cuộc khảo sát sẽ mất khoảng bảy phút. Không có dữ liệu cá nhân nào được thu thập (điều khoản về quyền riêng tư).