Forum Discussion

AdamKeever1's avatar
AdamKeever1
Qrew Commander
2 years ago

iframed PDF in a Form

We have a form for requesting meals to be ordered from a vending service for when we have guests and such. Previously the menu was in the form as a formula URL that had the link to the menu as an attachment from a resources table.

I was asked to update the menu. That's when I learned that employees would click the link in the form and the attachment would download and then they would have to open the file to view the menu. Not optimal.

I did some research and found a way to embed the PDF menu in the form as an iframe.

Here's how:

  1. upload the pdf to a file attachment field
  2. create an HTML page
  3. toggle the HTML button so you can add code
  4. add this code to the HTML page
    •  <iframe src="https://docs.google.com/gview?url=COPY&PASTE_YOUR_PDF_ATTACHMENT_URL_HERE&amp;embedded=true" width="600" height="650" frameborder="0" target="_blank"></iframe> 
  5. create a formula URL field
  6. add this formula
    • URLRoot() & "db/" & AppID() & "?a=dbpage&pageid=20"
    • change the 20 to your page ID number
  7. check the embed as iframe box and set the window size

That's it.

For additional optimization I used text HTML to wrap the iframed menu and other fields into a table, table row, and table cells so that the menu is to the left of the fields where the requested items are inputted.

And now life is a little easier for my colleagues:

Enjoy.



------------------------------
Adam Keever
------------------------------

2 Replies

Sort By
  • SherryBlackbur1's avatar
    SherryBlackbur1
    Qrew Trainee
    2 years ago

    Adam, this is awesome! Just curious if it's possible to tell it to open whatever is in the file attachment field - not a specific file url? This is the closest thing to a solution that I've found anywhere, but need it to just show whatever file is in the file attachment field. Think document library. Any ideas?



    ------------------------------
    Sherry Blackburn
    Sr. Applications Systems Analyst (Quickbase at PeaceHealth)
    PeaceHealth
    ------------------------------
    • MarkShnier__You's avatar
      MarkShnier__You
      Qrew #1 Challenger
      2 years ago

      Sherry, there is a way to preview most normal file types if you are willing to set your file attachment field to be viewable without logging in.  The technique is in Kirk Trachy's  Magic Buttons app.

      Here are the steps.  You don't have to understand the code page. Just copy paste.

      Step 1.

      Create a Code page called iframe.html
      <html>
      <head><title></title></head>
      <body>

      <iframe id="kirk" style="height:100%;width:100%;border:none;overflow: scroll;"></iframe>

      <script>

          const urlParams = new URLSearchParams(window.location.search);
          const rid = urlParams.get('rid');
          const tabledbid = urlParams.get('tabledbid');
          const myurlroot = urlParams.get('myurlroot');
          const fileattachmentfid = urlParams.get('fileattachmentfid');
          const src = "https://docs.google.com/gview?url=" + myurlroot + "/up/" + tabledbid + "/a/r" + rid + "/e" + fileattachmentfid + "/v0&embedded=true"; 

      document.getElementById("kirk").src = src

      </script>
      </body>
      </html>
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
      Step 2
      Create this field called Attachment type.
       
      var text Suffix = Right([Receipt Photo or Attachment],".");

      var text NonPhotoFileType = 
      Case($Suffix,
      "xls", "File",
      "xlsx", "File",
      "pdf", "File",
      "doc", "File",
      "docx", "File",
      "ppt", "File",
      "pptx", "File");


      If(
      Trim([Receipt Photo or Attachment])="","",
      $NonPhotoFileType<>"", $NonPhotoFileType, "Image")

      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      Create the URL field type for the form. Type = URL . Set as iframe.  Set  800 by 800 size.

      If([Attachment Type 1]="File",

      URLRoot()&"db/"&AppID()&"?a=dbpage&pagename=iframe.html&rid="&[Record ID#]
      &"&tabledbid="&Dbid()
      &"&myurlroot="&URLRoot()
      &"&fileattachmentfid=9")

      // This field refers to iframe.html that is located in the pages section of this app. You will need to copy that code page into your app.
      // You will also have to copy the code from this button and update it for your button to reflect what your file attachment's field id (fid) is.  This this example the file attachment is 432.  Yours may be different.
      // Also be sure to "Allow open access     Allow access to this file attachment from a Quickbase link without signing in".  Edit the file attachment field properties and check the checkbox. Gviewer needs to be able to see the file in order to render it.




      ------------------------------
      Mark Shnier (Your Quickbase Coach)
      mark.shnier@gmail.com
      ------------------------------