web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Implement custom HTML ...
Power Apps
Unanswered

Implement custom HTML in Canvas PowerApps and make it Offline

(0) ShareShare
ReportReport
Posted on by 62

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.

 

Categories:
I have the same question (0)
  • yashag2255 Profile Picture
    24,769 Super User 2024 Season 1 on at

    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!

  • v-xida-msft Profile Picture
    Microsoft Employee on at

    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,

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the April Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
Vish WR Profile Picture

Vish WR 1,027

#2
Valantis Profile Picture

Valantis 644

#3
11manish Profile Picture

11manish 626

Last 30 days Overall leaderboard