Thẻ mẫu Liquid cho thành phần mã
Power Apps component framework trao quyền cho các nhà phát triển chuyên nghiệp và nhà sản xuất ứng dụng để tạo các thành phần mã cho các ứng dụng canvas và ứng dụng dựa trên mô hình. Các thành phần mã này có thể cung cấp trải nghiệm nâng cao cho người dùng làm việc với dữ liệu trên các biểu mẫu, dạng xem và bảng thông tin. Thông tin thêm: Sử dụng thành phàn code trong Power Pages
Quan trọng
Thẻ mẫu Liquid cho các thành phần mã yêu cầu phiên bản cổng thông tin 9.3.10.x trở lên.
Với bản phát hành này, chúng tôi đã giới thiệu khả năng thêm các thành phần mã được tạo bằng thẻ mẫu Liquid trên các trang web và các thành phần đã bật sử dụng API web được kích hoạt cho các thành phần cấp trường trên biểu mẫu trong Power Pages.
Có thể thêm các thành phần mã bằng thẻ mẫu Liquid codecomponent. Khóa để biểu thị thành phần mã cần tải được chuyển bằng thuộc tính name. Khóa có thể là GUID (là ID thành phần mã) hoặc tên của thành phần mã được nhập vào Microsoft Dataverse.
Giá trị của các thuộc tính mà thành phần mã mong đợi cần được chuyển dưới dạng một cặp khóa/giá trị được phân tách bằng ":" (dấu hai chấm), trong đó khóa là tên thuộc tính và giá trị là giá trị chuỗi JSON.
{% codecomponent name: <ID or name> <property1:value> <property2:value> %}
Ví dụ: để thêm một thành phần mã yêu cầu tham số đầu vào có tên controlValue, hãy sử dụng thẻ mẫu Liquid sau:
{% codecomponent name:abc_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value>%}
Tiền bo
Ví dụ này sử dụng các tham số được gọi là controlvalue và controlApiKey, tuy nhiên thành phần mà bạn sử dụng có thể yêu cầu các tên tham số khác nhau.
Bạn có thể sử dụng điều khiển bản đồ mẫu và đóng gói thành phần mã dưới dạng giải pháp để sử dụng với Power Pages.
Lưu ý
Microsoft không hỗ trợ các tài nguyên do cộng đồng tạo. Nếu bạn có thắc mắc hoặc vấn đề với tài nguyên cộng đồng, hãy liên hệ với nhà xuất bản tài nguyên. Trước khi sử dụng các tài nguyên này, bạn phải đảm bảo rằng các tài nguyên này đáp ứng nguyên tắc của Power Apps component framework và chỉ nên dùng cho mục đích tham khảo.
Hướng dẫn: Sử dụng các thành phần mã trên các trang có thẻ mẫu Liquid
Trong hướng dẫn này, bạn sẽ đặt cấu hình Power Pages để thêm thành phần vào trang web. Sau đó, bạn sẽ truy cập trang web và tương tác với thành phần.
Trước khi bạn bắt đầu
Nếu bạn đang sử dụng thành phần mã mẫu được dùng trong hướng dẫn này, hãy đảm bảo rằng trước tiên bạn nhập các giải pháp mẫu vào môi trường trước khi bắt đầu. Để tìm hiểu về cách nhập giải pháp, hãy chuyển đến phần Nhập giải pháp.
Điều kiện tiên quyết
Để biết các điều kiện tiên quyết và để tìm hiểu về các thành phần mã được hỗ trợ/không được hỗ trợ trong Power Pages, hãy chuyển đến phần Sử dụng các thành phần mã trong Power Pages.
Lưu ý
Hướng dẫn này sử dụng một thành phần mã mẫu được tạo bằng Power Apps component framework để thể hiện tùy chọn điều khiển bản đồ trên một trang web. Bạn cũng có thể sử dụng bất kỳ thành phần hiện có hoặc mới nào của riêng mình và bất kỳ trang web nào khác cho hướng dẫn này. Trong trường hợp này, hãy đảm bảo sử dụng thành phần và trang web của bạn khi làm theo các bước trong hướng dẫn này. Để biết thêm thông tin về cách tạo các thành phần mã, hãy chuyển đến phần Tạo thành phần đầu tiên của bạn.
Bước 1. Thêm thành phần mã vào trang web từ Studio
Mở trang web trong studio thiết kế Power Pages.
Chọn không gian làm việc Trang và chọn + Trang.
Đặt tên cho trang. Ví dụ: Trình xem bản đồ.
Chọn bố cục trang Bắt đầu từ mẫu trống.
Chọn nút Chỉnh sửa mã để mở Visual Studio Code cho Web.
Thêm tùy chọn điều khiển giữa
<div></div>bằng thẻ mẫu Liquid theo cú pháp sau:{% codecomponent name:abc\_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:'<API Key Value>' %}
Tiền bo
Để truy xuất thông tin chi tiết của tất cả các thành phần đã nhập và tìm kiếm tên thành phần, hãy tham khảo API web CustomControl.
Ví dụ:
Cách tìm kiếm một thành phần:
https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$select=ContosoCustomControlNameCách truy xuất các tham số đầu vào cho một thành phần:
https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$filter=name eq 'ContosoCustomControlName' &$select=manifest
Chọn CTRL-S trên bàn phím để lưu mã cập nhật.
Điều hướng quay lại studio thiết kế và chọn Đồng bộ hóa để cập nhật trang web với các chỉnh sửa từ Visual Studio Code.
Ở góc trên bên phải, hãy chọn Xem trước và Máy tính để bàn để xem trước trang web.
Trang web bây giờ sẽ hiển thị tùy chọn điều khiển được thêm vào đó.
Các bước tiếp theo
Tổng quan: Sử dụng các thành phần mã trong cổng thông tin