Button that will open a new window which is an HTML page

Question

I have hand coded a shipping label in HTML. I want to put a button on a form, that will pull data from that form and place it into this shipping label, and then open in a new window with the data on it ready to print. I have provided the code I used for the shipping label. How would I make a button that could populate this HTML code with data from the form, and then display it in a new window??? Is this possible?&lt;html&gt;&nbsp; &lt;head&gt;&nbsp; &nbsp; &lt;style&gt;&nbsp; &nbsp; &nbsp; .to-and-from-box {&nbsp; &nbsp; &nbsp; &nbsp; width: 384px;&nbsp; &nbsp; &nbsp; &nbsp; height: 60px;&nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid black;&nbsp; &nbsp; &nbsp; &nbsp; border-bottom: 0px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .to-and-from-box &gt; p:nth-child(1){&nbsp; &nbsp; &nbsp; &nbsp; margin: 10px 0px 0px 10px;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .to-and-from-box &gt; p:nth-child(2){&nbsp; &nbsp; &nbsp; &nbsp; margin: 0px 0px 0px 10px;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .barcode-box {&nbsp; &nbsp; &nbsp; &nbsp; width: 384px;&nbsp; &nbsp; &nbsp; &nbsp; height: 90px;&nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid black;&nbsp; &nbsp; &nbsp; &nbsp; border-bottom: 0px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; .barcode-box &gt; p {&nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .qty-box {&nbsp; &nbsp; &nbsp; &nbsp; width: 384px;&nbsp; &nbsp; &nbsp; &nbsp; height: 60px;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid black;&nbsp; &nbsp; &nbsp; &nbsp; border-bottom: 0px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; #black {&nbsp; &nbsp; &nbsp; &nbsp; background-color: black;&nbsp; &nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; #qty-font {&nbsp; &nbsp; &nbsp; &nbsp; font-size: 46px;&nbsp; &nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .weight-box {&nbsp; &nbsp; &nbsp; &nbsp; width: 384px;&nbsp; &nbsp; &nbsp; &nbsp; height: 60px;&nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid black;&nbsp; &nbsp; &nbsp; &nbsp; border-bottom: 0px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .weight-box &gt; p {&nbsp; &nbsp; &nbsp; &nbsp; font-size: 22px;&nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .carton-box {&nbsp; &nbsp; &nbsp; &nbsp; width: 384px;&nbsp; &nbsp; &nbsp; &nbsp; height: 80px;&nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid black;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .carton-box #black {&nbsp; &nbsp; &nbsp; &nbsp; width: 120px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .carton-box #qty-font {&nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; padding-top: 30px;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 25px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &lt;/style&gt;&nbsp; &lt;/head&gt;&nbsp; &lt;body&gt;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="to-and-from-box"&gt;&nbsp; &nbsp; &nbsp;&lt;p&gt;TO: &lt;span id="to-text"&gt;MACO COMPANIES INC&lt;/span&gt;&lt;/p&gt;&nbsp; &nbsp; &nbsp;&lt;p&gt;PO # (INSERT FORM DATA HERE)&lt;/p&gt;&nbsp; &nbsp;&lt;/div&gt;&nbsp; &nbsp;&lt;div class="to-and-from-box"&gt;&nbsp; &nbsp; &nbsp;&lt;p&gt;FROM: &lt;span id="to-text"&gt;YBJ&lt;/span&gt;&lt;/p&gt;&nbsp; &nbsp; &nbsp;&lt;p&gt;Vendor Part # (INSERT FORM DATA HERE)&lt;/p&gt;&nbsp; &nbsp;&lt;/div&gt;&nbsp; &nbsp;&lt;div class="barcode-box"&gt;&nbsp; &nbsp; &nbsp;&lt;p&gt;ITEM # (INSERT FORM DATA HERE)&lt;/p&gt;&nbsp; &nbsp;&lt;/div&gt;&nbsp; &nbsp;&lt;div class="qty-box"&gt;&nbsp; &nbsp; &nbsp;&lt;div id="black"&gt;&nbsp; &nbsp; &nbsp; &nbsp;&lt;p id="qty-font"&gt;QTY&lt;/p&gt;&nbsp; &nbsp; &nbsp;&lt;/div&gt;&nbsp; &nbsp;&lt;/div&gt;&nbsp; &nbsp; &lt;div class="weight-box"&gt;&nbsp; &nbsp; &nbsp; &lt;p&gt;Net WT. ____ GR. WT. ______ (KG)&lt;/p&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div class="carton-box"&gt;&nbsp; &nbsp; &nbsp; &lt;div id="black"&gt;&nbsp; &nbsp; &nbsp; &nbsp;&lt;p id="qty-font"&gt;Carton #&lt;/p&gt;&nbsp; &nbsp; &nbsp;&lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &lt;/body&gt;&lt;/html&gt;

robiv · Answer

You can do this with a code page.

Short version is:

1. Create a code page called shipping-label.html (or similar) and paste in your code.
2. Create a formula URL field in your table that opens that page (there is a setting to open the target in a new window/tab) and add the button to your form.
3. Use URL query parameters in the formula URL field or ajax on the code page to pull in record data from the form (Quickbase API_DoQuery) and replace the placeholder content in the html with jquery or similar.

I�m happy to elaborate if you have questions.

~Rob

johnrogers3 · Answer

Thank you!

_anomdiebolt_ · Answer

This is how I would do it:Packing Slip Template ~ List Allhttps://haversineconsulting.quickbase.com/db/bn5ydj38y?a=tdPastie Databasehttps://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&amp;rid=687

Forum Discussion

Button that will open a new window which is an HTML page

Related Content

API Button Help

Delete Formula Button Error

Formula Url Buttons

Previous and Next Record Buttons

+New Button