How to Create a Dynamic Invoice in Power Apps Using String Interpolation and Mimicking CSS
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.
-
Add an HTML Text Control: Go to the Insert tab, select Text, and then HTML Text. Place it on your screen.
-
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
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>"
*This post is locked for comments