javascript code page not working
Hello, I was following a tutorial to capture a quickbase record as html, then save it as a pdf and place that pdf in an attachment field within the record itself: (https://community.quickbase.com/co...
Forum Discussion
Hey Jeff,
Thank you for getting back to me. Yes, it's actually the same code that is on the linked discussion. It appears you actually got it all to work as well!
Here is the Javascript:
------------------------------
Shane Miller
------------------------------
Thank you for getting back to me. Yes, it's actually the same code that is on the linked discussion. It appears you actually got it all to work as well!
Here is the Javascript:
let urlParams = new URLSearchParams(window.location.search);
let dbid = urlParams.get("myDbid");
let recId = urlParams.get('recId');
let myForm = urlParams.get('myFormId');
let usertoken = urlParams.get('usertoken');
let apptoken = urlParams.get('apptoken');
let root = location.protocol + '//' + location.host;
let myURL = `${root}/db/${dbid}?a=API_GetRecordAsHTML&rid=${recId}&dfid=${myForm}&apptoken=${apptoken}`;
let myHostName = "EnterHostName.quickbase.com";
const getURL = () => {
$.post(myURL, {}, function (response) {
$("#dbPagePayload").html(response);
}).then(getDom);
};
const getDom = () => {
let myDoc = document.getElementById("dbFormContainer");
console.log(myDoc);
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf().from(myDoc).set(opt).outputPdf('dataurlstring').then(async res => {
var base64result = res.split(',')[1];
var headers = {
'QB-Realm-Hostname': myHostName,
'User-Agent': 'File_Upload',
'Authorization': `QB-USER-TOKEN ${usertoken}`,
'Content-Type': 'application/json'
}
// 59 is my attachment field. Replace it with yours.
body = { "to": dbid, "data": [{"3": {"value": recId}, "59": { "value": { "fileName": "FormPDF.pdf", "data": base64result }} }], "fieldsToReturn": [ 3, 59 ] }
fetch('https://api.quickbase.com/v1/records',
{
method: 'POST',
headers: headers,
body: JSON.stringify(body)
})
.then(async res => {
if (res.ok) {
return res.json().then(res => {
console.log(res)
window.close()
});
}
return res.json().then(resBody => Promise.reject({status: res.status, ...resBody}));
})
.catch(err => console.log(err))
});
};
getURL();The only two things that were changed on this code was my host name for the variable $myHostName and the attachment field ID. Everything else was left the same
------------------------------
Shane Miller
------------------------------
Would you like me to include the HTML code page, as well as the formula text field on the form?
------------------------------
Shane Miller
------------------------------
------------------------------
Shane Miller
------------------------------
What do you have for the script src in the html part?
Here's my entire code page:<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.js"></script> </head> <body> <div id="dbPagePayload"></div> </body> <script lang="text/javascript"> let urlParams = new URLSearchParams(window.location.search); let dbid = urlParams.get("myDbid"); let recId = urlParams.get('recId'); let myForm = urlParams.get('myFormId'); let usertoken = urlParams.get('usertoken'); let apptoken = urlParams.get('apptoken'); let newfilename = urlParams.get('generatedfilename'); let root = location.protocol + '//' + location.host; let myURL = `${root}/db/${dbid}?=API_GetRecordAsHTML&dfid=${myForm}&rid=${recId}&apptoken=${apptoken}`; let myHostName = "myrealm.quickbase.com"; const getURL = () => { $.post(myURL, {}, function (response) { $("#dbPagePayload").html(response); }).then(getDom); }; const getDom = () => { let myDoc = document.getElementById("dbFormContainer"); console.log(myDoc); var opt = { margin: 1, filename: 'myfile.pdf', image: { type: 'jpg', quality: 0.98 }, html2canvas: { scale: 1}, jsPDF: {unit: 'in', format: 'letter', orientation: 'portrait' } }; html2pdf().set(opt).from(myDoc).outputPdf('dataurlstring').then(async res => { var base64result = res.split(',')[1]; var headers = { 'QB-Realm-Hostname': myHostName, 'User-Agent': 'File_Upload', 'Authorization': `QB-USER-TOKEN ${usertoken}`, 'Content-Type': 'application/json' } // 237 is my attachment field. 3 is the record ID. body = { "to": dbid, "data": [{"3": {"value": recId}, "237": { "value": { "fileName": newfilename+".pdf", "data": base64result }} }], "fieldsToReturn": [ 3, 237 ] } fetch('https://api.quickbase.com/v1/records', { method: 'POST', headers: headers, body: JSON.stringify(body) }) .then(async res => { if (res.ok) { return res.json().then(res => { console.log(res) window.close() }); } return res.json().then(resBody => Promise.reject({status: res.status, ...resBody})); }) .catch(err => console.log(err)) }); }; getURL(); </script> </html>
------------------------------
Jeff Peterson
------------------------------Page Name: pdf.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>
</head>
<body>
<h1>Record as HTML</h1>
<p> A Quickbase table embedded in a page of HTML</p>
<div id="dbPagePayload"></div>
</body>
<script src="https://MyDomainHere.quickbase.com/db/MyAppIDHere?a=dbpage&pageID=4"></script>
</html>
// Kept my domain and my app id private for this discussion
// PageID=4 is the page ID for my javascript page
------------------------------
Shane Miller
------------------------------- attached is the rich text formula field:
------------------------------
Shane Miller
------------------------------
.png){kind=link}
.png){kind=link}