Solved: Saving Powerapps form as PDF or directly printing ...

AVH · ‎07-23-2018

Hi,

I have read several post about this topic from one or two years ago. I was wondering if this feature has already been taken into account?

Best regards,

AVH

mbrocchi1 · ‎12-09-2018

https://youtu.be/IhE0-HumNNo

View solution in original post

v-monli-msft · ‎07-24-2018

Hi @AVH,

No, this is still not available so far. I have found below 2 ideas submitted and the status is still under review.

https://powerusers.microsoft.com/t5/PowerApps-Ideas/Print-amp-PDF/idi-p/60736

https://powerusers.microsoft.com/t5/PowerApps-Ideas/Export-Form-to-PDF/idi-p/1375

Regards,

Mona

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

mbrocchi1 · ‎12-09-2018

https://youtu.be/IhE0-HumNNo

View solution in original post

Anonymous · ‎12-14-2018

Thanks for helpful YouTube video, @mbrocchi1!

@Anonymous

ccampora · ‎01-28-2020

Take a look https://ccampora.blogspot.com/2020/01/going-back-to-posting-after-long-period.html?m=1

esemuhdeoh · ‎07-22-2020

Thanks @mbrocchi1 for the Video.

I did all the steps Chino Shows in the Video and I can print a pdf, works like a charm.

But after trying with a simple template I asked a colleague to create a from that we could use for other cases (see Code below).

I used the colde below and it will create a Beautiful (personal opinion 😁) html-form. But when printing this as a pdf-form it will put all columns among each other. not as a table as it should do it.

So I started adding a very simple html-table and this will be shown correctly side by side as it should.

My Question now is: Do I have to do everything in the "old-style"-html or is there a way I can modify the Beautiful html-form so that It will be a Beautiful pdf?

NOTE: I had to put every Quote ("") in double quotes so that the html-field in PowerApps will render correctly.

This is the Content of the html-field in PowerApps:

"<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
  <link rel=""stylesheet"" href=""https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"" integrity=""sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"" crossorigin=""anonymous"">
  <script src=""https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"" integrity=""sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"" crossorigin=""anonymous""></script>
  <title>Document</title>
  <style>
    body {
      margin: 30px;
    }
    .doc-col {
      border: 2px dotted blue;
    }
    .doc-row {
      border: 2px solid red;
    }
    .doc-container {
      border: 1px solid green;
    }
    .doc-border-top {
      border-top: 1px solid black;
    }
    .doc-border-bottom {
      border-bottom: 1px solid black;
    }
    .doc-row-italics {
      height: 50px;
      font-style: italic;
      font-size: smaller;
    }
    .doc-row-topic {
      height: 40px;
      font-style: italic;
      font-weight: 500;
      font-size: larger;
    }
    .doc-empty-row {
      height: 15px;
    }
    .doc-col-grey {
      font-weight: 700;
      background-color: lightgray;
    }
    .doc-col-grey-normal-weight {
      background-color: lightgray;
    }
    .doc-col-green {
      font-weight: 700;
      background-color: #487d29;
    }
    .doc-border-right {
      border-right: 1px solid black;
    }
    .doc-border-left {
      border-left: 1px solid black;
    }
    .doc-high-row {
      height: 150px;
    }
    .doc-mid-high-row {
      height: 80px;
    }
    .doc-align-center {
      text-align: center;
    }
    .doc-signature {
      height: 40px;
      border-bottom: 1px solid #000;
      margin-bottom: 0px;
    }
    .doc-signature-text {
      font-size: small;
      margin-top: 0px;
    }
    @media print {
      footer {page-break-after: always;}
    }
  </style>
</head>
<body>
  <div class=""container"">
    <!-- Oberer Teil mit Titel und Logo -->
    <div class=""row doc-border-top align-items-center doc-border-bottom"">
      <div class=""col-6""><h2>Vorlage für Investitionen</h2></div>
      <div class=""col-6""><img src=""https://logoipsum.com/logo/logo-12.svg"" alt=""""></div>
    </div>

    <!-- Kursive Reihe -->
    <div class=""row doc-row-italics align-items-center"">
      <div class=""col"">Für Bereich:</div>
      <div class=""col"">Musterfirma</div>
      <div class=""col"">Antragsteller:</div>
      <div class=""col"">Hr. Mustermann</div>
      <div class=""col"">Datum:</div>
      <div class=""col"">xx.xx.xxxx</div>
    </div>

    <!-- Reihe mit Thema -->
    <div class=""row doc-border-top doc-border-bottom doc-row-topic align-items-center"">
      <div class=""col-4"">Thema:</div>
      <div class=""col-8"">Musterthema</div>
    </div>

    <!-- Platzhalter -->
    <div class=""row doc-empty-row""></div>

    <!-- Vorlage für: -->
    <div class=""row doc-border-bottom doc-border-top doc-border-left doc-border-right"">
      <div class=""col-4 doc-border-right doc-col-grey"">Vorlage für:</div>
      <div class=""col-2 doc-border-right""><input type=""checkbox""> Geschäftsführung</div>
      <div class=""col-6""><input type=""checkbox""> Gesellschafter</div>
    </div>

    <!-- Leere Zeile mit Rand -->
    <div class=""row doc-empty-row doc-border-bottom doc-border-left doc-border-right""></div>

    <!-- Investitionsart -->
    <div class=""row doc-border-bottom doc-border-left doc-border-right"">
      <div class=""col-4 doc-border-right doc-col-grey"">Investitionsart:</div>
      <div class=""col-2 doc-border-right""><input type=""checkbox""> Geplant</div>
      <div class=""col-2 doc-border-right""><input type=""checkbox""> Ungeplant</div>
      <div class=""col-2 doc-border-right""><input type=""checkbox""> Ersatz</div>
      <div class=""col-2""><input type=""checkbox""> Erweiterung</div>
    </div>

    <!-- Investition / Kosten in T€ -->
    <div class=""row doc-border-bottom doc-border-left doc-border-right"">
      <div class=""col-4 doc-border-right doc-col-grey"">Investition / Kosten in T€:</div>
      <div class=""col-2 doc-border-right"">
        CapEx: <br>
        Bauprojekt: <br>
        Kosten: <br>
      </div>
      <div class=""col-4 doc-border-right doc-col-grey"">
        KPIs gem. AMR
      </div>
      <div class=""col-2"">
        Barwert CF: XX.XXXT€ <br>
        Kapitalwert: XX.XXXT€ <br>
        IRR: XX% <br>
      </div>
    </div>

    <!-- Leere Zeile mit Rand -->
    <div class=""row doc-empty-row doc-border-bottom doc-border-left doc-border-right""></div>

    <!-- Allgemeine Angaben -->
    <div class=""row doc-border-bottom doc-border-left doc-border-right"">
      <div class=""col-4 doc-border-right doc-col-grey"">
        Allgemeine Angaben:<br>
        (Kontext / Beschreibung):
      </div>
      <div class=""col"">
        <ul>
          <li>Ich bin der erste Stichpunkt</li>
          <li>Ich bin der zweite Stichpunkt</li>
          <li>Ich bin der dritte Stichpunkt</li>
          <li>...</li>
        </ul>
      </div>
    </div>

    <!-- Leere Zeile mit Rand -->
    <div class=""row doc-empty-row doc-border-bottom doc-border-left doc-border-right""></div>

    <!-- Beschlussvorschlag -->
    <div class=""row doc-border-bottom doc-border-left doc-border-right"">
      <div class=""col-4 doc-border-right doc-col-grey"">Beschlussvorschlag:</div>
      <div class=""col"">
        <ol>
          <li>Aufzählungen funktionieren</li>
          <li>mit ol</li>
          <li>statt ul</li>
        </ol>
      </div>
    </div>

<!-- Entering normal table -->
<table style=""""width:100%"""">
  <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>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>




    <!-- Leere Zeile mit Rand -->
    <div class=""row doc-empty-row doc-border-bottom doc-border-left doc-border-right""></div>
    <!-- Anlagen -->
    <div class=""row doc-border-bottom doc-border-left doc-border-right"">
      <div class=""col-4 doc-border-right doc-col-grey"">Anlagen:</div>
      <div class=""col-5 doc-border-right"">
        Amortisationsrechnung<br>
        Präsentation
      </div>
      <div class=""col"">
        <input type=""checkbox"">___________________________<br>
        <input type=""checkbox"">___________________________
      </div>
    </div>

    <!-- Leere Zeile mit Rand -->
    <div class=""row doc-empty-row doc-border-bottom doc-border-left doc-border-right""></div>

    <!-- Beschluss durch folgende Abteilungen geprüft - besteht aus zwei Reihen -->
    <div class=""row doc-border-left doc-border-right"">
      <div class=""col-4 doc-border-right doc-col-grey-normal-weight"">
        <strong>Beschluss durch folgende Abteilungen geprüft (Kommentar, Unterschrift):</strong> <br><br>
        Weitere Fachabteilungen (FA) sind in Abhängigkeit des Investitionsvorhabens einzubinden (z. B. Technik, IT, Personal, GF)
      </div>
      <div class=""col-2 doc-border-right doc-border-bottom"">
        <strong>Controlling:</strong><br>
        Kommentar / Auflage:<br><br><br>
        Keine händische Unterschrift, sondern Datum der Genehmigung<br><br>
        <div class=""doc-signature""></div>
        <span class=""doc-signature-text"">Unterschrift</span>
      </div>
      <div class=""col-2 doc-border-right doc-border-bottom"">
        <strong>Rechnungswesen:</strong><br>
        Kommentar / Auflage:<br><br><br>
        <br><br><br><br><br><br>
        <div class=""doc-signature""></div>
        <span class=""doc-signature-text"">Unterschrift</span>
      </div>
      <div class=""col doc-border-bottom"">
        <strong>Beschaffung:</strong><br>
        Kommentar / Auflage:<br><br><br>
        <br><br><br><br><br><br><br>
        <div class=""doc-signature""></div>
        <span class=""doc-signature-text"">Unterschrift</span>
      </div>
    </div>
    <div class=""row doc-border-bottom doc-border-left doc-border-right"">
      <div class=""col-4 doc-border-right doc-col-grey-normal-weight""></div>
      <div class=""col-2 doc-border-right"">
        <strong>Recht / Versicherung:</strong><br>
        Kommentar / Auflage:<br><br><br>
        <br><br><br><br><br>
        <div class=""doc-signature""></div>
        <span class=""doc-signature-text"">Unterschrift</span>
      </div>
      <div class=""col-2 doc-border-right"">
        <strong>Finanzen:</strong><br>
        Kommentar / Auflage:<br><br><br>
        <br><br><br><br><br><br>
        <div class=""doc-signature""></div>
        <span class=""doc-signature-text"">Unterschrift</span>
      </div>
      <div class=""col"">
        <strong>______________________________ :</strong><br>
        Kommentar / Auflage:<br><br><br>
        <br><br><br><br><br><br><br>
        <div class=""doc-signature""></div>
        <span class=""doc-signature-text"">Unterschrift</span>
      </div>
    </div>

    <!-- Leere Zeile mit Rand -->
    <div class=""row doc-empty-row doc-border-bottom doc-border-left doc-border-right""></div>

    <!-- Unterschrift Antragsteller -->
    <div class=""row doc-border-bottom doc-border-left doc-border-right"">
      <div class=""col-4 doc-border-right doc-col-grey"">Unterschrift Antragsteller:</div>
      <div class=""col-4"">
        <div class=""doc-signature""></div>
        <span class=""doc-signature-text"">Unterschrift</span>
      </div>
      <div class=""col-1 doc-border-right""></div>
    </div>

    <!-- Leere Zeile mit Rand -->
    <div class=""row doc-empty-row doc-border-bottom doc-border-left doc-border-right""></div>

    <!-- Beschluss (ggf. mit Begründung) -->
    <div class=""row doc-border-left doc-border-right doc-border-bottom"">
      <div class=""col-2 doc-col-green doc-border-right doc-mid-high-row"">
        Beschluss:<br>
        (ggf. mit Begründung)
      </div>
      <div class=""col-3 doc-border-right align-self-start doc-border-bottom""><input type=""checkbox""/> Vorschlag angenommen</div>
      <div class=""col-3 doc-border-right align-self-start doc-border-bottom""><input type=""checkbox""/> Abgelehnt</div>
      <div class=""col-4 doc-border-right align-self-start doc-border-bottom""><input type=""checkbox""/> Sonstiges</div>
    </div>

    <!-- Porta Westfalica, den -->
    <div class=""row doc-mid-high-row doc-border-right doc-border-left doc-border-bottom"">
      <div class=""col"">Berlin, den</div>
    </div>

    <!-- Leerer Block -->
    <div class=""row doc-mid-high-row doc-border-right doc-border-left doc-border-bottom""></div>

    <!-- Geschäftsführung -->
    <div class=""row"">
      <div class=""col doc-align-center doc-border-left doc-border-right doc-border-bottom"">
        Geschäftsführung
      </div>
    </div>

    <!-- Protokollant -->
    <div class=""row doc-high-row"">
      <div class=""col doc-border-left doc-border-right doc-border-bottom"">
        (soweit erforderlich) Zustimmung des Gesellschafters erfolgt am:<br>
        <br>
        <br>
        <br>
        <br>
        Protokollant
      </div>
    </div>

    <!-- Sekretariat GF -->
    <div class=""row doc-high-row"">
      <div class=""col doc-border-left doc-border-right doc-border-bottom"">
        Kommunikation an beteiligte FA/ Bereiche erfolgt am:<br>
        <br>
        <br>
        <br>
        <br>
        Sekretariat GF
      </div>
    </div>

    <!-- Archiviert am -->
    <div class=""row doc-high-row"">
      <div class=""col doc-border-left doc-border-right doc-border-bottom"">
        Archiviert am:<br>
        <br>
        <br>
        <br>
        <br>
        Abteilung Recht
      </div>
    </div>

    <!-- Hier können beliebig weitere Reihen eingefügt werden -->

    <!-- Manuelle Seitenumbrüche: <footer></footer> -->

    Manuelle Seitenumbrüche:
    <footer></footer>
    Tadaa! (Zu sehen im Druck, nicht in der HTML Vorschau)

  <!-- Hier drunter dürfen keine Reihen mehr kommen!   -->
  </div>
</body>
</html>
"

Saving Powerapps form as PDF or directly printing it

Helpful resources

Community Blog

Power Apps Community Call- January

Global Power Platform Bootcamp

Power Platform Community Conference On Demand