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

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”)

Tôi đã thấy nó

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

---

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ị

Đ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

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ư

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

Đ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?

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 đó

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

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

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

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

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

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

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

Tôi đã sử dụng trình thiết kế bảng tại http. // bảng chia. com/table-styler/ để truyền cảm hứng cho tôi về CSS và kết quả đầu ra với kiểu dáng được thêm vào trông như thế này

Tôi nghĩ rằng điều này có vẻ tốt hơn nhiều, nó dễ đọc hơn và thân thiện hơn một chút, nhưng tôi vẫn nghĩ rằng nó có thể được cải thiện trên. Một trong những điều tôi đã thử nghiệm là các màu thay thế cho các hàng, nhưng thật không may, Outlook dường như bỏ qua kiểu dáng CSS này. Để có được các hàng thay thế và bao gồm thông tin ở cuối email trong bảng, chúng tôi sẽ phải sáng tạo

Nâng cao StylinG

Tin vui là chúng ta có thể đạt được một số kiểu dáng khá phức tạp bằng cách sử dụng kết hợp HTML và CSS. Tin xấu là nó phức tạp hơn một chút và do đó chúng ta không thể sử dụng hành động “Tạo bảng HTML” đơn giản. Đầu ra từ phong cách tiên tiến của tôi trông như thế này

Tôi nghĩ rằng đây là một cải tiến lớn, và trông thực sự chuyên nghiệp. Luồng để tạo bảng này dài hơn một chút, nhưng tôi nghĩ nó khá đơn giản để làm theo. Tôi đã phác thảo nó bên dưới và tôi sẽ thực hiện lần lượt từng bước

1. Trình kích hoạt – trong Luồng này, tôi đang sử dụng “khi bản ghi được cập nhật”, nhưng tất nhiên bạn có thể sử dụng bất kỳ trình kích hoạt nào

2. Khởi tạo biến số nguyên RowNumber – hành động đầu tiên là tạo một biến số nguyên mới gọi là RowNumber. Chúng tôi sẽ sử dụng giá trị này như một phần của vòng lặp Áp dụng cho mỗi lần sau trong Luồng, nhưng hiện tại, chúng tôi sẽ mặc định giá trị này là 0

3. Khởi tạo Biến chuỗi TableHTML – hành động tiếp theo là tạo một biến Chuỗi mới có tên là TableHTML. Trong phần này, chúng ta sẽ đặt Tiêu đề bảng. Chúng ta cũng có thể sử dụng một số phần tử kiểu CSS nội tuyến để đặt kiểu bảng và đặt kiểu tiêu đề bảng. Chúng tôi cũng có thể đặt chiều rộng của mỗi cột

4. Liệt kê các bản ghi – trong trường hợp này, tôi muốn gửi báo giá trong email cho khách hàng, vì vậy tôi sẽ lấy các Dòng báo giá có liên quan. Trong trường hợp của riêng bạn, bạn có thể muốn truy xuất các bản ghi hoặc mục khác nhau từ danh sách SharePoint

5. Áp dụng cho Mỗi – tiếp theo chúng ta sẽ lặp lại các mục được trả về từ bước Danh sách ở trên. Có hai hành động bên trong vòng lặp

5A. Tăng RowNumber lên 1 – trong hành động này, chúng tôi sẽ tăng biến RowNumber lên 1 để chúng tôi có thể xác định mình đang ở vòng lặp nào và chúng tôi sẽ sử dụng điều này trong bước tiếp theo để xác định xem chúng tôi đang ở trong một hàng chẵn hay lẻ

5B. Nối hàng sản phẩm vào TableHTML – trong bước này, chúng tôi đang sử dụng hành động Nối vào biến chuỗi để thêm nhiều hàng của bảng HTML vào TableHTML. Mã HTML chúng tôi đang sử dụng bên dưới

Có một số yếu tố chính cần xem xét ở đây

1. First, we’re setting the background colour of the row by using some inline CSS within the

element. We have an IF condition in here as follows
“if(bằng(mod(biến('RowNumber'),2),0),'#ffffff','#e1e1e1′)"
Điều này hoạt động bằng cách sử dụng để kiểm tra xem biến RowNumber có chia hết cho 2 không. Biểu thức MOD trả về phần còn lại từ phép chia hai số. Nếu giá trị này bằng 0 thì chúng ta biết mình đang ở hàng chẵn, trong khi nếu nó trả về bất kỳ giá trị nào khác 0 thì chúng ta đang ở hàng lẻ. Sau đó, chúng tôi có thể sử dụng IFTRUE và IFFALSE để đặt các màu hàng xen kẽ

Chúng tôi sử dụng để đặt các giá trị tiền tệ thành loại tiền thích hợp, e. g
"formatNumber(items('Apply_to_each')?['priceperunit'],'C','en-GB')"

Chúng tôi sẽ không áp dụng chiết khấu cho từng chi tiết đơn hàng, vì vậy chúng tôi cần kiểm tra xem giá trị được trả về có phải là null hay không và nếu có, hãy đặt giá trị đó thành 0, i. e
“if(bằng(null,items('Apply_to_each')?['manualdiscountamount']),formatnumber(0,'C','en-GB'),formatnumber(items('Apply_to_each')?['manualdiscountamount']

6. Nối Chân trang vào TableHTML – trong hai ví dụ đầu tiên tôi đã trình bày ở trên, các giá trị từ bản ghi gốc không được đưa vào bảng, trông hơi lộn xộn. Để bao gồm chúng, chúng ta có thể nối thêm một số HTML vào biến TableHTML. Chúng tôi cũng biết rằng chúng tôi muốn các hàng chứa tổng phụ và tổng được in đậm và có nền màu khác, vì vậy chúng tôi có thể bao gồm một số kiểu CSS nội tuyến hơn cho các hàng này.

Bảng chúng tôi đã tạo ở trên có 5 cột nhưng các phần tử cuối cùng ở chân trang chỉ sử dụng hai cột, vì vậy chúng tôi cũng có thể sử dụng phần tử colspan HTML để làm cho các nhãn hàng trải rộng trên 4 cột, do đó đảm bảo các giá trị hàng nằm trong cột 5

Nếu bạn muốn sao chép HTML ở trên, thì nó ở bên dưới

@{items('Apply_to_each')?['productdescription']}	@{formatNumber(items('Apply_to_each')?['priceperunit'],'C','en-GB')}	@{items('Apply_to_each')?['quantity']}	@{if(equals(null,items('Apply_to_each')?['manualdiscountamount']),formatnumber(0,'C','en-GB'),formatnumber(items('Apply_to_each')?['manualdiscountamount'],'C','en-GB'))}	@{formatnumber(items('Apply_to_each')?['extendedamount'],'C','en-GB')}
Detail Amount:				@{formatnumber(triggerOutputs()?['body/totallineitemamount'],'C','en-GB')}
Less Discount %:				@{formatnumber(div(triggerOutputs()?['body/discountpercentage'],100),'p','en-gb')}
Less Discount:				@{if(equals(null,triggerOutputs()?['body/discountamount']),formatnumber(0,'c','en-GB'),formatnumber(triggerOutputs()?['body/discountamount'],'C','en-GB'))}
Pre-Freight Amount:				@{formatnumber(triggerOutputs()?['body/totalamountlessfreight'],'C','en-GB')}
Freight Amount:				@{if(equals(null,triggerOutputs()?['body/freightamount']),formatnumber(0,'C','en-GB'),formatnumber(triggerOutputs()?['body/freightamount'],'C','en-GB'))}
Tax Amount:				@{formatnumber(triggerOutputs()?['body/totaltax'],'C','en-GB')}
Total Amount:				@{formatnumber(triggerOutputs()?['body/totalamount'],'C','en-GB')}

7. Gửi Email – chúng ta có thể sử dụng tác vụ Gửi Email để gửi bảng HTML mà chúng ta đã tạo trong email hoặc chúng ta có thể sử dụng Teams – Post a Message [BƯỚC 8 ở trên] để đăng bảng HTML trong kênh Teams

Phần kết luận

Bài đăng này trình bày 3 cách khác nhau để tạo và hiển thị bảng HTML bằng cách sử dụng quy trình Power Automate

1. Đơn giản – sử dụng kết hợp các hành động Chọn và Tạo Bảng HTML
2. Trung cấp – sử dụng kết hợp các tác vụ Chọn và Tạo bảng HTML, đồng thời thêm CSS nội bộ bằng tác vụ Soạn thư
3. Nâng cao – sử dụng các bảng HTML được tạo thủ công với kiểu CSS nội tuyến, các phần tử colspan và biểu thức Flow để thêm định dạng

Tôi thấy đây là một thử thách thú vị và tôi nghĩ thử thách này thể hiện cách chúng ta có thể sáng tạo với Power Automate để đạt được chức năng nâng cao. Nếu bạn thấy nó hữu ích, hoặc nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào, vui lòng cho tôi biết

Nếu bạn muốn tìm hiểu thêm về các bảng HTML thì tôi thực sự khuyên bạn nên đọc các hướng dẫn của W3 Schools