Re: I want to generate a PDF file for my purchase ...

jkevz · 01-20-2025 12:52 AM

Hello! I want to generate a PDF file for my purchase orders using HTML code. Can you please check what is wrong with my code below. It is not working whenever I triggered the button to generate a pdf.

<!DOCTYPE html>
<html>
<head>

    <title>Purchase Order Template</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 1cm;
            line-height: 1.5;
        }
        .header, .footer {
            text-align: center;
            font-weight: bold;
        }
        .header {
            margin-bottom: 1cm;
        }
        .footer {
            margin-top: 1cm;
        }
        .section {
            margin-bottom: 0.5cm;
        }
        .section h3 {
            margin-bottom: 0.3cm;
        }
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 0.5cm;
            font-size: 12px;
        }
        .table th, .table td {
            border: 1px solid #000;
            padding: 6px;
            text-align: left;
        }
        .notes {
            margin-top: 0.5cm;
        }
    </style>
</head>
<body>
  <div class="PO">
    <div class="header">
        <h1>Refrigeration House Contracting Company</h1>
        <h2>PURCHASE ORDER</h2>
        <h3>Order Details</h3>
    </div>

    <div class="section">
        <h3>Supplier Information</h3>
        <p>
            <strong>Supplier:</strong> &lt;&lt;[Supplier Name]&gt;&gt;<br>
            <strong>Contact Person:</strong> &lt;&lt;[Contact Person]&gt;&gt;<br>
            <strong>Address:</strong> &lt;&lt;[Address]&gt;&gt;<br>
            <strong>Purchase Order No.:</strong> &lt;&lt;[PO No.]&gt;&gt;<br>
            <strong>PO Date:</strong> &lt;&lt;[PO Date]&gt;&gt;<br>
            <strong>Incoterm:</strong> Ex-Works &lt;&lt;[Origin]&gt;&gt;<br>
            <strong>Payment Term:</strong> &lt;&lt;[Payment Terms]&gt;&gt;
        </p>
    </div>

    <div class="section">
        <h3>Ship To</h3>
        <p>
            Mr. Mohammed Baiju<br>
         <PII REMOVED BY STAFF>
        </p>
    </div>

    <table class="table">
        <thead>
            <tr>
                <th>SN</th>
                <th>Code No.</th>
                <th>Description</th>
                <th>Quantity</th>
                <th>Net Price</th>
                <th>Total Price</th>
            </tr>
        </thead>
        <tbody>
            <!-- Dynamic rows start here -->

                <td>&lt;&lt;Start: [Related PO Items]&gt;&gt;&lt;&lt;[No.]&gt;&gt;</td>
                <td>&lt;&lt;[Item No.]&gt;&gt;</td>
                <td>&lt;&lt;[Item Description]&gt;&gt;</td>
                <td>&lt;&lt;[Requested Qty]&gt;&gt;</td>
                <td>&lt;&lt;[Unit Price]&gt;&gt;</td>
                <td>&lt;&lt;[Ext. Price (Open)]&gt;&gt;&lt;&lt;[End]&gt;&gt;</td>
            </tr>

            <!-- Dynamic rows end here -->
        </tbody>
    </table>

    <p><strong>Subtotal:</strong> &lt;&lt;[Currency]&gt;&gt; &lt;&lt;[Open Amount]&gt;&gt;</p>

    <div class="notes">
        <h3>Notes:</h3>
        <p>
            &lt;&lt;[Note1]&gt;&gt;<br>
            &lt;&lt;[Additional Note]&gt;&gt;<br>
            &lt;&lt;[Note2]&gt;&gt;<br>
            &lt;&lt;[Note3]&gt;&gt;<br>
            &lt;&lt;[Note4]&gt;&gt;<br>
            &lt;&lt;[Note5]&gt;&gt;<br>
            &lt;&lt;[Note6]&gt;&gt;
        </p>
    </div>

    <div class="footer">
        <table style="width: 100%;">
            <tr>
                <td style="text-align: center;">
                    Eng. Mohammed Baiju<br>
                    <span style="font-weight: normal;">Regional Sales Manager</span>
                </td>
                <td style="text-align: center;">
                    Mohammed Ziou Ziou<br>
                    <span style="font-weight: normal;">Branch Manager</span>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

@Aleksi @Jonathon @WillowMobileSys @SkrOYC

jambyc

Any logs from Automation Monitor?

jkevz

@jambyc no errors. I suspected the table, I guess my HTML code is missing something.

Aurelien

Hi @jkevz

Did you consider using a Google Docs or Microsoft Word template? I think you would save time.

For reference:

Use Microsoft Word templates - AppSheet Help

Use Google Docs templates - AppSheet Help

jkevz

@Aurelien Thanks for your reply! Actually I was using docs template before but because docs template cannot be able to arrange or detect a header and footer, I am trying to use HTML template now as someone says in this community that you can able to manipulate the header and footer by using the template in HTML. Please correct me if I am wrong.

Aurelien

Ok, I get the point 🙂

Good luck then, HTML is not my favourite coding language.

You may benefit of insights from the excellent @SkrOYC 😉

He made a serie of posts about your need!

WillowMobileSys

Here are the posts from @SkrOYC that @Aurelien mentioned about creating HTML based reports. It's a series of 3 posts:

Part 1 - Almost pixel perfect pdf reports from automation

Part 2: Pixel perfect paginated reports

Part 3: Pixel perfect reports with Skia (AppSheet's PDF generator)

SkrOYC

Try this

<!DOCTYPE html>
<html>

<head>

    <title>Purchase Order Template</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 1cm;
            line-height: 1.5;
        }

        .header,
        .footer {
            text-align: center;
            font-weight: bold;
        }

        .header {
            margin-bottom: 1cm;
        }

        .footer {
            margin-top: 1cm;
        }

        .section {
            margin-bottom: 0.5cm;
        }

        .section h3 {
            margin-bottom: 0.3cm;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 0.5cm;
            font-size: 12px;
        }

        .table th,
        .table td {
            border: 1px solid #000;
            padding: 6px;
            text-align: left;
        }

        .notes {
            margin-top: 0.5cm;
        }
    </style>
</head>

<body>
    <div class="PO">
        <div class="header">
            <h1>Refrigeration House Contracting Company</h1>
            <h2>PURCHASE ORDER</h2>
            <h3>Order Details</h3>
        </div>

        <div class="section">
            <h3>Supplier Information</h3>
            <p>
                <strong>Supplier:</strong> &lt;&lt;[Supplier Name]&gt;&gt;<br />
                <strong>Contact Person:</strong> &lt;&lt;[Contact Person]&gt;&gt;<br />
                <strong>Address:</strong> &lt;&lt;[Address]&gt;&gt;<br />
                <strong>Purchase Order No.:</strong> &lt;&lt;[PO No.]&gt;&gt;<br />
                <strong>PO Date:</strong> &lt;&lt;[PO Date]&gt;&gt;<br />
                <strong>Incoterm:</strong> Ex-Works &lt;&lt;[Origin]&gt;&gt;<br />
                <strong>Payment Term:</strong> &lt;&lt;[Payment Terms]&gt;&gt;
            </p>
        </div>

        <div class="section">
            <h3>Ship To</h3>
            <p>
                Mr. Mohammed Baiju<br />
            </p>
        </div>

        <table class="table">
            <thead>
                <tr>
                    <th>SN</th>
                    <th>Code No.</th>
                    <th>Description</th>
                    <th>Quantity</th>
                    <th>Net Price</th>
                    <th>Total Price</th>
                </tr>
            </thead>
            <tbody>
                <!-- Dynamic rows start here -->
                <p>&lt;&lt;Start:[Related PO Items]&gt;&gt;</p>
                <tr>
                    <td>&lt;&lt;[No.]&gt;&gt;</td>
                    <td>&lt;&lt;[Item No.]&gt;&gt;</td>
                    <td>&lt;&lt;[Item Description]&gt;&gt;</td>
                    <td>&lt;&lt;[Requested Qty]&gt;&gt;</td>
                    <td>&lt;&lt;[Unit Price]&gt;&gt;</td>
                    <td>&lt;&lt;[Ext. Price (Open)]&gt;&gt</td>
                </tr>
                <p>;&lt;&lt;[End]&gt;&gt;</p>
                <!-- Dynamic rows end here -->
            </tbody>
        </table>

        <p><strong>Subtotal:</strong> &lt;&lt;[Currency]&gt;&gt; &lt;&lt;[Open Amount]&gt;&gt;</p>

        <div class="notes">
            <h3>Notes:</h3>
            <p>
                &lt;&lt;[Note1]&gt;&gt;<br />
                &lt;&lt;[Additional Note]&gt;&gt;<br />
                &lt;&lt;[Note2]&gt;&gt;<br />
                &lt;&lt;[Note3]&gt;&gt;<br />
                &lt;&lt;[Note4]&gt;&gt;<br />
                &lt;&lt;[Note5]&gt;&gt;<br />
                &lt;&lt;[Note6]&gt;&gt;
            </p>
        </div>

        <div class="footer">
            <table style="width: 100%;">
                <tr>
                    <td style="text-align: center;">
                        Eng. Mohammed Baiju<br />
                        <span style="font-weight: normal;">Regional Sales Manager</span>
                    </td>
                    <td style="text-align: center;">
                        Mohammed Ziou Ziou<br />
                        <span style="font-weight: normal;">Branch Manager</span>
                    </td>
                </tr>
            </table>
        </div>
</body>

</html>

Now, do you want headers and footers for all pages,?

jkevz

Yes, I need only a header and footers for all pages. I tried your code above and still not working when I automate it in my app. If I will remove the corresponding tables, the code will work. Maybe there's some codes I missed on the table

SkrOYC

Headers and Footers require more attention, you could get around with it using position: absolute.
Make sure to have a look at that by yourself since I know there are a lot of ways to explain something and I think there are videos doing that already.

I just noticed there is an error in the End

@SkrOYC wrote:

<p>;<<[End]>></p>

Remove the brackets

allow

I am studying how to use HTML with appsheet. Where to do it? After writing HTML, how to connect? Please advise.