Power Community

Power Community

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,
        $"{Item}{Quantity}{Price}"
    )
);

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.

$"
     
       

Invoice for {CustomerName}

{ ItemsHTML}
Date: {InvoiceDate}
Item Quantity Price
Total: {TotalAmount}
"

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,
        $"{Item}{Quantity}{Price}"
    )
);
//HTML text Control
$"
     
       

Invoice for {CustomerName}

{ ItemsHTML}
Date: {InvoiceDate}
Item Quantity Price
Total: {TotalAmount}
"

This post was originally published on this site

- Advertisement -spot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement - Advertisement

Latest News

Create Brand Profiles in Customer Insights – Journeys to Create Cohesive Brand Experiences

In this blog, we will learn about one of the new features introduced by Microsoft in Dynamics 365 in...

More Articles Like This

- Advertisement -spot_img