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

3 Replies

Related Content

New Form - Show Create Record button

Add Record -POPUP Window size

Button: save the new record and edit the new record

Specific permissions needed to run a copy master and detail button?

Pop Up windows in new forms

Recent Discussions

Save & Redirect in a Formula URL Using API_GenAddRecordForm

Many to Many too Many...

Selecting which fields to display from Formula URL searches

Bulk create child records from selection list

(Pipelines) Get Users in Role / Process XML from HTTP API