Populate pdfViewer fileUrl

[essy]

Hey there! Glad to be part of the community.
I'm trying to update pdfViewer field fileUrl using javascript.
The purpose is that the view I'm editing is supposed to display SQL records.
In these records, there are pdf's links I want to display.

So there will be a list of pdf's but only one pdfViewer component to display them.

So I tried to update this fileUrl field onto the component with pdfViewer2.fileUrl = "https://xxxx.pdf".

I tried it with :

• Javascript query witch I ran manually
• with an event click handler with run script action
• with an event click handler with a Trigger query action

Nothing worked. Maybe I'm using wrong but I think I'have made all verifications.

[minijohn]

Hey @essy, welcome to the fam

I got this working with a JS Query that updates its value from a selected row in a table. How's your view looking like?

So you can't assign a URL with .fileUrl=, you rather create a JS query variable that gets updated via another query.

Can you post a screenshot of your UI, there are multiple ways of building this.

[essy]

hey @minijohn, thank you for the fast reply :).

You can see my very simple UI screenshoted

In the container titled Documents, I have :

• pdfViewer component to display the PDF
• 2 buttons I created just to trigger the update. I did this to be more fast during the test phase. At the very end, only the sql request should update it.

In the query panel, you'll see my send_pdf_url query witch seems wrong since I have read your answer.

[Jay]

Hey @essy, happy to help!

@minijohn is correct that you are not able to assign the fileUrl manually. I'd recommend trying to use a JS Query that simply returns the URL and then call that dynamically in the PDFViewer:

[essy]

Thank you @Jay!
It's working but how can I trigger an update of the field File URL ?

I mean, with my 2 buttons :

• Click on button 1 => display pdf A
• Click on button 2 => display pdf B

Both within only one pdfViewer component

[Chris-Thompson]

Hey @essy!

I don't believe there is a set property on the pdf viewer component at the moment (although this is a great feature request, I'll write this up internally). You can however store this URL in a temporary state (link to our docs on this here) and display the results by triggering a REST query to the URL and displaying the results in the pdfViewer:

In this example app, each of my buttons have an event handler that changes this state that looks like this:

Next, after the URL is changed in temp state, I have a REST query that retrieves the PDF:

The return of this will be Bast64 binary so we can display the following in our PDF viewers base64 input:

{{getPDF.data.base64Binary}}

Do you think this could work for your use case here?

[essy]

Hi @Chris-Thompson ! Thanks you for this solution. I'll try it today and let you. Seems ok to me.

[essy]

Thank you three for the answers. They have all helped me. It's working for me.

[Lebowskar]

Hi guys,

Thanks for sharing your solutions.

i have the same problem (and solution now thx) and i have to securate the URL's in order to securise the PDF's who are called in the tool

If someone have any hints

Have a great day

Oscar

[Chris-Thompson]

Hey @Lebowskar — happy to help here! I'm not sure I follow your use case here though, would you mind sharing a little more about your setup and ideal workflow?

[mitetey569]

@essy

how can I trigger an update of the field File URL ?

To get started, open your PDF (or create a new one) in a tool like Adobe Acrobat. Then explore these options to add interactive elements to any page: Add buttons: Edit website to PDF > Link > Add/Edit Web or Document Link > Menu Button. Add links: Edit PDF > Link > Add/Edit Web or Document Link.