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!
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.
Code Page Submit Button Redirects to Webpage with Record ID
So I have a code page that is client facing so when the user hit submits (the submit button) I would like them to be directed to another webpage (code page) that in the URL holds the newly created record id. Below is some of the code: The xxxx are placeholders </table><input type=hidden name=rdr value='https://xxxxxxxx.quickbase.com/db/xxxxxx?a=dbpage&pageID=2'> <input type=submit value=Submit> ideally the value should be: "https://xxxxxxxxxxxxx.quickbase.com/db/xxxxxxxx?a=dbpage&pageID=2" + "&rid=" + rid Here is the java code: $.ajax({url: "xxxxxxxxxxx?act=API_AddRecord", type: 'POST', data: req1, contentType: "text/xml", dataType: "xml", processData: false, success: function(data, status, xhr) { var _rid = $(data).find('rid'); var rid = _rid[0].innerHTML; var customRedirectURL = "https://xxxxxxxxxxxxxx.com/db/xxxxxxxxxxxxx?a=dbpage&pageID=2" + "&rid=" + rid; window.location.href = customRedirectURL; ------------------------------ Lija Harris ------------------------------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 ------------------------------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 ------------------------------Reoccuring Tasks - Still No Solution
Hello, Below is a YouTube of something I want to do so badly for one of my tables, and I cannot figure out how to configure it to my tables. The examples he provided are tailored to his table. Please help! I have reached out to QuickBase support as well, and they've been trying to do something for over a month, it is something I need sooner than later, and this is exactly the way I want it, I just can't read the code well enough. SOS? https://www.youtube.com/watch?v=OtE_j7kPJK0 Update* I still haven't received any kind of help. SOS? ------------------------------ Savi Newman ------------------------------
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) ------------------------------Reoccuring Tasks
Hello, Below is a YouTube of something I want to do so badly for one of my tables, and I cannot figure out how to configure it to my tables. The examples he provided are tailored to his table. Please help! I have reached out to QuickBase support as well, and they've been trying to do something for over a month, it is something I need sooner than later, and this is exactly the way I want it, I just can't read the code well enough. SOS? https://www.youtube.com/watch?v=OtE_j7kPJK0 ------------------------------ Newman, Savi ------------------------------
