Automatically save a form page as PDF and insert into attachment field?

Qrew Cadet

Hey Tyler,

I messaged you yesterday and was able to clean it up this morning. This should work for clicking a button and having it save to the original record. I was thinking of working on an idea to loop through and have it save all the records in a table, but haven't gotten to it yet.

Here is the button, or rich text in my case, formula needed:

var text usertoken = "enter_user_token_here";

// Enter the form ID to save in myFormID
var text myReq = "&myDbid=" & Dbid() & "&recId=" & [Record ID#] & "&myFormId=10&usertoken=" & $usertoken;

var text apptoken = "app_token_here";

var text myURL = URLRoot() & "db/" & Dbid() & "?a=API_GetRecordAsHTML&rid=" & [Record ID#] & "dfid=10&apptoken=" & $apptoken;

var text url = URLRoot() & "db/" & AppID() & "?a=dbpage&pageID=10" & "&apptoken=" & $apptoken & $myReq;




"<a class='OpenAsPopup' href=" & $url  & ">Print as HTML</a>"

Here is the html page:

<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://yourRealm.quickbase.com/db/yourAppID?a=dbpage&pageID=YourJSPageID"></script> 
</html>

Here is the javascript page:

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();

I can admit it is not the prettiest, nor the most optimized solution. But, it works and should get the job done. I will probably work on this in my free time later this week/weekend to have it loop through each record, so I will update this thread when/if I finish.

------------------------------
Sean Connaughton
------------------------------

Forum Discussion

Automatically save a form page as PDF and insert into attachment field?