Quickbase Code page to query a table and display records
I have created a code page which should query a table and display certain records using API -GenResults table. I am going to embed this code page in forms. Based on value in each record(in field - test temp inventory query) the contents in the table changes. Below is the code page code <html> <head> <script src= ~test temp inventory query~ lang="text/javascript"> </script> <style> td.m { font-family:verdana; font-size:70%; } td.hd { font-family:verdana; font-size:70%; font-weight:bold; color:white;} </style> </head> <body> <h1>Example</h1> <table cellpadding=5 bgcolor=lightgreen> <tr> <td> <script lang="text/javascript"> qdbWrite(); </script> </td> </tr> </table> </body> </head> </html> The third line, value of src determines the query. ~test temp inventory query~ is the field where query is created as a formula text . The value in formula text looks something like this https://Domain.quickbase.com/db/iddbdbdbid?a=API_GenResultsTable&apptoken=tokn123 t=1&query={'29'.CT.'TYCU700'}OR{'29'.CT.'TYRD60'}OR{'29'.CT.'TYTG8580'}&clist=29.17.7.9.8.38.44.49&slist=17 But the contents are not getting pulled correctly. Which is best way to pass value in field to the QuickBase code page and display the link to code page as embedded in the same form. ?
Code Page - Refresh not working
I have a URL Formula button on a record form, whose purpose is to prompt user for text input, update a text field with that input, and change status of record to "Done". I used the "Prompt for Input and Refresh" example in the code pages samples: https://resources.quickbase.com/db/bq8mgh24g?a=dr&rid=10414 After clicking the button, the field value updates, but the rather than display the record refreshed, I get an error: 404 Error, Page Unrecognized. So the first part of fetch code is executing correctly, but it seems the redirect is what is failing. Any help would be appreciated! Here's my button code: var text urlToExecute = URLRoot() & "db/" & Dbid() & "?a=API_EditRecord&apptoken=MYAPPTOIKEN&rid=" & [Record ID#] & "&_fid_26="; URLRoot() & "db/" & AppID() & "?a=dbpage&pageid=5" // Open code page 5 & "&url=" & URLEncode($urlToExecute) // Pass the URL to execute Here's the script and form portion of my code page 5: <script> function run() { $('#form').hide(); $('#status').show(); const input = document.getElementById('input').value; let urlParams = new URLSearchParams(window.location.search); let url = urlParams.get('url') + encodeURIComponent(input); let redirect = urlParams.get('redirect'); let landing; if(redirect){ landing = redirect; }else{ landing = document.referrer; } fetch(url, { method: 'post', mode: 'no-cors', headers: { 'Content-type': 'text/plain' } }).then((response) => { rdr(landing); }) } function rdr(landing){ // Redirects to the specified landing page, if this page is the landing page as well, then redirect to the app home page if(landing && landing !== window.location.href) { window.location.href = landing; }else{ window.location.href = window.location.origin + window.location.pathname; } } </script> <div class="container" id="form"> <h2>Input Needed</h2> <form onSubmit="run();"> <div class="form-group"> <label for="input">Please provide some input</label> <input class="form-control" id="input" autofocus> </div> <a class="btn btn-primary" onclick="run()" role="button">Submit</a> <a class="btn" onclick="window.location.href = document.referrer;" role="button">Cancel</a> </form> </div> <div class="container" id="status" style="text-align:center" hidden> <h2>Making API Calls, will redirect once complete.</h2> <div class="loader" id="loader"></div></div> <br> </body> </html>
Automatically save a form page as PDF and insert into attachment field?
I've long wondered if there's a solution that's shareable where I could click a button and have a form page automatically saved in PDF format and inserted into an attachment field. I realize that there are QSPs that provide this service, but I'm more interested in knowing/understanding how to do this myself. My impression is that you would need to use JS to write the form to PDF and then encode to base64, and then you could use the base64 result to insert into API_UploadFile. My JS knowledge is minimal but I can cobble stuff together through StackExchange plus trial and error. I'm not worried about the API end of things - that seems pretty straight-forward. Has anyone tried this themselves that they'd be willing to share? I've looked on the forum before but it seems the answers always fall into, "Hire a QSP," or "Use IOL or some other technique that is now deprecated." Presumably I'd need to call the JS from a code page? Or would I need a local API call on my end to launch something? If it's possible to do everything in QB without having to host something myself, that's obviously the preferable and most portable method, but if that's 100% not possible, I have access to AWS. Big picture goal is the user clicks a button, button calls a script that runs through about 20-30 records in a table, uses a specific QB form page to generate a PDF for each record, PDF is uploaded into corresponding record attachment field. No templates or anything. Short of that, clicking the button once per record would also be acceptable, but it would be rad to grab the whole table in one go.
Displaying Formula - Text Field on a Code Page
I have a code page input form as a easy web intake interface for our clients. I was able with the form wizard to grab all the input fields (example code is below). However, I was wondering if it was possible to add a formula field to the code page? Specifically a formula - text field that is just static text but needs to be on the code page. Is it possible to put a formula field that is static on a code page (html/javascript): <h2 span style="color: white; font-family: Sans-serif; text-align: center; background-color: #358281;">Customer Data Intake Form</h2><form name=qdbform method=POST onsubmit='return validateForm(this)' encType='multipart/form-data' action=https://blahblah.quickbase.com/db/XXXXXXXXx?act=API_AddRecord&apptoken=xxxxxxxxxxxxxxxxxxxxxxx> <input type=hidden name=fform value=1> <table class="center"> <table> <tr><td style="font-family: Sans-serif;" class=m>Contractor Business Name:</td> <td class=m><input type=text size=40 name=_fid_6 ></td></tr> <tr><td style="font-family: Sans-serif;" class=m>End User Customer First Name:</td> <td class=m><input type=text size=40 name=_fid_7 ></td></tr> ----------Where the formula - text field will go--------------------- ------------------------------ Lija Harris ------------------------------
Code Page and URL Formula Field Button Issue
Hello I am trying to get a url formula button, From Magic Buttons, to work to where it creates a child record and opens it in edit mode. I have created a Code Page and URL Formula button field on the desired table. For some reason it keeps coming up with a error every time I try it. Can yall help me figure out whats wrong? Here is the code for the Code Page <!DOCTYPE HTML> <html> <body> <script> const urlParams = new URLSearchParams(window.location.search); const rid = urlParams.get('rid'); const apptoken = urlParams.get('apptoken'); const targetdbid = urlParams.get('targetdbid'); const referencefield = urlParams.get('referencefield'); const Patient Full Name = urlParams.get('Patient Full Name'); const Patient Email = urlParams.get('Patient Email'); const Patient DOB = urlParams.get('Patient DOB'); const Patient Phone = urlParams.get('Patient Phone'); const Physician Full Name = urlParams.get('Physician Full Name'); const Physician Email = urlParams.get('Physician Email'); const Physician NPI = urlParams.get('Physician NPI'); const Document Type = urlParams.get('Document Type'); const xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200) { const response = this.responseXML; const redirectUrl = "https://" + window.location.hostname + "/db/" + targetdbid + "?a=er&rid=" + response.getElementsByTagName("rid")[0].textContent + "&rl=bbv"; location.href = redirectUrl; } }; xhttp.open("GET", "https://" + window.location.hostname + "/db/" + targetdbid + "?a=API_AddRecord&_fid_" + referencefield + "=" + rid + "&apptoken=" + apptoken + "&_fid_6=" + Patient Full Name + "&_fid_8=" + Patient Email + "&_fid_52=" + Patient DOB + "&_fid_10=" + Patient Phone + "&_fid_7=" + Physician Full Name + "&_fid_9=" + Physician Email + "&_fid_51=" + Physician NPI + "&_fid_46=" + Document Type, true); xhttp.send(); </script> </body> </html> <!-- When you are on a record and you press the button that comes to this page. The button passes the apptoken, rid and target dbid through the button to the page. This code adds a child record to the targetdbid table and links it back to the parent record. It then redirects back to that targetdbid table on the record that was just created but in er or edit mode so you can work on the record already knowing the Record ID#. --> Here is the Code for the Button Field URLRoot()&"db/"&AppID()&"?a=dbpage&pagename=createchildsaveandedit.html&targetdbid="&[_DBID_DOCUSIGN_DOCS_JT]& "&referencefield=28"& "&rid="&[Record ID#]& "&Patient Full Name="&[Patient - Full Name]& "&Patient Email="&[Patient - Email]& "&Patient DOB="&[Patient - DOB]& "&Patient Phone="&[Patient - Phone]& "&Physician Full Name="&[Patient - Doctor - Name]& "&Physician Email="&[Patient - Doctor - Email]& "&Physician NPI="&[Patient - Doctor - NPI]& "&apptoken=b8gyswcbukjqz3duspknhrw6x4f" // This includes your app's application token and your destination table DBID. // When you press this button, it passes your targetdbid, referencefield, rid, school, category and apptoken to the code page and the code page first adds a child record with its school and category, captures the id of the record and then places you back on that created record in edit mode. The net affect is it feels like you are adding a record but you already have and now you have the record id. ------------------------------ Kyle Richardson ------------------------------Save and Print a Form
Hello, I am making a button that will go on a form that will save the data then bring up the print menu. The issue I am running into is that if I add a button that simply says print this record it doesn't work because it is a form and hasn't been saved into a record yet. So I need a button that will save then print. The next thing I tried was to save by redirecting then trying to print but I cannot get that to work because the URL code calls the active RID which is gone once the page has redirected. I am not completely confident in my button/url coding abilities so I could be fundamentally wrong about what is going on but I would appreciate any help to point me in the right direction. My code for a formula URL that tries to just print the form: URLRoot() & "db/" & Dbid() & "?a=printr&dfid=11&rid=" & [Record ID#] //I don't think the RID exists until the form is saved Then my code to redirect the user to save the form to a record: //formatting visuals of button var text bgcolor = "#34A853"; var text txtcolor = "white"; var text style = "style=\"text-decoration: none; background:" & $bgcolor & "; border-radius: 5px; padding: 8px 20px; color: " & $txtcolor & "; display: inline-block; font: normal 700 24px/1 \"Calibri\", sans-serif; text-align: center; text-shadow: none;"; //Inner workings of button var text url = URLRoot() & "db/" & [_DBID_Project] & "?a=printr&dfid=11&rid=" &[Record ID#] & "&apptoken=uwi4fb9cj4szcdzjnfxd5xz3te" & "&rdr=" & URLEncode("https://divisionsinc.quickbase.com/db/brjciz2i6?a=td"); "<a " & $style & " href=\"" & $url & "\">Save and Print</a>" I couldn't get either of these to work so any help is appreciated. Thanks in Advance! ------------------------------ Hank Halverson ------------------------------
Redirect code page that show the new record
Hello. I have a button to add a new record and then redirect to a code page. I am trying to show the new record on the code page return(Page id 179) . much appreciated the support on my code page that I am not sure what I'm missing to show the record after redirect. url field var text urlToExecute = URLRoot() & "db/" & Dbid() & "?a=API_AddRecord" & "&_fid_11=" // Field to Popuplate with the user prompted input ; var text redirect = URLRoot() & "db/" & AppID() & "?a=dbpage&pageid=179" // Open code page 4 & "&url="& URLEncode($urlToExecute) // Pass in the URL to execute PAGE ID 179 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>School Meals Track System</title> <script src= 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <link rel='stylesheet' href= 'https://www.w3schools.com/w3css/4/w3.css'> <link rel='stylesheet' href= 'https://fonts.googleapis.com/css?family=Raleway'> <link rel='stylesheet' href= 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <style> body,h1,h2,h3,h4,h5,h6 {font-family: 'Raleway', sans-serif} body, html { height: 100%; line-height: 1.8; } /* Full height image header */ .bgimg-1 { background-position: center; background-size: cover; background-image: url(' https://nextsteppcs.quickbase.com/up/bpc9zk5b6/g/rd3g/eh/va/blackboard-books-apple-school-nutrition.jpg'); min-height: 100%; </style> </head> <body> <p></p> <h1 class='bgimg-1 w3-display-container w3-grayscale-min' id='home'> <div class='w3-display-left w3-text-white' style='padding:48px'> <h1>School Meals Track System</h1> <span class='w3-jumbo w3-hide-small'>Hello TNS Student <span id='myDIV'></span>!</span><br><br> </style> </head> <style> .loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; display: block; margin-left: auto; margin-right: auto; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'> </script> <script> function run() { $('#form').hide(); $('#status').show(); const input = document.getElementById('input').value; let urlParams = new URLSearchParams(window.location.search); let url = urlParams.get('url') + encodeURIComponent(input); let redirect = urlParams.get('redirect'); let landing; console.log("input" + input); console.log("redirect" + redirect);; console.log("document.referrer" + document.referrer); console.log("window.location.href " + window.location.href ) console.log("URL" + url) if(redirect){ landing = redirect; }else{ landing = document.referrer; } fetch(url, { method: 'post', mode: 'no-cors', headers: { 'Content-type': 'text/plain' }, }) .then((response) => { console.log("RESPONSESTATUS " + response.status); console.log("RESPONSE STATUSTEXT" + response.text()); console.log("RESPONSEredirected " +response.redirected); console.log("RESPONSEheaders" +response.headers); console.log("RESPONSEbody" + response.body); console.log("landing " + landing); rdr(); }).catch(err => { console.log('Request Failed', err); rdrfail(); }); } function xmlrun(){ const input = document.getElementById('input').value; let urlParams = new URLSearchParams(window.location.search); let url = urlParams.get('url') + encodeURIComponent(input); console.log(url) let xhr = new XMLHttpRequest(); xhr.open('POST', url); xhr.setRequestHeader('Content-Type', 'text/plain' ); xhr.send(); xhr.onload = function() { if (xhr.status != 200) { // analyze HTTP status of the response alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found } else { // show the result console.log('Done, got ${xhr.response.length} bytes'); // response is the server response } }; xhr.onprogress = function(event) { if (event.lengthComputable) { //alert(`Received ${event.loaded} of ${event.total} bytes`); console.log('Received ${event.loaded} of ${event.total} bytes'); } else { //alert(`Received ${event.loaded} bytes`); // no Content-Length console.log('Received ${event.loaded} of ${event.total} bytes'); }; rdr() }; xhr.onerror = function() { alert("Request failed"); }; } function rdr(){ console.log("Success redirecting to " + window.location.href ); window.location.href = window.location.href ; } function rdrfail(){ console.log("Fail redirecting to " + window.location.href ); window.location.href = window.location.href ; } function status(res) { if (!res.ok) { throw new Error(res.statusText); } return res; } </script> <div class="container" id="form"> <h2></h2> <form onSubmit="xmlrun();return false"> <div class="form-group"> <label for="input">Please scan the student id</label> <input class="form-control" id="input" autofocus> </div> </form> </div> <div class="container" id="status" style="text-align:center" hidden> <h2>Making API Calls, will redirect once complete.</h2> <div class="loader" id="loader"></div></div> <br> </body> </html> <!-- <form onSubmit="run();"> ------------------------------ Data System Analyst (Administrator) ------------------------------Get Next Record ID API for a table and display on a Code Page
I was wondering if it is possible to use the API_GetSchema to retrieve the next record id from a specific table - query that and display the result on a code page? Basically I have a code page in HTML and Java that is a customer intake form. What i would like to give the customer is a unique id or code to reference once they have submitted their form. I would like to use the record ID as this code but having trouble putting that information on the code page. ------------------------------ Lija Harris ------------------------------
Code Page for Google Chart
Hello, I am trying to build a code page that would allow me to display some plots from Google Charts in which I feed some data from Quickbase. The idea is to then display the page in a form as iframe. I am really a beginner for what concerns code pages, so I would need some help. The following is one of the html pages where I would want to plug in my data. <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> </body> </html> I thought I could change the array passed in the data variable as follow, but it does not seem to work. Any thought? <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable(); var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'bottom' } }; $.getScript("https://xxxxxx.quickbase.com/db/xxxxxx?a=API_GenResultsTable&apptoken=xxxxxx&query={20.EX.38}&clist=17&jsa=1",function(){ console.log(qdb_data); }); data.addRows(qdb_data); var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> </body> </html> ------------------------------ Eleonora R. ------------------------------Inserting a table report in Custom HTML Code Page
I have created a form page visible for EOTI of type rich text and used custom HTML tags. Iwish to insert a table report on the page. Kindly guide as to how that could be done. My page : Table i wish to display ------------------------------ Rasika Bhosle ------------------------------
