javascript code page not working

Qrew Cadet

2 years ago

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:

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

ShaneMiller1

Qrew Cadet

2 years ago

Would you like me to include the HTML code page, as well as the formula text field on the form?

------------------------------
Shane Miller
------------------------------

JeffPeterson1

Qrew Captain

2 years ago

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

ShaneMiller1
Qrew Cadet
2 years ago
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
------------------------------

Forum Discussion

javascript code page not working