Hướng dẫn power automate format html table column width - power automate định dạng chiều rộng cột của bảng html

Nếu bạn đã sử dụng các luồng Power Automate để gửi email thông báo cho mọi người trong tổ chức của bạn thì có một cơ hội công bằng mà bạn đã gặp phải yêu cầu gửi một bảng kết quả trong email. Đây là một sự xuất hiện thường xuyên 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 tiêu chuẩn của Creat Creat HTML bảng, 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ý để làm việc xung quanh họ.

Tình huống

Đối với mục đích chứng minh dòng chảy này, tôi sẽ sử dụng kịch bản trong đó tôi đã tạo ra một báo giá cho khách hàng của mình và tôi muốn gửi email cho họ bằng cách sử dụng luồng tự động năng lượng.

Giải pháp

Có một hành động trong Power Automate có tên là Tạo bảng HTML và nó có thể sẽ đủ cho hầu hết các kịch bản sử dụng. Trong trích đoạn từ luồng của tôi bên dưới, tôi đã đề cập đến các bước chính để tạo bảng từ danh sách các bản ghi CDS:

1. Liệt kê hồ sơ CDS - Chúng tôi sử dụng hành động hồ sơ danh sách để truy xuất danh sách các bản ghi từ CD. Tương tự, bạn có thể truy xuất các bản ghi từ SharePoint (hoặc bất kỳ nguồn dữ liệu nào khác).we use the List Records action to retrieve a list of records from CDS. Similarly, you could retrieve records from SharePoint (or any other data source).

2 Cách dễ nhất để suy nghĩ về điều này là cột đầu tiên là các tiêu đề của người dùng cho bảng, trong khi các giá trị động trong cột thứ hai là các hàng trên mạng cho bảng – we use the Select action to specify matching key:value pairs from the returned records from the List CDS records step above. The easiest way to think about this is that the first column is the “Headers” for the table, whilst the dynamic values in the second column are the “rows” for the table

3. Tạo bảng HTML - Bước cuối cùng để tạo bảng HTML là sử dụng hành động bảng tạo 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.the final step to create the HTML table is to use the Create HTML Table action. As we’ve specified the Columns in the Select action above, we set the Columns to automatic.

Bây giờ chúng tôi có một bảng HTML được tạo, chúng tôi có thể chèn nó vào email hoặc tin nhắn của các nhóm hoặc tạo bản PDF với nó hoặc bất kỳ hành động thẩm quyền nào khác mà bạn có thể nghĩ đến.

Đối với mục đích của bản demo này, tôi sẽ gửi nó trong một email và tôi sẽ bao gồm một số chi tiết từ hồ sơ báo giá của phụ huynh. Hành động gửi email trông giống như sau:

Đầ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 để lại một chút mong muốn, vì vậy hãy để Lôi xem liệu chúng ta có thể đẹp một chút không.

Tiêm phong cách CSS

Một cách chúng ta có thể thực hiện một số kiểu dáng là thêm một kiểu dáng CSS vào HTML của chúng tôi. Chúng ta có thể làm điều này bằng cách tiền tố đầu ra từ bước tạo HTML với một số HTML bổ sung bằng cách sử dụng bước soạn thảo. Bạn có thể sử dụng CSS nội bộ trong HTML bằng cách sử dụng phần tử và chúng ta có thể làm điều đó trong bước soạn thảo như thế này:

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

<style>
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;
}
</style>

Tôi đã sử dụng trình thiết kế bảng tại http://divtable.com/table-styler/ để cung cấp cho tôi cảm hứng cho CSS và đầu ra với kiểu dáng được thêm vào có vẻ 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. Một trong những điều tôi đã thử nghiệm là màu sắc 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 ở phía dưới email trong bảng, chúng tôi sẽ phải sáng tạo!

Phong cách nâng cao

Tin tốt 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 hỗn 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 có thể sử dụng hành động đơn giản tạo ra bảng HTML. Đầu ra từ kiểu dáng nâng cao 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. Dòng chảy để tạo bảng này dài hơn một chút, nhưng tôi nghĩ rằng nó khá đơn giản để theo dõi. Tôi đã phác thảo nó bên dưới và lần lượt đi qua từng bước

1. Trình kích hoạt - Trong luồng này, tôi đã sử dụng trên mạng khi một 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àoin this Flow I’m using “when a record is updated”, but of course you can use any trigger

2. Khởi tạo biến số nguyên của 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 điều này như là một phần của chúng tôi áp dụng cho mỗi vòng lặp sau này trong luồng, nhưng trong thời gian chúng tôi sẽ mặc định nó là 0the first action is to create a new Integer variable called RowNumber. We’ll use this as part of our Apply to Each loop later in the Flow, but for the time being we’ll default it to 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 TableHTML. Trong đó, chúng tôi sẽ đặt các tiêu đề bàn. Chúng ta cũng có thể sử dụng một số yếu tố kiểu CSS nội tuyến để đặt kiểu bảng và để đặt kiểu tiêu đề bảng. Chúng ta cũng có thể đặt chiều rộng của mỗi cột.the next action is to create a new String variable called TableHTML. In this we’re going to set the Table Headers. We can also use some inline CSS style elements to set the table style and to set the table header style. We can also set the width of each column.

4. Danh sách các bản ghi - Trong kịch bản này, tôi muốn gửi báo giá trong email cho khách hàng, vì vậy tôi sẽ nhận được các dòng báo giá liên quan. Trong kịch bản của riêng bạn, bạn có thể muốn truy xuất các bản ghi khác nhau hoặc các mục từ danh sách SharePointin this scenario I want to send a quote in an email to a client, so I’m going to get the related Quote Lines. In your own scenario you may wish to retrieve different records, or items from a SharePoint list

5. Áp dụng cho mỗi - Tiếp theo, chúng tôi sẽ lặp qua các mục được trả lại từ bước trong danh sách ở trên. Có hai hành động bên trong vòng lặpnext we’re going to loop through the items that are returned from the List step above. There are two actions inside the loop

5A. Tăng Rownumber bởi 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 vòng lặp nào chúng tôi trên và chúng tôi sẽ sử dụng nó trong bước tiếp theo để xác định xem chúng tôi có phải là một hàng chẵn hay lẻ in this action we’ll increase the RowNumber variable by 1 so we can identify which loop we’re on, and we’ll use this in the next step to identify if we’re in an even or odd row

5b. Phụ lục hàng sản phẩm vào TableHTML - Trong bước này, chúng tôi đã sử dụng một hành động biến vào chuỗi để thêm nhiều hàng bảng HTML vào TableHTML. Mã HTML mà chúng tôi sử dụng dưới đây:in this step we’re using an Append to String Variable action to add more HTML table rows to the TableHTML. The HTML code we’re using is below:

        <tr style="background-color:@{if(equals(mod(variables('RowNumber'),2),0),'white','#e1e1e1')};">
            <td>@{items('Apply_to_each')?['productdescription']}</td>
            <td>@{formatNumber(items('Apply_to_each')?['priceperunit'],'C','en-GB')}</td>
            <td>@{items('Apply_to_each')?['quantity']}</td>
            <td>@{if(equals(null,items('Apply_to_each')?['manualdiscountamount']),formatnumber(0,'C','en-GB'),formatnumber(items('Apply_to_each')?['manualdiscountamount'],'C','en-GB'))}</td>
            <td>@{formatnumber(items('Apply_to_each')?['extendedamount'],'C','en-GB')}</td>
        </tr>

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

1. Đầu tiên, chúng tôi đặt màu nền của hàng bằng cách sử dụng một số CSS nội tuyến trong phần tử. Chúng tôi có một điều kiện IF ở đây như sau If If (bằng (mod (biến ('Rownumber'), 2), 0), '#ffffff', '#e1e1e1). Biến Rownumber là chia hết cho 2. Biểu thức mod trả về phần còn lại từ việc chia hai số. Nếu điều này bằng 0, chúng ta sẽ biết chúng ta trên một hàng thậm chí, trong khi nếu nó trả về bất kỳ giá trị nào khác ngoài số 0, chúng ta sẽ ở một hàng kỳ lạ. Sau đó, chúng ta có thể sử dụng iftrue và iffalse để đặt màu hàng xen kẽ.
   “if(equals(mod(variables(‘RowNumber’),2),0),’#ffffff’,’#e1e1e1′)”
   This works by using the MOD expression to check if the RowNumber variable is divisible by 2. The MOD expression returns the remainder from dividing two numbers. If this equals zero we know we’re on an even row, while if it returns any value other than zero we’re on an odd row. We can then use the IFTRUE and IFFALSE to set alternating row colours.
2. Chúng tôi sử dụng biểu thức định dạng để đặt các giá trị tiền tệ thành loại tiền tệ thích hợp, ví dụ: định dạng của Hồi
   “formatNumber(items(‘Apply_to_each’)?[‘priceperunit’],’C’,’en-GB’)”
3. Chúng tôi sẽ không được giảm giá cho mỗi mục dòng, vì vậy chúng tôi cần kiểm tra xem giá trị được trả lại có phải là null hay không và, nếu vậy, đặt nó thành 0, tức là nếu (bằng (null, các mục ('application_to_each')? [ 'Hướng dẫn sử dụng W.
   “if(equals(null,items(‘Apply_to_each’)?[‘manualdiscountamount’]),formatnumber(0,’C’,’en-GB’),formatnumber(items(‘Apply_to_each’)?[‘manualdiscountamount’],’C’,’en-GB’))”

6. Chân trang chân dung 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 cha mẹ weren có trong bảng, có vẻ hơi lộn xộn. Để bao gồm chúng, chúng tôi 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 các phép phụ và tổng số đượ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 khác cho những kiểu này.in the first two examples I demonstrated above the values from the parent record weren’t included in the table, which looked a little bit messy. In order to include them we can append some more HTML to the TableHTML variable. We also know that we want the rows containing subtotals and totals to be bold and to have a different colour background, so we can include some more inline CSS styling for these.

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 trong 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ử HTML Colspan để tạo các nhãn hàng hàng 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ì đó là bên dưới:

<tr  style="text-align:right; background:#c5c5c5; padding:3px">
    <td colspan="4" ><strong>Detail Amount:</strong></td>
    <td><strong>  @{formatnumber(triggerOutputs()?['body/totallineitemamount'],'C','en-GB')}  </strong></td>
</tr>
<tr style="text-align:right; background:#ffffff;padding:3px">
    <td colspan="4" >Less Discount %:</td>
    <td>@{formatnumber(div(triggerOutputs()?['body/discountpercentage'],100),'p','en-gb')} </td>
</tr>
<tr style="text-align:right; background:#ffffff;padding:3px">
    <td colspan="4">Less Discount:</td>
    <td>@{if(equals(null,triggerOutputs()?['body/discountamount']),formatnumber(0,'c','en-GB'),formatnumber(triggerOutputs()?['body/discountamount'],'C','en-GB'))} </td>
</tr>
<tr  style="text-align:right; background:#c5c5c5; padding:3px">
    <td colspan="4">
        <strong>Pre-Freight Amount:</strong></td>
    <td><strong>@{formatnumber(triggerOutputs()?['body/totalamountlessfreight'],'C','en-GB')}  </strong></td>
</tr>
<tr style="text-align:right; background:#ffffff;padding:3px">
    <td colspan="4" > Freight Amount:</td>
    <td>@{if(equals(null,triggerOutputs()?['body/freightamount']),formatnumber(0,'C','en-GB'),formatnumber(triggerOutputs()?['body/freightamount'],'C','en-GB'))} </td>
</tr>
<tr style="text-align:right; background:#ffffff;padding:3px">
    <td colspan="4"> Tax Amount:</td>
    <td>@{formatnumber(triggerOutputs()?['body/totaltax'],'C','en-GB')} </td>
</tr>
<tr  style="text-align:right; background:#c5c5c5; padding:3px">
    <td colspan="4"><strong>Total Amount:</strong></td>
    <td><strong>@{formatnumber(triggerOutputs()?['body/totalamount'],'C','en-GB')}  </strong></td>
</tr>
</tbody>
</table>
<br/>

7we can use the Send an Email action to send the HTML table we created in an email, or we can use the Teams – Post a Message [STEP 8 above] to post the HTML table in a Teams channel.

Sự kết luận

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

1. Đơn giản - Sử dụng kết hợp các hành động của bảng chọn và tạo bảng HTML
2. Trung cấp - Sử dụng kết hợp các hành động chọn và tạo bảng HTML và thêm CSS nội bộ bằng cách sử dụng hành động soạn thảo
3. Nâng cao - Sử dụng các bảng HTML được tạo thủ công với kiểu dáng CSS nội tuyến, các phần tử colspan và biểu thức dòng chảy để thêm định dạng

Tôi thấy đây là một thử thách thú vị và tôi nghĩ rằng nó thể hiện cách chúng ta có thể sáng tạo với Power Automat để đạ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 thì xin 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 rất khuyên bạn nên đọc các hướng dẫn của các trường W3.