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. ?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 - 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>Confirm Popup and if "OK"" execute API
I am looking to create a Pop-Up that requests a confirmation before an action is taken. I created a button that toggles a box to initiate a notification send out to our Candidates (code below). This works great. var number newToggleValue = If([test_box]=true,0,1); var text urlOne = URLRoot() & "db/" & Dbid() & "?act=API_EditRecord&rid=" & [Record ID#] & "&_fid_28=" & $newToggleValue & "&apptoken=XXXXXXX"; var text urlTwo = URLRoot() & "db/" & Dbid() & "?a=dr&rid=" & [Record ID#]; $urlOne & "&rdr=" & URLEncode($URLTWO) _____________________________ But I would like to have the button request confirmation that the user wanted to press the button. So we don't send out emails accidentally. Something like: If button is pressed, display "Are you sure you want to send notification?" with options "Send" and "Cancel". If Send, $urlOne & "&rdr=" & URLEncode($URLTWO) If Cancel, do nothing and close popup. All resources I have found on this discuss using Javascript in a URL Formula Field back in 2019, and I know QuickBase does not take Javascript atm, whether it did in the past I do not know. Any thoughts on how to accomplish this now? ------------------------------ Devin Jackson Director of Operations MedMatch ------------------------------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) ------------------------------Update to Code Page Example Folder: All Videos Included
Hi everyone! I wanted to give you an update from the Code Pages Qrew Meetup: All 4 videos of code page examples from our speakers are now included in the Code pages folder. Here's a quick recap of what they covered in the meeting and here's the folder to watch the videos: Code Page Example Showcase by Elvis Agyemang: Elvis showed off a personalized homepage and a world clock, both built in minutes using ChatGPT—proof you can spin up cool tools fast. Tips: Use AI like ChatGPT to draft code page widgets or dashboards when you’re short on time. Process Messaging & Pipelines by Eric Mohlman: Eric demoed a code page that gives live progress updates for pipeline tasks—no more guessing if your process is done. Tips: Use webhooks to trigger progress bars and auto-redirects for a smoother user experience. Pass record IDs in the URL to keep your code pages flexible and reusable across different workflows. File Upload Controls & Multi-Table Assignments by Simon Herbst: Simon walked through file upload controls that check file type and size, with instant feedback using Bootstrap and Vue.js. Tips: Make your file upload page portable by passing table and field info in the URL—one page, many uses. Use real-time validation for file size and type to give users immediate, clear feedback (and avoid frustration). “Quicksheets” Code Page by Andrew Carbejal-Everts: Andrew recorded a short video on how to use code pages to export data to Excel to email different reports in a single file. Interested in reviewing their code page examples and using it for your use case? Here’s a link to a folder that has Code Page examples from Elvis, Eric, Andrew, and Simon. All videos included. Please let us know if you have any questions and we'll be sure to have experts review and respond. Thank you!
