{"id":116,"date":"2018-02-06T06:13:35","date_gmt":"2018-02-06T14:13:35","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/html-email-reporting-with-tabular-data\/"},"modified":"2018-02-06T06:13:35","modified_gmt":"2018-02-06T14:13:35","slug":"html-email-reporting-with-tabular-data","status":"publish","type":"power-apps","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/html-email-reporting-with-tabular-data\/","title":{"rendered":"Html email reporting with tabular data"},"content":{"rendered":"

Email reporting is a great way to export or share data from a PowerApp. With the native Office 365 Outlook connection, it\u2019s easy to format an email with basic HTML to create nice looking email reports.<\/p>\n

Example<\/strong>: Let\u2019s say we have a company asset checkout system. The application needs to generate a report of items checked out by an employee and then notify the asset manager. For this scenario, we will create an email preview screen in the PowerApp with HTML tags and tabular data collected from the user\u2019s interaction. The preview is used as a direct input for the Outlook connector, and shows will be seen in the resulting email.<\/p>\n

\"image\"<\/a><\/p>\n

\"image\"<\/a><\/p>\n

I\u2019m using the Asset Checkout template for the backend data.<\/p>\n

Once the user has selected the items they will be checking out, the tabular data we will use to populate the email are identified (in this example, the items are objects the user selects and are saved to a Collection called \u2018Cart\u2019). With the target data in its own Collection, we can easily wrap the data in HTML tags that can be used to format the email.<\/p>\n

\u00a0\"image\"<\/a>\u00a0\"image\"<\/a><\/p>\n

Generate the email body.<\/h1>\n

To send a simple email, we can declare the user, list the items being checked out by the user, the date checked out, and a return date.<\/p>\n

\u00a0\"image\"<\/a><\/p>\n

Use the \u2018HTML text\u2019 control to preview what you can send as an input to the Office 365 Outlook connector (under Insert > Text > HTML text). In the HtmlText property of the HTML text control, we can combine the application\u2019s data with HTML tags to format into a nice-looking report with the tabular data in the Cart Collection. In our example we combine the user\u2019s information, the current date, a return date (1 month from today), and the actual tabular data items with HTML tags. Let\u2019s look at the different syntax and functions used in the HtmlText property displayed below:<\/p>\n

\"image\"<\/a><\/p>\n

\"image\"<\/a><\/p>\n

\u00a0<\/p>\n

Joining data, variables and static text<\/h2>\n

Use the ampersand (\u2019&\u2019) character (or alternatively the Concatenate() function) to combine text and data. Here we combine the row label followed with the associated datum joined with an ampersand like so:<\/p>\n

“<b> Employee: <\/b>” & User.FullName & \u201c<br>\u201d<\/strong><\/p>\n

\u00a0<\/p>\n

HTML tags<\/h2>\n

You can use any HTML tags to markup text in the HTML text control. All HTML tags must be in double quotes to be interpreted correctly by PowerApps. Here are details on some tags being used in the example above:<\/p>\n