Skip to main content

Notifications

Power Apps - Building Power Apps
Answered

HTML Text box not formatting as per HTML editor

(0) ShareShare
ReportReport
Posted on by 134

I have created in HTML editor a mock up of the data I wanted to see replicated in power apps.  Unfortunately the table formatting and a javascript statement appear as expected within HTML editor but not within power apps.  Any ideas why this would be?

HTML editor:

Mawdman85_0-1710948314675.png

Power apps:

Mawdman85_1-1710948344227.png

 

Full HTML code as entered in power apps:

"<!DOCTYPE html>
<html>
 
<style>
table, th, td {border:1px solid black; border-collapse: collapse;}
th, td {padding:8px}
body {font-family: Trebuchet MS;}
</style>
 
<body>
 
<p id='datetime'> </p>
 
<script>
  // Get current date and time
  var now = new Date();
  var datetime = now.toLocaleString();
 
  // Insert date and time into HTML
  document.getElementById('datetime').innerHTML = 'Document created at: ' + datetime ;
</script>
 
<h1>Dartford Return to Work</h1>
<h2> Summary of absence </h2>
 
<table>
<tr>
    <th>Absence Start Date</th>
        <th>RTW date</th>
<th>Number of shifts absent</th>
<th>Reason for absence</th>
    </tr>
    <tr>
    <td>" & NOA_Gal.Selected.AbsenceDate & " </td>
        <td>" & NOA_Gal.Selected.RTWDate & " </td>
        <td>" & NOA_Gal.Selected.MissedShifts & " </td>
        <td>" & NOA_Gal.Selected.AbsenceReason.Value & "  </td>
    </tr>
</table>
<br>
<hr>
 
<p>Was the correct absence process followed? " & NOA_Gal.Selected.AbsenceProcess.Value & "</p>
<p>If no, has the employee been made aware of the correct absence process? " & NOA_Gal.Selected.AbsenceProcessNo.Value & "</p>
<p>Was self certification completed? " & NOA_Gal.Selected.SelfCert.Value & "</p>
<p>If applicable has TOFD been completed? " & NOA_Gal.Selected.TOFDComplete.Value & "</p>
<p>If absence over 7 calendar days, has a fit note been supplied? " & NOA_Gal.Selected.FitNoteSupplied.Value & "</p>
<p>Was the absence work related? " & NOA_Gal.Selected.WorkRelated & "</p>
<p>What actions did you take to assist your RTW? " & NOA_Gal.Selected.ActionComments & "</p>
<p>Are you still receiving treatment? " & NOA_Gal.Selected.OngoingComments & "</p>
<p>Are you currently on medication? " & NOA_Gal.Selected.Medication.Value & "</p>
<p>If yes, please provide details and dosage, along with possible side effects: " & NOA_Gal.Selected.MedicationComments & "</p>
<p>Are you fit to return to full and normal duties? " & NOA_Gal.Selected.FitToReturn.Value & "</p>
<p>Is there any further support you require to aid your RTW? " & NOA_Gal.Selected.FurtherSupport.Value & "</p>
<p>If yes, please provide details: " & NOA_Gal.Selected.SupportComments & "</p>
<p>Have you been informed of your current absence rate and trigger points? " & NOA_Gal.Selected.Informed.Value & "</p>
 
<hr>
 
<h3>Signed by colleague &emsp;...................................</h3>
<h3>Signed by supervisor &ensp; ...................................</h3>
 
 
 
 
</body>
</html>
 
"

 

Categories:
  • Mawdman85 Profile Picture
    Mawdman85 134 on at
    Re: HTML Text box not formatting as per HTML editor

    Perfect, thanks @BhaskarDhone  - FYI when putting into powerapps just have to change the " to '

  • Verified answer
    BhaskarDhone Profile Picture
    BhaskarDhone 784 on at
    Re: HTML Text box not formatting as per HTML editor

    HTMLText control has limited support for CSS styles and JavaScript execution. But things you are trying to achieve is possible with inline css without javascript and css references. Try below html

     

    <h4>Document created at:</h4>
    <h1 style="font-family: Trebuchet MS;">Dartford Return to Work</h1>
     <h2 style="font-family: Trebuchet MS;">Summary of absence</h2>
    
     <table style="border: 1px solid black; border-collapse: collapse;">
     <tr>
     <th style="border: 1px solid black; padding: 8px;">Absence Start Date</th>
     <th style="border: 1px solid black; padding: 8px;">RTW date</th>
     <th style="border: 1px solid black; padding: 8px;">Number of shifts absent</th>
     <th style="border: 1px solid black; padding: 8px;">Reason for absence</th>
     </tr>
     <tr>
     <td style="border: 1px solid black; padding: 8px;">" & NOA_Gal.Selected.AbsenceDate & "</td>
     <td style="border: 1px solid black; padding: 8px;">" & NOA_Gal.Selected.RTWDate & "</td>
     <td style="border: 1px solid black; padding: 8px;">" & NOA_Gal.Selected.MissedShifts & "</td>
     <td style="border: 1px solid black; padding: 8px;">" & NOA_Gal.Selected.AbsenceReason.Value & "</td>
     </tr>
     </table>
    
     <br>
     <hr>
    
     <p>Was the correct absence process followed? " & NOA_Gal.Selected.AbsenceProcess.Value & "</p>
     <p>If no, has the employee been made aware of the correct absence process? " & NOA_Gal.Selected.AbsenceProcessNo.Value & "</p>
     <p>Was self certification completed? " & NOA_Gal.Selected.SelfCert.Value & "</p>
     <p>If applicable has TOFD been completed? " & NOA_Gal.Selected.TOFDComplete.Value & "</p>
     <p>If absence over 7 calendar days, has a fit note been supplied? " & NOA_Gal.Selected.FitNoteSupplied.Value & "</p>
     <p>Was the absence work related? " & NOA_Gal.Selected.WorkRelated & "</p>
     <p>What actions did you take to assist your RTW? " & NOA_Gal.Selected.ActionComments & "</p>
     <p>Are you still receiving treatment? " & NOA_Gal.Selected.OngoingComments & "</p>
     <p>Are you currently on medication? " & NOA_Gal.Selected.Medication.Value & "</p>
     <p>If yes, please provide details and dosage, along with possible side effects: " & NOA_Gal.Selected.MedicationComments & "</p>
     <p>Are you fit to return to full and normal duties? " & NOA_Gal.Selected.FitToReturn.Value & "</p>
     <p>Is there any further support you require to aid your RTW? " & NOA_Gal.Selected.FurtherSupport.Value & "</p>
     <p>If yes, please provide details: " & NOA_Gal.Selected.SupportComments & "</p>
     <p>Have you been informed of your current absence rate and trigger points? " & NOA_Gal.Selected.Informed.Value & "</p>
    
     <hr>
    
     <h3>Signed by colleague &emsp;...................................</h3>
     <h3>Signed by supervisor &ensp; ...................................</h3>

    samplehtml.PNG

     

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

Microsoft Kickstarter Events…

Register for Microsoft Kickstarter Events…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 145,666

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,996

Leaderboard