’]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 element, and we can do that in the compose step like this:
Phần tử kiểu HTML với CSS mà tôi đã sử dụng ở bên dưới nếu bạn muốn sao chép và dán nó
table {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table td, table th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
table tbody td {
font-size: 13px;
}
table thead {
background: #1C6EA4;
border-bottom: 2px solid #444444;
}
table thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table thead th:first-child {
border-left: none;
}
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
@{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']} |
Có một số yếu tố chính cần xem xét ở đây
- 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
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
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
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