How to embed PDF attachments into the record using the calculation field

Storing file attachments in Tape couldn’t be easier - but in the case of PDFs it can be cumbersome to open them, especially when they have multiple pages it takes various clicks to get there. This guide shows how to embed a PDF directly into the record, with many options for customisation. We use a calculation field and a rather primitive workflow automation. The result will look like this (so keep reading it’s worth it!):

Note: This example uses no external tools or add-ons. It simply leverages the power of Tape’s calculation field with HTML and a very simple workflow automation.

:bulb: Inspired by the community.

Let’s proceed with the example:


1) Setup your App and calculation field

Navigate inside Tape onto the app where you plan to have your PDF embed. It needs at least one file attachment field where the PDF can then be added to records. Add a single text field (it can be “always hidden” and call it “File URL”):

´

Now, add a calculation field that should use this formula then:

const file_url = @File URL; // use your File URL field token here!

if (file_url && file_url.startsWith('http')) {
  `<iframe src="${file_url}" width="100%" height="600px"></iframe>`
} else {
  'Not available.'
}

Explanation: We use the File URL field’s value as a source (it will hold the PDF URL) and compose an HTML string that embeds the PDF for display. We also set some boundaries to use the space effectively. Feel free to adjust those values as needed. Lastly we fallback to avoid strange behaviour during testing (the else case).

Your app should now look similar to this screenshot below:


2) Setup the simple automation to fill File ID

In order to set the hidden File ID field value, we will add a very simple automation that grabs the file field’s view_url via a calculation. We need the automation for this use case, as the proper URL value is currently not available directly inside the calculation field (as of 09/2023, that may change in the future).

In our example we also set a filter, and we used the record update trigger. Note that this will only run on changes of an existing record, so we will later create an empty record and then add the PDF file to test it.

Use a record update action block with a single assignment set to “Calculation”, and grab your proper variable as seen in this code sample. The variable name will depend on your app and field name, but powerful Tape code editor should assist you with finding the right variable name.

The resulting automation will look like this:

Finally, create an empty record and add a PDF file to your attachment field. Moments later, your PDF should be embedded inside the record! :partying_face:

Update from 14.09.2023: If you are interested in how this works with multiple files, check our the comment below.

5 Likes

Hi, what am I missing?
Screenshot 2023-09-04 at 11.38.54

1 Like

Glad you’re already trying it out @tomaz :wink:

Adjust your variable name as mentioned in the guide:

The variable name will depend on your app and field name, but powerful Tape code editor should assist you with finding the right variable name.

You will need to choose the right variable, the name will depend on how you named your attachment field, and also on your app’s name. It should end with _files_iterable.

Let me know how it goes!

Cheers
Tim

Uoooo, i missed calculation to find the right variable. :face_with_monocle:
Really nice feature, great work.
Just one more thing, what would be best practice if we had more than one file per record?

1 Like

@tomaz really happy to hear you like the guide and it worked in the end. :partying_face:

In order to embed multiple PDFs you simply need to adjust a couple of things:

1) Use a multi-line text field

Add a multi line text field (due to length requirements that is needed) to store the file URLs - we are going to store them comma separated.

2) Adjust your automation record update assignment

You need to store all view_urls now, we will join them together using a , character.

The code will look something like this:

pdf_embed_field_files_iterable.map(entry => entry.view_url).join(',')

Or as a screenshot:

3) Adjust your calculation field

We need to ensure to use the new field token and also to embed all URLs using an iframe snipped. We do that using a map, this is the code:

const file_urls = @File URLs.split(',');

if(file_urls.length && file_urls[0].startsWith('http')) {

 file_urls.map(file_url =>`<iframe src="${file_url}" width="100%" height="300px"></iframe>`).join('');

} else {

 'Not available.'

}

Be sure to exchange your field token for the File URLs field. It should then work out of the box (worked first try for me):

@tomaz let me know how it goes!

(@shir this could also be interesting for an expert like you :eyes: )

Happy building
Tim

2 Likes