Power Automate Tạo bảng HTML theo chiều dọc

Trong khi chơi với “bảng HTML” vào đầu ngày hôm nay, tôi đột nhiên nhận ra rằng có vẻ như nó sâu hơn một chút so với tôi mong đợi

Giả sử bạn có Flow này

Power Automate Tạo bảng HTML theo chiều dọc

Và tưởng tượng rằng bạn muốn

  • Thêm tiêu đề có dấu cách
  • Thay đổi giao diện tổng thể của bảng được hiển thị

Hóa ra những điều đó không đơn giản như vậy


Tuy nhiên, để bắt đầu, khi lần đầu tiên tôi thử sử dụng Bảng HTML ngày hôm nay, tôi nhận thấy rằng mình đang gặp sự cố khi thêm các giá trị động. Thay vì màn hình giá trị động thông thường với hộp tìm kiếm và hai tab (“nội dung động” / “biểu thức”)

Power Automate Tạo bảng HTML theo chiều dọc

Tôi đã thấy nó

Power Automate Tạo bảng HTML theo chiều dọc

Bạn đã bao giờ thấy như vậy chưa? . Nó không phải là một tính năng mới

Chỉ cần thử thu nhỏ cửa sổ trình duyệt của bạn xuống. Ngay cả khi bạn hiện ở mức 100%, hãy giảm tỷ lệ xuống 90. Chắc chắn giảm xuống 100 nếu bạn ở mức 130. Khi bạn làm điều đó, có thể bạn sẽ thấy cửa sổ nội dung động thông thường

Power Automate Tạo bảng HTML theo chiều dọc


Tuy nhiên, hãy quay lại Bảng HTML

Việc sử dụng nội dung động cũng đơn giản như bất kỳ nơi nào khác trong Flows, nhưng làm cách nào để chúng tôi thêm màu, đường viền, sửa đổi kích thước văn bản, v.v.?

Ví dụ: nếu tôi thêm thẻ phông chữ HTML vào giá trị

Power Automate Tạo bảng HTML theo chiều dọc

Điều đó sẽ chỉ làm rối đầu ra vì các thẻ đó sẽ được thêm vào đó dưới dạng “văn bản” thay vì dưới dạng html

Power Automate Tạo bảng HTML theo chiều dọc

Vì vậy, có một bài đăng tuyệt vời giải thích khái niệm cơ bản đằng sau các tùy chọn định dạng Bảng HTML

https. //www. sharepointsiren. com/2019/07/formatting-html-tables-in-flow/

Về cơ bản, chúng ta cần lấy đầu ra và xử lý hậu kỳ. Tôi có thể dễ dàng lấy đầu ra bằng cách thêm hành động Soạn thư

Power Automate Tạo bảng HTML theo chiều dọc

Bạn có thể lấy nguồn đó và sử dụng TryIt để xem nó như thế nào

https. //www. w3schools. com/html/tryit. asp?filename=tryhtml_intro

Power Automate Tạo bảng HTML theo chiều dọc

Điều gì sẽ xảy ra nếu thay vì làm hỏng HTML đó, chúng ta chỉ tạo kiểu cho bảng đó bằng biểu định kiểu bên ngoài?

Power Automate Tạo bảng HTML theo chiều dọc

Tất nhiên, nếu bạn muốn chơi với CSS, bạn có thể làm cho nó trông đẹp hơn. Tuy nhiên, làm cách nào để thêm CSS đó vào đầu ra của hành động Bảng HTML?

Trước tiên, hãy tải tệp CSS đó lên một số máy chủ web sẽ có sẵn từ bất kỳ đâu mà bảng cuối cùng sẽ được xem. Có thể đến Azure ở đâu đó (ví dụ. https. // tài liệu. Microsoft. com/en-us/azure/storage/blobs/storage-blob-static-website)

Trong trường hợp của tôi, tôi đang sử dụng tên lớp “styledtable”, vì vậy tôi chỉ cần thêm tên lớp đó vào thẻ bảng và tôi cũng cần thêm thẻ “link” vào đầu ra để liên kết tệp css của mình với . Đây là một hành động soạn thảo để làm điều đó

Power Automate Tạo bảng HTML theo chiều dọc

Và đây là chức năng thay thế (chắc chắn bạn sẽ cần điều chỉnh nó cho phù hợp với nhu cầu của mình)

replace(body(‘Create_HTML_table’),'

’,'
’)

Tất cả những gì còn lại là kiểm tra kết quả, vì vậy hãy thêm đầu ra vào email

Power Automate Tạo bảng HTML theo chiều dọc

Và vui vẻ với kết quả

Power Automate Tạo bảng HTML theo chiều dọc

Và một lưu ý cuối cùng… thông thường, bạn không được phép thêm dấu cách vào các trường tiêu đề. Tuy nhiên, tất nhiên, bạn luôn có thể sử dụng tác vụ Soạn thư để soạn nội dung nào đó có dấu cách, sau đó, sử dụng đầu ra của tác vụ đó cho các trường tiêu đề

Nếu bạn đang sử dụng các quy trình Power Automate để gửi email thông báo cho mọi người trong tổ chức của mình thì rất có thể bạn đã gặp phải yêu cầu gửi bảng kết quả trong email. Đây là sự cố thường xuyên xảy ra trong tổ chức của tôi và tôi đã gặp phải một số hạn chế với hành động "Tạo bảng HTML" tiêu chuẩn, vì vậy trong blog này, tôi sẽ khám phá chúng và chứng minh cách tôi quản lý để khắc phục chúng

Power Automate Tạo bảng HTML theo chiều dọc

Tình huống

Với mục đích minh họa Quy trình này, tôi sẽ sử dụng tình huống trong đó tôi đã tạo Báo giá cho khách hàng của mình và tôi muốn gửi báo giá đó qua email cho họ bằng quy trình Power Automate

Giải pháp

Có một hành động trong Power Automate có tên là “Tạo bảng HTML” và hành động này có thể sẽ đủ cho hầu hết các tình huống sử dụng. Trong đoạn trích từ Luồng của tôi bên dưới, tôi đã trình bày các bước chính để tạo bảng từ danh sách các bản ghi CDS

Power Automate Tạo bảng HTML theo chiều dọc

1. Liệt kê các bản ghi CDS – chúng tôi sử dụng hành động Danh sách Bản ghi để truy xuất danh sách các bản ghi từ CDS. Tương tự, bạn có thể truy xuất bản ghi từ SharePoint (hoặc bất kỳ nguồn dữ liệu nào khác)

2. Chọn – chúng tôi sử dụng hành động Chọn để chỉ định khóa phù hợp. các cặp giá trị từ các bản ghi được trả về từ bước Liệt kê các bản ghi CDS ở trên. Cách dễ nhất để nghĩ về điều này là cột đầu tiên là "Tiêu đề" cho bảng, trong khi các giá trị động trong cột thứ hai là "hàng" cho bảng

3. Tạo bảng HTML – bước cuối cùng để tạo bảng HTML là sử dụng tác vụ Tạo bảng HTML. Vì chúng tôi đã chỉ định các Cột trong hành động Chọn ở trên, chúng tôi đặt các Cột thành tự động

Bây giờ, chúng tôi đã tạo một bảng HTML, chúng tôi có thể chèn bảng đó vào email hoặc tin nhắn Nhóm hoặc tạo tệp PDF với bảng đó hoặc bất kỳ hành động thích hợp nào khác mà bạn có thể nghĩ ra

Vì mục đích của bản trình diễn này, tôi sẽ gửi nó qua email và tôi sẽ bao gồm một số chi tiết từ bản ghi Trích dẫn chính. Hành động Gửi Email trông như thế này

Power Automate Tạo bảng HTML theo chiều dọc

Đầu ra từ hành động này trông như thế này

Power Automate Tạo bảng HTML theo chiều dọc

Như bạn có thể thấy, nó hoạt động nhưng kiểu dáng vẫn còn một chút mong muốn, vì vậy hãy xem liệu chúng ta có thể làm cho nó đẹp hơn một chút không

INjecting CSS Styling

One way we can do some styling is to add a CSS stylesheet to our HTML. We can do this by prefixing the output from the Create HTML Table step with some additional HTML using a Compose step. You can use internal CSS in HTML by using the