cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
priyeshwagh777
Level: Powered On

Implement custom HTML in Canvas PowerApps and make it Offline

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.

 

2 REPLIES 2
Dual Super User
Dual Super User

Re: Implement custom HTML in Canvas PowerApps and make it Offline

Hi @priyeshwagh777 

 

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

 

 

ldkjlf.PNG

 

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!

Community Support Team
Community Support Team

Re: Implement custom HTML in Canvas PowerApps and make it Offline

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:3.JPG

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,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors (Last 30 Days)
Users online (6,277)