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

Qrew Cadet

3 years ago

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

TylerBrezler

Qrew Cadet

3 years ago

Very cool! Thanks for working on this, Sean. I'm going to try this out as soon as I get the chance.

SeanConnaughto1

Qrew Cadet

3 years ago

Like I said before, this isn't the prettiest, but it worked for me! This should loop through and save each form within the range you enter in the popup.

Formula Rich-Text Field:

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 url = URLRoot() & "db/" & AppID() & "?a=dbpage&pageID=10" & "&apptoken=" & $apptoken & $myReq;

"<a class='OpenAsPopup' href='" & $url & "'data-height=600 data-width=600>Print as HTML</a>"

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>Saving Forms as PDF</h1>
            <p>Records will populate below when completed.</p>
            <p>Depending on the size, it may take longer than expected to start. Check the console for more details.</p>
        <div id="dbPagePayload"></div>
    


    </body>
    <script src="https://yourRealm.quickbase.com/db/yourAppID?a=dbpage&pageID=YourJSPageID"></script> 
</html>

JavaScript Page:

let urlParams = new URLSearchParams(window.location.search);
let lowRec = prompt("Enter the low Record ID#");
let highRec = prompt("Enter the high Record ID#");
let countLength = 0;
let dbid = urlParams.get("myDbid");
let myForm = urlParams.get('myFormId');
let usertoken = urlParams.get('usertoken');
let apptoken = urlParams.get('apptoken');  
let root = location.protocol + '//' + location.host;
const myHostName = "EnterHostName.quickbase.com";

const myDiv = document.getElementById('dbPagePayload');
var headers = {
  	'QB-Realm-Hostname': myHostName,
	'User-Agent': 'Find_Records',
	'Authorization': `QB-USER-TOKEN ${usertoken}`,
    'Content-Type': 'application/json'
}
var body = {"from": dbid,"select":[3],"where":`{3.GTE.'${lowRec}'}AND{3.LTE.'${highRec}'}`}

fetch('https://api.quickbase.com/v1/records/query',
  {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(body)
  })
.then(async res => {
  if (res.ok) {
    return res.json().then(res => {
        console.log(res)
        countLength = res.metadata["numRecords"];
        if (countLength > 1) {
            myDiv.innerHTML += `Found ${countLength} records within the entered range.<br><br>`
        }else if (countLength == 1) {
            myDiv.innerHTML += `Found ${countLength} record within the entered range.<br><br>`
        }else {
            myDiv.innerHTML += `Found 0 records within the entered range.<br><br>`
        };
        console.log(countLength)
        myData(res.data)
    });
  }
  return res.json().then(resBody => Promise.reject({status: res.status, ...resBody}));
})
.catch(err => console.log(err))

const myData = (resOriginal) => {
    var counter = 0
    resOriginal.forEach(ele => {
        let val = ele[3].value;
        console.log(`Done - Rec ID Level: ${val}`)
        let myURL = `${root}/db/${dbid}?a=API_GetRecordAsHTML&rid=${val}&dfid=${myForm}&apptoken=${apptoken}`;
        $.post(myURL, {}, function (response) {
            let myDoc = response;
            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];
                console.log(val);
                        
                var headers = {
                    'QB-Realm-Hostname': myHostName,
                    'User-Agent': 'File_Upload',
                    'Authorization': `QB-USER-TOKEN ${usertoken}`,
                    'Content-Type': 'application/json'
                }
                body = { "to": dbid, "data": [{"3": {"value": val}, "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)
                            counter++
                            myDiv.innerHTML += `Record ID#: ${val} - Complete - ${counter}/${countLength}<br><br>`
                        });
                    }
                    return res.json().then(resBody => Promise.reject({status: res.status, ...resBody}));
                }).catch(err => console.log(err))
            });
        });
    console.log(`Done - getURL Record: ${val}`)
    })
};

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

JeffPeterson1
Qrew Captain
3 years ago
Sean,

This is very cool. I was able to get it working and this will definitely come in handy!

------------------------------
Jeff Peterson
------------------------------

JeffPeterson1
Qrew Captain
3 years ago
I have this working but I can't get it to load any embedded reports on the form to be saved. Any idea why it won't load them?

They are there if you access the link manually, but when it's done via the script it only loads the fields in that table.

Edit: It's not the setting for 'When there are embedded reports on the form' in form properties. Seems to be related to the JS.

------------------------------
Jeff Peterson
------------------------------
GregoryGebhardt
Qrew Cadet
2 years ago
Very Cool stuff! Thanks for sharing. Has anyone here thought how we accomplish this with pipelines? I'd be interested if someone solved this in that way or any thoughts on how it could be accomplished (if at all). Thoughts?

------------------------------
Greg
------------------------------

Forum Discussion

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