Bạn có thể sử dụng html trong powerapps không?

Một trong những yêu cầu mà chúng tôi có đối với dự án Cổng thông tin Power Apps gần đây là cung cấp khả năng cho người dùng doanh nghiệp soạn nội dung trợ giúp được hiển thị cho các trang cụ thể trong cổng thông tin Power Apps. Họ phải có một số loại công cụ chỉnh sửa HTML WYSIWYG (What You See Is What You Get) và dự định có một số lượng hình ảnh tối thiểu. Chúng tôi đã xem xét nhiều tùy chọn thiết kế để đáp ứng yêu cầu này, chẳng hạn như danh sách SharePoint với các trường văn bản có định dạng hoặc chỉnh sửa tệp HTML trong thư viện SharePoint và tích hợp vào bảng Dataverse cho nội dung và Tệp Web cho hình ảnh. Vì những lý do tôi sẽ không đi sâu vào đây, chúng tôi đã quyết định xây dựng khả năng này thành một ứng dụng hướng mô hình và tận dụng kiểm soát chỉnh sửa HTML hiện có từ Ứng dụng quản lý cổng thông tin. Hóa ra điều này hiệu quả, nhưng nó không đơn giản để thực hiện như người ta vẫn tưởng. Blog này mô tả quy trình cho bất kỳ ai khác có dữ liệu HTML tùy chỉnh mà họ muốn thêm vào trang web Cổng thông tin Power Apps

Tạo cột

Để bắt đầu, hãy tạo một cột mới trong bảng chứa nội dung HTML này. Nó phải là trường Nhiều dòng văn bản – Văn bản thuần túy, không phải là trường Một dòng văn bản – Vùng văn bản. Lưu tên nội bộ, Dataverse của trường bằng tất cả chữ thường để sử dụng sau này (e. g. , mfhdev_htmlnội dung)

Tạo/Chỉnh sửa Biểu mẫu

Đi và chỉnh sửa biểu mẫu nơi điều khiển trình chỉnh sửa HTML sẽ hoạt động. Trong trường hợp này, vì các biên tập viên sẽ cung cấp khá nhiều nội dung, nên chúng tôi muốn dành một lượng không gian hợp lý cho việc kiểm soát chỉnh sửa, vì vậy chúng tôi đã thêm phần 1 cột để phục vụ như phần chỉnh sửa chính của biểu mẫu và . Tôi khuyên bạn nên đặt tên rõ ràng cho phần này thay vì tên được tạo để hỗ trợ cấu hình điều khiển. Lưu tên của phần để chuyển đến điều khiển chỉnh sửa

Cấu hình của điều khiển sẽ yêu cầu tên của tab mà nó đang bật. Khi xem tab Chung cho biểu mẫu "Thông tin chính" mặc định, nó không được đặt tên theo mặc định, vì vậy tại thời điểm này, bạn nên nhấp vào tab trong biểu mẫu và đặt tên thích hợp cho tab rồi lưu lại

Bây giờ hãy thêm cột/trường nội dung HTML thực tế mà bạn đã tạo ở trên vào phần. Hóa ra để kéo nội dung cột vào điều khiển chỉnh sửa, nó cần phải ở trên biểu mẫu nhưng bị ẩn

Tiếp theo, thêm tài nguyên web chỉnh sửa Cổng thông tin vào biểu mẫu. Nhấp vào biểu tượng Thành phần, mở rộng danh mục Hiển thị và chọn tùy chọn tài nguyên web HTML

Trong hộp thoại lựa chọn Tài nguyên web xuất hiện, tìm kiếm, chọn và thêm adx. ckeditor. tài nguyên html

Lưu ý rằng adx. ckeditor. tài nguyên web html được bao gồm trong Cổng thông tin Dynamics 365 - Giải pháp cơ sở cổng thông tin được cài đặt khi một cổng thông tin được thêm vào môi trường. Nó không khả dụng trong tất cả các môi trường Power Apps

Một lần nữa, tôi sẽ thay đổi tên mặc định được đặt cho điều khiển thành tên hợp lý vì nó cần được sử dụng trong cấu hình bên dưới. Sau khi cài đặt tài nguyên web, biểu mẫu của bạn bây giờ trông giống như ảnh chụp màn hình bên dưới. Bạn có thể tăng số lượng hàng được hiển thị dưới dạng tùy chọn có thể định cấu hình. Mặc định là 6 hàng

Sau khi điều khiển đã được tải vào biểu mẫu, hãy thay đổi Nhãn của nó thành tên hiển thị thân thiện. Sau đó nhấp vào dấu dọc “…” được liên kết với kiểm soát tài nguyên Web và chọn “Chỉnh sửa”

Cả tên trường (tất cả đều là chữ thường) và đường dẫn phần (bao gồm tên tab) chứa điều khiển đều cần được chuyển dưới dạng tham số tùy chỉnh cho điều khiển. Chúng được truyền dưới dạng trường=[tên trường]&phần=[tên tab]. [tên phần] như hình

Tiếp theo, nội dung điều khiển cần được tải từ trường khi biểu mẫu tải. Điều này yêu cầu một sự kiện biểu mẫu mới và tệp thư viện js sẽ được gọi từ sự kiện tải cho biểu mẫu. Dưới đây là một số phần của mã JS tổng thể sẽ cần được định cấu hình với các tên được đặt ở trên

• Trong hàm getHtmlEditor, bạn sẽ cần tên tài nguyên web

• Trong hàm setSectionVisible, bạn sẽ cần tên tab

• Trong hàm setHtmlSectionVisible, bạn sẽ cần tên phần

• Ở cuối thư viện, hãy điền tên hàm cho trình xử lý sự kiện mà bạn sẽ chỉ định trong cấu hình trình xử lý sự kiện

Toàn bộ mã thư viện sẽ có tất cả những điều sau đây

Lưu tệp này ra dưới dạng tệp js. Bây giờ nó có thể được tải vào biểu mẫu dưới dạng thư viện. Quay lại trình chỉnh sửa biểu mẫu và nhấp vào biểu tượng Thư viện trong thanh điều hướng bên trái và nhấp vào Thêm thư viện để thêm mã trình xử lý sự kiện

Nhấp vào nút Tài nguyên web mới rồi tải tệp của bạn lên và thêm thuộc tính

Sau đó, bạn sẽ cần tìm kiếm tài nguyên đã thêm của mình để thêm nó vào biểu mẫu

Bây giờ, bạn đã sẵn sàng thêm sự kiện để tải nội dung html vào và từ điều khiển. Chuyển đến phần Dạng xem dạng cây của biểu mẫu và nhấp vào nút biểu mẫu trong dạng cây. Tiếp theo, nhấp vào tab “Sự kiện” ở khung bên phải và mở rộng sự kiện “Đang tải” để chuyển đến hành động thêm trình xử lý sự kiện. Nhấp chuột + Trình xử lý sự kiện

Ở đây thư viện của bạn sẽ được chọn tự động. Bạn sẽ cần nhập tên chức năng bạn đã sử dụng ở trên

Tại thời điểm này, nếu bạn lưu và xuất bản, biểu mẫu sẽ sẵn sàng hoạt động. Bạn sẽ có một trình soạn thảo WYSIWYG cung cấp cả chế độ xem thiết kế cho người dùng doanh nghiệp và chế độ xem HTML nguồn được điều chỉnh bởi những người có kỹ năng HTML tốt hơn

Tôi có thể sử dụng CSS trong PowerApps không?

Bạn có thể viết mã trong PowerApps không?

Tôi có thể sử dụng JavaScript và CSS trong PowerApps không?