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
Super User
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
firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Top Community Contributors for July 2019

Top Community Contributors for July 2019

Let's thank our top community contributors

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

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

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

FifthImage

Dynamics 365 and Power Platform April 2019 Release notes

Features releasing from April 2019 through September 2019!

Users Online
Currently online: 4 members 5,137 guests
Please welcome our newest community members: