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 ------------------------------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. ------------------------------
