Implement custom HTML in Canvas PowerApps and make it Offline

[priyeshwagh777]

Hi,

I'm looking to implement custom HTML in a Canvas PowerApp and also looking to make it work offline.

Can you please help me get a starting point for the same or direct me in the correct direction?

Thanks in advance.

[yashag2255]

Hi @priyeshwagh777 

Please see he screenshot below. Here i have created an HTML table on a HTML text control. 

expression on HTML text: 

"<table style="& Char(34)& "width:100%"&Char(34)&">
<tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>"

Can you share more details on the Ofline availability requirement so that we can better assist you with it. 

Hope this Helps!

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

[v-xida-msft]

Hi @priyeshwagh777 ，

Do you want to custom a HTML within your canvas app?

Do you want to also make the custom HTML works when your app is offline?

Firstly, if you want to custom a HTML within your canvas app, I think the Html Text control could achieve your needs. I have made a test on my side, please check the following workaround:

set the HtmlText property of the Html text control to following:

"<h3>Asset Checkout Notification</h3>" &

"<table width='100%'> " &
     "<tr>
         <td> Employee: </td>" & "<td>John Smith (johnsm@contoso.com)</td>" &
     "</tr>" &
     "<tr>
         <td> Checkout Date: </td> <td>" & Today() & "</td>
     </tr>" &
     "<tr>
         <td> Return date: </td> <td>" & DateAdd(Today(), 1, Months) & "</td>
     </tr>" &
"</table> <br>" &

"<strong> Items: </strong>" &
"<table width='100%' border='1' cellpadding='5' style='border:1px solid black; border-collapse:collapse'>" &
     "<tr style='background-color:#efefef' >
         <td>Product Id</td> <td> Product Name </td> <td> Price </td>
     </tr>
     " &
         Concat(Cart,
             "<tr><td>" & ProductId & " </td>
              <td>" & ProductName & " </td>
              <td>" & Price & " </td></tr>") &"
</table>"

The Cart collection looks like below:

ClearCollect(
              Cart, 
              {ProductId: 10010, ProductName: "iPhone XS", Price: 7500},
              {ProductId: 10011, ProductName: "Samsung Galaxy A8", Price: 4500},
              {ProductId: 10012, ProductName: "Sony", Price: 3500}
)

Please check the following blog for more details:

https://powerapps.microsoft.com/en-us/blog/html-email-reporting-with-tabular-data/

In addition, if you want to make the custom HTML works offline, I think the SaveData function and LoadData function could achieve your needs. You could consider save your custom HTML Text into your local device using the following formula:

ClearCollect(CustomHTMLText, "Type you custom HTML Text here");
SaveData(CustomHTMLText, "LocalHtmlText")

then when your app is in a offline, you could use the following formula to load your cached Html text into your app:

LoadData(CustomHtmlText, "LocalHtmlText", true)

Note: Currently, the SaveData function and LoadData function only works in Mobile device or PowerApps Desktop client. You could not use these functions in your web browser.

Please check the following article for more details:

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-savedata-loaddata

More details about creating a Offline app in PowerApps, please check the following article:

https://powerapps.microsoft.com/en-us/blog/build-offline-apps-with-new-powerapps-capabilities/

Best regards,