https://netsuiteprofessionals.com logo
Join Slack
Powered by
Hi, all, I'm trying to build a label PDF based on ...
# advancedpdf
a
Hi, all, I'm trying to build a label PDF based on the standard 2" x 4" Avery 5163 label format (for 8.5 x 11" sheets). To do this I need to ensure that the layout of each label is static -- in other words, that no rows, cells, or columns are dynamically resizing to the length of any content. I've spent hours doing research and testing different approaches, and I still cannot find a solution that Advanced PDF / Netsuite's implementation of BFO will recognize. I have a beautiful template crafted entirely using <div>s (no <table>, <td>, <tr>) that works very well in JSFiddle and every browser, but NS Advanced PDF appears to not recognize any of the <div>s or their formatting. I've also tried coaxing <table>s and even nested <table>s into a format that will fix the cell dimensions, but here I'm running up against what seems to be a native limitation of the <table> object itself: you can fix the column width using table-layout: fixed and setting the column widths using either <td> widths or <colgroup>, but there is no way (that I've found) to prevent a cell from expanding vertically to accommodate text contents. Has anyone had success designing absolutely fixed/static-dimensioned blocks in Advanced PDF? Any code examples to illustrate what might work? I'll post some more code examples and screenshots in the thread. Thanks!
Here's an example of the label format I'm trying to replicate (and improve upon). This label is generated from a program that is not Netsuite.
Here's my best new version of the label, in the form of a mockup using HTML/CSS with a <div>-based layout. Note how the overflow is cut off and the cells don't expand to fit:
For what it's worth, here's the main <div>-based code snippet that builds the above label:
Copy code
<style type="text/css">
        * { margin: 0; padding: 0; border: 0; }
        @page {
            size: "Letter" portrait;
            margin: 0; padding: 0;
        }

        .labelframe{
            height: 2in;
            width: 4in;
            color: #000; background: #FFF;
            font-family: "Roboto", "Helvetica Neue", Helvetica, "NotoSans", Arial, sans-serif;
            font-size: 10pt; line-height: 18pt;
        }
        .labelframe .headerarea {
            position:relative;
            left:0;
            top:0;
            height: 25%;
            width: 100%;
            border: 1px solid;
            overflow:hidden;
        }


        .labelframe .headerarea .shipto {
            position:absolute;
            top:0;
            left:0;
            bottom:0;
            width:100%;
            padding-left:1%;
            padding-right:1%;
            padding-bottom:1%;
        }

        .labelframe .headerarea .shipto .value {
            position:absolute;
            top:0;
            left:18%;
            bottom:0;
            right:0;
            font-weight: 800;
            font-size: 14;
            
        }
        .labelframe .headerarea .itemposition{
            position:absolute;
            right:0;
            bottom:0;
            left:80%;
            text-align: right;
            border: 1px solid;
            white-space: nowrap;
            background-color: white;
            z-index:10;
            padding-right:1%

        }
        .labelframe .centerarea {
            position:relative;
            height:30%;
            width:100%;
            border: 1px solid;
            overflow:hidden;
            white-space: nowrap;
        }

        .labelframe .centerarea .shipdate{
            position:absolute;
            top: 0;
            left: 0;
            right:58%;
            bottom:50%;
            float:left;
            padding-left:1%;


        }

        .labelframe .centerarea .shipdate .value{
            position:absolute;
            top:0;
            left:44%;
            font-weight: 800;
            font-size: 14;

        }

        .labelframe .centerarea .orderid{
            position:absolute;
            top:0%;
            left:43%;
            right:20%;
            bottom:50%;
            padding-left:1%;        
        }
    
        .labelframe .centerarea .orderid .value{
            position:absolute;
            top:0;
            left:45%;
            font-weight: 800;
            font-size: 14;

        }


        .labelframe .centerarea .quantity{
            position:absolute;
            top:0;
            left:80%;
            right:0;
            bottom:50%;
            text-align: right;
            padding-right:1%;
        }
        .labelframe .centerarea .quantity .value{
            font-weight: 800;       
        }


        .labelframe .centerarea .itemid{
            position:absolute;
            top:50%;
            left:0%;
            right:58%;
            bottom:0;
            padding-left:1%;

        }

        .labelframe .centerarea .itemid .value{
            position:absolute;
            top:0;
            left:44%;   
            font-weight: 800;
            font-size: 14;

        }


        .labelframe .centerarea .routename{
            position:absolute;
            top:50%;
            left:43%;
            bottom:0;
            right:0;
            text-align: left;       
            padding-right:1%;
            padding-left:1%;
        }

        .labelframe .centerarea .routename .value{
            position:absolute;
            top:0;
            left:29%;   
            font-weight: 800;
            text-align: left;
        }


        .labelframe .itemarea {
            position:relative;
            height:45%;
            width:100%;
            border: 1px solid;
        }

        .labelframe .itemarea .itemdescription{
            position:absolute;
            padding-left:1%;
            padding-top:1%;
            padding-right:1%;
            padding-bottom:1%;
            left:0;
            top:0;
            bottom:0;
            right:0;
            font-size: large;

        }

        .labelframe .itemarea .fccompanyname{
            position:absolute;
            right:0;
            bottom:0;
            left:80%;
            height:40%;
            border: 1px solid;
            font-weight:700;
            text-align: center;
            font-style:italic;
            background-color: lightgray;
            z-index: 10;
            line-height: 1.2;
            
            
        }       

        .text-highlight {   
            font-weight: 800;
        }

        .normal-bold {
            font-weight: 800;
            font-size: 14;
        }
        .large-bold{
            font-weight: 800;
        }
    </style>
</head>
<body>

<div class="labelframe">
    <div class="headerarea">

        <div class="shipto">
            <p>Ship To:</p> 
            <div class="value">
                <p>293 Brattleboro Food Co-op : Deli (Joe Smith) waoijefwoain weoinfoaw e;oifnaw eo;ifn awoeinf woienf woie f weoifnw 
                </p>
            </div>
        </div>


        <div class="itemposition">
            <p># 83 of 84</p>
        </div>
    </div>

    <div class="centerarea">
        <div class="shipdate">
            <p>Ship Date:</p> <div class="value"><p>Fri 02-02-23</p></div>
        </div>
        <div class="quantity">
            <p>Qty:</p> <span class="normal-bold"><p>1</p></span>
        </div>
        <div class="orderid">
            <p>Order ID:</p> <div class="value"><p>SO182</p></div>
        </div>
        <div class="itemid">
            <p>Item:</p> <div class="value"><p>ATG001</p></div>
        </div>
        <div class="routename">
            <p>Route:</p> <div class="value"><p>Wed Monadnock Main</p></div>
        </div>
    </div>
    
    
    <div class="itemarea">
        <div class="itemdescription">
            <div class="text-highlight"><p>Against the Grain / Frozen Pizza, Pesto 10" / Case, 10 each extra extra extra extra extra extra extra extra extra extra extra extra extra </p>  </div>
        </div>
        <div class="fccompanyname">
            <p>Food Connects</p>
        </div>
    </div>

</div>
Aaaand finally, here is Advanced PDF's resulting preview using the above code. Clearly not what I'm going for:
pdftemplate.nl.pdf
Ironically, while many forum threads I've seen (and my own experience, too) indicate that Advanced PDF has problems handling basic <div> formatting in CSS, the official Netsuite documentation on Advanced PDF explicitly states:
Format tables using CSS. The 
<table>
method of formatting tables is obsolete and prone to user error.
https://docs.oracle.com/en/cloud/saas/netsuite/ns-online-help/section_158204583926.html
Update: I finally figured it out. I ended up downloading BFO Report Generator as a standalone package and then generating my PDF from xml directly through the package. The standalone BFO seems much, much stricter about syntax than the NS implementation. It gave me a bunch of syntax errors. After fixing those, I spent a couple hours reconfiguring the <div> positioning to conform to BFO's somewhat quirky interpretations of <div> positions, text alignment, etc. I did all my editing in VSCode, running BFO each time via command line and viewing the resulting PDF (repeat, repeat, repeat...). Once I got a good result that way, I pasted the code over into NS Advanced PDF and -- it works beautifully. I learned that with some genres of syntax errors in the xml, NS Advanced PDF won't fail but will instead default to essentially displaying whatever text it can find, unformatted. Also, anyone who says that <div>-based layout isn't viable in Advanced PDF is wrong. Still some polishing to do, but here's the new version from Advanced PDF. I'm using <div>-only layout -- no tables at all.
d
thanks for posting your findings 👍 I'll definitely consider developing the template this way if I run into similar issues
Open in Slack
PreviousNext
Powered by