Getting Started

Expand all | Collapse all

Pass value from code page into field

  • 1.  Pass value from code page into field

    Posted 01-16-2020 15:34
    I have a code page made of HTML/Javascript saved as a .html. I have a field button that loads the code. All that is working. What I need help with is getting the final value and placing it into another field (numeric).

    I am probably missing something easy but can't figure it out. The code is below.

    Code Page: saved as .html
    <form align=center>
      <input type="button" onclick="decrementValueTen()" value="-10" />
      <input type="button" onclick="decrementValueFive()" value="-5" />
      <input type="button" onclick="decrementValueOne()" value="-1" />
      <input type="text" id="number" value="0"/>
      <input type="button" onclick="incrementValueOne()" value="+1" />
      <input type="button" onclick="incrementValueFive()" value="+5" />
      <input type="button" onclick="incrementValueTen()" value="+10" />
    <br />
      <input type="button" onclick="window.close()" value="Submit" />
    </form>
    
    <script>
      var value = parseInt(document.getElementById('number').value, 10);
    
      function incrementValueOne() {
        value++;
        document.getElementById('number').value = value;
      }
    
      function incrementValueFive() {
        value = value + 5;
        document.getElementById('number').value = value;
      }
    
      function incrementValueTen() {
        value = value + 10;
        document.getElementById('number').value = value;
      }
    
      function decrementValueOne() {
        if (value > 1) {
          value = value - 1;
        } else {
          value = 0;
        }
        document.getElementById('number').value = value;
      }
    
      function decrementValueFive() {
        if (value > 5) {
          value = value - 5;
        } else {
          value = 0;
        }
        document.getElementById('number').value = value;
      }
    
      function decrementValueTen() {
        if (value > 10) {
          value = value - 10;
        } else {
          value = 0;
        }
        document.getElementById('number').value = value;
      }
    </script>


    Field Button

    "https://pies.quickbase.com/db/bnhwf73ut?a=dbpage&pageID=11"


  • 2.  RE: Pass value from code page into field

    Posted 01-20-2020 10:47

    Depending what API call you are trying to make you should be able to do a URL call back or you might have to load a library to do this on your code page. It looks like you just need a new function for building the URL and then submitting it. Instead of having your last Submit button do window.close() you could have it call a function that takes the final value of "number" and posts it to a record. You should be able to do this with API_EditRecord. Which does have a URL Alternative shown so it will work here without a library.

    You will need a record ID(rid) as well or you will never know where to send this data. To do that what I usually do is have my formula URL button that takes me to the code page also send along the rid. Instead of your button being "https://pies.quickbase.com/db/bnhwf73ut?a=dbpage&pageID=11" you could do "https://pies.quickbase.com/db/bnhwf73ut?a=dbpage&pageID=11&recID=[Record ID#]" and that should send along the rid to your code page. What you then would do is use a function to parse the URL for "recID=" and grab that number. This will be the record you clicked the button from, and the one you want to update as well.

    I have used this library with success in the past. The browserified version they offer, I even hosted it in my own Quick Base table and loaded it from there. That library makes it easy but may be a little heavy handed unless you need it. quickbase.dev is a website that gives more info on using this library too.

    This recent post explains how you can set values of a record via a URL. You would have to do something similar on your code page, hopefully that helps. If not I can give a better explanation just let me know.




  • 3.  RE: Pass value from code page into field

    Posted 01-20-2020 11:57
    Thanks for the reply.
    I added the recID to the URL button and started on the code page function. What do you mean exactly by parse the URL for "recID="? is that something I am doing in my submit function? I copied some other code from a different javascript function we use and I'm trying to adapt it for this. Let me know if i'm close.
      function submitData(){
        var dbid = "dbid";
        var dbidTable = "dbidTable";
        var apptoken = "apptoken";
        $.ajaxSetup({data: {apptoken: apptoken}});
        var promise = $.get(dbidTable, {
          act: "API_EditRecord",
          rid: QBU_rid,
          _fid_8: number,
        window.close()
        }
      $.when(promise).then(function submitData(){
         $.get() & location.reload(true);
        });
      }​

    *note: the dbid, dbidtable, and apptoken have been changed to generic names as to not show the actual apptoken.



    ------------------------------
    Blake E
    ------------------------------



  • 4.  RE: Pass value from code page into field

    Posted 01-20-2020 13:16
    There are a few different ways to parse a url but so as not to reinvent the wheel we can just take someones code and use it for this. If you want to play around with it I would look into window.location.href or others. You could then parse the URL however you wanted, but the below site has it done for you.

    This page has a function you can copy and when ran it will give you to value of whatever you search for. So if you did getQueryVariable("recID") on a URL like this "https://yourCompany.quickbase.com/db/tableID?a=er&r=yau&recID=12345" it would return 12345. Then you could store that number and use it in your next call to edit that record.

    I'm pretty exhausted today so I may miss something obvious here. Looking at your SubmitData function the only thing that really jumps out is I am not sure you can do window.close inside of there like that. You might look into the "success" or "complete" parameter for jquery ajax. There may be a better way though.




  • 5.  RE: Pass value from code page into field

    Posted 01-22-2020 18:28
    Thank you for helping. I finally got this working with your help.

    On the URL we added the Record ID field so it could be parsed. Once we had that we could use that to pass the information needed to the child table and related Record ID.
    As of right now I just have the formula URL button open up in a new tab and I have a bit of javascript in the code page that will close the window once everything has processed. I know there is a way to return to the edit record page of the parent but was having enough issues with it that I gave up and just pasted the close window code.

    You might also notice that I was experimenting with selecting an item from a drop-down and submitting that value to a field. That is fully working as well. 

    <form align=center>
      <select id="products" onchange="getProduct()" size="1">    
        <option>Product 1</option>
        <option>Product 2</option>
        <option>Product 3</option>
        <option>Product 4</option>
        <option>Product 5</option>
        <option>Product 6</option>
      </select>
      <br/> <br/> 
      <input type="button" onclick="decrementValueTen()" value="-10" />
      <input type="button" onclick="decrementValueFive()" value="-5" />
      <input type="button" onclick="decrementValueOne()" value="-1" />
      <input type="text" size="1" id="number" value="0" readonly />
      <input type="button" onclick="incrementValueOne()" value="+1" />
      <input type="button" onclick="incrementValueFive()" value="+5" />
      <input type="button" onclick="incrementValueTen()" value="+10" />
      <br /><br/>
      <input type="button" onclick="copyNumber()" value="Submit" />
    </form>
    
    <script>
      var rollerValue = parseInt(document.getElementById('number').value);
      var apptoken = "YourTokenGoesHere";
      var dbid = "AppIDHere";
      var dbidTable = "TableIDHere";
      var URLroot = "https://website.quickbase.com/db/";
      var productNumber;
      var productName;
    
      function copyNumber(){
        var recordID = getQueryVariable("recID");
        var URLONE = URLroot + dbidTable
        + "?act=API_addRecord"
        + "&_fid_12=" + recordID
        + "&_fid_6=" + productName
        + "&_fid_8=" + rollerValue + "&apptoken=" + apptoken;
    
        location.href = URLONE;
        window.open('','_parent',''); 
        window.close();
      }
    
      function getProduct() {
        productNumber = document.getElementById("products").selectedIndex;
        productName = document.getElementById("products").options[productNumber].text;
      }
    
      function getQueryVariable(variable){
           var query = window.location.search.substring(1);
           var vars = query.split("&");
           for (var i=0;i<vars.length;i++) {
                   var pair = vars[i].split("=");
                   if(pair[0] == variable){return pair[1];}
           }
           return(false);
      }
    
      function incrementValueOne() {
        rollerValue++;
        document.getElementById('number').value = rollerValue;
      }
    
      function incrementValueFive() {
        rollerValue = rollerValue + 5;
        document.getElementById('number').value = rollerValue;
      }
    
      function incrementValueTen() {
        rollerValue = rollerValue + 10;
        document.getElementById('number').value = rollerValue;
      }
    
      function decrementValueOne() {
        if (rollerValue > 1) {
          rollerValue = rollerValue - 1;
        } else {
          rollerValue = 0;
        }
        document.getElementById('number').value = rollerValue;
      }
    
      function decrementValueFive() {
        if (rollerValue > 5) {
          rollerValue = rollerValue - 5;
        } else {
          rollerValue = 0;
        }
        document.getElementById('number').value = rollerValue;
      }
    
      function decrementValueTen() {
        if (rollerValue > 10) {
          rollerValue = rollerValue - 10;
        } else {
          rollerValue = 0;
        }
        document.getElementById('number').value = rollerValue;
       }
    
    </script>


    ------------------------------
    Blake E
    ------------------------------