PowerApps: Use HTML to modify form display in model-driven apps?

Question

I need to modify the format of a form in a model-driven app to make it more readable/intuitive. Currently, the form looks like this:

I tried to use a web resource to create a simple HTML table with <script> and Xrm.Page.getAttribute() to pull in the relevant fields under the planned and actual columns, but that isn't working. I set the dependencies and assigned it to the proper form element, but no luck. The code that I used is this:

<div>  
  <table>
    <tr>
      <td><u>Tasks</u></td>
      <td><u>Planned</u></td>
      <td><u>Actual</u></td>
    </tr>
    <tr>
      <td>Task 1</td>
      <td><script>Xrm.Page.getAttribute("[plannedField_1]")</script></td>
      <td><script>Xrm.Page.getAttribute("[actualField_1]")</script></td>
    </tr>
    <tr>
      <td>Task 2</td>
      <td><script>Xrm.Page.getAttribute("[plannedField_2]")</script></td>
      <td><script>Xrm.Page.getAttribute("[actualField_2]")</script></td>
    </tr>
    <tr>
      <td>Task 3</td>
      <td><script>Xrm.Page.getAttribute("[plannedField_3]")</script></td>
      <td><script>Xrm.Page.getAttribute("[actualField_3]")</script></td>
    </tr> 
  </table>
</div>

Is this a valid way to modify form output, or is there another/better way to do this that doesn't involve creating an elaborate solution with dynamically scripted HTML?

Answer 1

Uncheck the Display label on the form for one of the controls.