Skip to main content

Notifications

How to Create a Dynamic Invoice in Power Apps Using String Interpolation and Mimicking CSS

SebS Profile Picture SebS 4,141

Step 1: Define the Customer and Invoice Details

 

First, you need to set up the basic details like the customer name, invoice date, and the items list.

 

 

// Define the variable with 4 items and add an index column
Set(
 CustomerName,
 "SuperCompany"
);
Set(
 InvoiceDate,
 "23/05/2024"
);
ClearCollect(
 Items,
 AddColumns(
 [
 {
 Item: "Product A",
 Quantity: 2,
 Price: 50,
 ID: 1
 },
 {
 Item: "Product B",
 Quantity: 1,
 Price: 75,
 ID: 2
 },
 {
 Item: "Product C",
 Quantity: 3,
 Price: 30,
 ID: 3
 },
 {
 Item: "Product D",
 Quantity: 5,
 Price: 20,
 ID: 4
 }
 ],
 RowIndex,
 CountRows(Items) + 1
 )
);
Set(
 TotalAmount,
 Sum(
 Items,
 Price
 )
);

 

 

Step 2: Define CSS-like Styles

 

Next, set up the styles using Set to define CSS-like properties for different parts of the invoice.

 

 

Set(
 HeaderStyle,
 "font-size: 24px; color: blue; text-align: center;"
);
Set(
 TableHeaderStyle,
 "background-color: #f2f2f2; font-weight: bold;"
);
Set(
 TableRowStyle,
 "background-color: #ffffff;"
);
Set(
 TableRowAlternateStyle,
 "background-color: #f9f9f9;"
);
Set(
 FooterStyle,
 "font-size: 18px; color: green; text-align: right;"
);
Set(
 TableStyle,
 "margin-left: auto; margin-right: auto; border-collapse: collapse; width: 80%;"
);
Set(
 TableCellStyle,
 "border: 1px solid black; padding: 8px; text-align: center;"
);
Set(
 TopLeftCellStyle,
 "text-align: left; padding: 8px;"
);
Set(
 BottomRightCellStyle,
 "text-align: right; padding: 8px;"
);

 

 

Step 3: Generate the HTML Content

 

Using string interpolation, generate the HTML content for the table rows dynamically.

 

 

Set(
 ItemsHTML,
 Concat(
 Items,
 $"<tr style='{If(
 Mod(
 RowIndex,
 2
 ) = 0,
 TableRowStyle,
 TableRowAlternateStyle
 )}'><td style='{TableCellStyle}'>{Item}</td><td style='{TableCellStyle}'>{Quantity}</td><td style='{TableCellStyle}'>{Price}</td></tr>"
 )
);

 

 

Step 4: Embed the HTML in an HTML Text Control

 

Now, instead of setting the HTML content to a variable, directly embed it in an HTML Text control.

 

 

  1. Add an HTML Text Control: Go to the Insert tab, select Text, and then HTML Text. Place it on your screen.

  2. Set the HTML Text Control's HtmlText Property: Use the following code to set the HTML content directly in the control.

 

 

$"<html>
 <body>
 <h1 style='{ HeaderStyle}'>Invoice for {CustomerName}</h1>
 <table style='{TableStyle }'>
 <tr>
 <td colspan='3' style='{TopLeftCellStyle }'>Date: {InvoiceDate}</td>
 </tr>
 <tr style='{TableHeaderStyle}'>
 <th style='{ TableCellStyle }'>Item</th>
 <th style='{ TableCellStyle}'>Quantity</th>
 <th style='{ TableCellStyle }'>Price</th>
 </tr>
 { ItemsHTML}
 <tr>
 <td colspan='2' style='{ BottomRightCellStyle }'></td>
 <td style='{ BottomRightCellStyle}'>Total: {TotalAmount}</td>
 </tr>
 </table>
 </body>
 </html>"

 

 

Final Product

 

 

Interpolation.png

 

Conclusion

 

By following these steps, you have successfully created a dynamic invoice in Power Apps using string interpolation and directly embedding HTML in an HTML Text control. This approach allows for easy customization and dynamic content generation, enhancing the overall functionality of your app.

 

 

Final Code Summary

Here’s the complete code for reference:

 

 

//Button Control
// Define the variable with 4 items and add an index column
Set(
 CustomerName,
 "SuperCompany"
);
Set(
 InvoiceDate,
 "23/05/2024"
);
ClearCollect(
 Items,
 AddColumns(
 [
 {
 Item: "Product A",
 Quantity: 2,
 Price: 50,
 ID: 1
 },
 {
 Item: "Product B",
 Quantity: 1,
 Price: 75,
 ID: 2
 },
 {
 Item: "Product C",
 Quantity: 3,
 Price: 30,
 ID: 3
 },
 {
 Item: "Product D",
 Quantity: 5,
 Price: 20,
 ID: 4
 }
 ],
 RowIndex,
 CountRows(Items) + 1
 )
);
Set(
 TotalAmount,
 Sum(
 Items,
 Price
 )
);
// Define CSS-like formulas
Set(
 HeaderStyle,
 "font-size: 24px; color: blue; text-align: center;"
);
Set(
 TableHeaderStyle,
 "background-color: #f2f2f2; font-weight: bold;"
);
Set(
 TableRowStyle,
 "background-color: #ffffff;"
);
Set(
 TableRowAlternateStyle,
 "background-color: #f9f9f9;"
);
Set(
 FooterStyle,
 "font-size: 18px; color: green; text-align: right;"
);
Set(
 TableStyle,
 "margin-left: auto; margin-right: auto; border-collapse: collapse; width: 80%;"
);
Set(
 TableCellStyle,
 "border: 1px solid black; padding: 8px; text-align: center;"
);
Set(
 TopLeftCellStyle,
 "text-align: left; padding: 8px;"
);
Set(
 BottomRightCellStyle,
 "text-align: right; padding: 8px;"
);
// Create a string to hold the HTML for the table rows
Set(
 ItemsHTML,
 Concat(
 Items,
 $"<tr style='{If(
 Mod(
 RowIndex,
 2
 ) = 0,
 TableRowStyle,
 TableRowAlternateStyle
 )}'><td style='{TableCellStyle}'>{Item}</td><td style='{TableCellStyle}'>{Quantity}</td><td style='{TableCellStyle}'>{Price}</td></tr>"
 )
);

//HTML text Control

$"<html>
 <body>
 <h1 style='{ HeaderStyle}'>Invoice for {CustomerName}</h1>
 <table style='{TableStyle }'>
 <tr>
 <td colspan='3' style='{TopLeftCellStyle }'>Date: {InvoiceDate}</td>
 </tr>
 <tr style='{TableHeaderStyle}'>
 <th style='{ TableCellStyle }'>Item</th>
 <th style='{ TableCellStyle}'>Quantity</th>
 <th style='{ TableCellStyle }'>Price</th>
 </tr>
 { ItemsHTML}
 <tr>
 <td colspan='2' style='{ BottomRightCellStyle }'></td>
 <td style='{ BottomRightCellStyle}'>Total: {TotalAmount}</td>
 </tr>
 </table>
 </body>
 </html>"

 

 

Comments

*This post is locked for comments