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

[Tim]

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.

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!

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

[tomaz]

Hi, what am I missing?

[Tim]

@Tim

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.

Glad you’re already trying it out @tomaz

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

[tomaz]

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

[Tim]

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

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 )

Happy building
Tim

[tomaz]

Just to let you know that we implemented above solution for multiple pdfs without much effort thanks to your great post.
Lovely…

[Tim]

Thanks for your feedback @tomaz - happy to hear this works for you.

[1F2Ns]

Adding to this in case anyone else can benefit from it in the future.
We have multiple files attached to an item and need to grab the newest one with a specific word in the title of the file. In this example we are looking for “_signed”.

Example:

Code snippet:

let allFileNames = estimate_field_files_concatenated_filenames_string.split(",");
let allFiles = estimate_field_files_iterable;

// Initialize variable for signed file URL
let signedFileUrl = null;

// Loop through each file in allFiles, starting from the end
for (let i = allFiles.length - 1; i >= 0; i--) {
    // Check if the file and view_url property exist
    if (allFiles[i] && allFiles[i].view_url) {
        // Check if the filename includes "_signed"
        if (allFileNames[i].includes("_signed")) {
            // Assign the view_url to signedFileUrl
            signedFileUrl = allFiles[i].view_url;
            break;  // Exit loop once a signed file is found
        }
    }
}

signedFileUrl;