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

  • 0
  • 1
  • Question
  • Updated 6 months ago
  • Answered
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?


<html>  <head>
    <style>
      .to-and-from-box {
        width: 384px;
        height: 60px;
        border: 2px solid black;
        border-bottom: 0px;
      }
      .to-and-from-box > p:nth-child(1){
        margin: 10px 0px 0px 10px;
        padding: 0px;
      }
      .to-and-from-box > p:nth-child(2){
        margin: 0px 0px 0px 10px;
        padding: 0px;
      }
      .barcode-box {
        width: 384px;
        height: 90px;
        border: 2px solid black;
        border-bottom: 0px;
      }
      
      .barcode-box > p {
        text-align: center;
        font-weight: bold;
      }
      .qty-box {
        width: 384px;
        height: 60px;
        margin: 0px;
        padding: 0px;
        border: 2px solid black;
        border-bottom: 0px;
      }
      #black {
        background-color: black;
        width: 100px;
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      #qty-font {
        font-size: 46px;
        color: white;
        margin: 0px;
        padding: 0px;
      }
      .weight-box {
        width: 384px;
        height: 60px;
        border: 2px solid black;
        border-bottom: 0px;
      }
      .weight-box > p {
        font-size: 22px;
        text-align: center;
      }
      .carton-box {
        width: 384px;
        height: 80px;
        border: 2px solid black;
      }
      .carton-box #black {
        width: 120px;
      }
      .carton-box #qty-font {
        text-align: center;
        padding-top: 30px;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    
   <div class="to-and-from-box">
     <p>TO: <span id="to-text">MACO COMPANIES INC</span></p>
     <p>PO # (INSERT FORM DATA HERE)</p>
   </div>
   <div class="to-and-from-box">
     <p>FROM: <span id="to-text">YBJ</span></p>
     <p>Vendor Part # (INSERT FORM DATA HERE)</p>
   </div>
   <div class="barcode-box">
     <p>ITEM # (INSERT FORM DATA HERE)</p>
   </div>
   <div class="qty-box">
     <div id="black">
       <p id="qty-font">QTY</p>
     </div>
   </div>
    <div class="weight-box">
      <p>Net WT. ____ GR. WT. ______ (KG)</p>
    </div>
    <div class="carton-box">
      <div id="black">
       <p id="qty-font">Carton #</p>
     </div>
    </div>

  </body>
</html>
Photo of John Rogers

John Rogers

  • 420 Points 250 badge 2x thumb

Posted 6 months ago

  • 0
  • 1
Photo of Rob White IV

Rob White IV

  • 1,070 Points 1k badge 2x thumb
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
Photo of John Rogers

John Rogers

  • 420 Points 250 badge 2x thumb
Thank you!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb