Quick Base Discussions

Expand all | Collapse all

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

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

    Posted 11-06-2018 23:49
    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>


  • 2.  RE: Button that will open a new window which is an HTML page

     
    Posted 11-07-2018 01:07
    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


  • 3.  RE: Button that will open a new window which is an HTML page

    Posted 11-07-2018 01:08
    Thank you!


  • 4.  RE: Button that will open a new window which is an HTML page

    Top
    Contributor
    Posted 11-07-2018 05:04