40
Views
18
Comments
Solved
ViewPDF from selecting a list of PDF and Delete
Service Studio Version
11.54.75 (Build 63578)

I have managed to build a demo application where user can create account and upload their pdf and download it... 
However, instead of downloading, how do i make it such that upon clicking onto the file name, it shows a new tab or rather on the site inself the pdf for user to view? 


attached is my oml for reference. 
Home page is for single upload and download only. (Nothing to be edited)


Go to "Projects" submenu and clicked onto the first one [Multiple File Upload]


In this site, I have 2 users for demo. upon clicking onto the first user will show the pdf which is uploaded. This page is for downloading of pdf when clicked on to the pdf file name. 
head over to click "PDF Version"

This is the version whereby I hope to be able to achieve the function where user clicked onto the pdf file name, instead of downloading it, it shows the pdf file (content) onto the column in right side or opens up new browswer). 
also how do i delete the pdf shown on the field? 

UploadFileDemo.oml
2024-10-22 07-27-44
Nuno Azevedo
Solution

Hello Chin,

I have tested and seems its working in here, can you try it?

UploadFileDemo2.oml
2024-10-22 07-27-44
Nuno Azevedo
Solution

Hi Chin Kai,

I would suggest you to take a look at this post Preview PDF File Solution.

I will leave a example with the demo you provide.

Kind regards,

Nuno Azevedo

UploadFileDemo.oml
UserImage.jpg
Chin Kai

Hi Nuno, thank you so much! yep it works. May I know where did you get the documentation from? Been searching online and cant seems to understand or know how it works....

 
also, instead of opening a new tab, is it possible to display it in this small PDFViewer block?

2024-10-22 07-27-44
Nuno Azevedo
Solution

Hi Chin Kai,

In my comment you can find a URL to another post.

To view the pdf in the screen i recommend to use a iframe with the src of the iframe being the generated URL from the JS component. 

Something like this:


And instead of using the last line of the JS ("window.open(fileURL,"_blank";") you can use with a output parameter and saving in a local variable as a URL.



UserImage.jpg
Chin Kai

tried to follow your step and it didnt work... 


The js code I create an output. because if i were to leave it out, it shows an error message. 

created an output variable to pass the url out to the screen variable.

then assign the ouput to the screen variable.

However, it still did not load any contents onto the screen when I clicked onto the pdf...


2024-10-22 07-27-44
Nuno Azevedo

Hi Chin Kai,


Could you put the OML in here? Would be easier to help you out, but how are you trigging this action?

UserImage.jpg
Chin Kai

Hi is the oml file for your reference. It is triggered the same way as how the PDF is going to be displayed on a new tab. via clicking onto the PDF file name.


on the oml file u can find it via the screen (AddCusomterViewPDF)

on site, it can be access via the submenu on the top, [ Projects -> Multiple File upload]

then click onto any one of the users follow by the "View PDF Version" 

Thanks in advance Nuno Azevedo.

2024-10-22 07-27-44
Nuno Azevedo
UserImage.jpg
Chin Kai

Oh... file size exceeded 4mb...zzz no wonder it wasn't attached when I reply to the comment.. I tried to reduce till 3.8mb but can't seems to be able to upload here still.... 


Edit: okay done, just remove all the unused dependencies... and file size is 1.9mb now

UploadFileDemo.oml
2024-10-22 07-27-44
Nuno Azevedo
Solution

Hello,


I will leave a example working in here, i dont have the multiplefile in this example but you simple need to click on the document and send the FileContent, you have a condition in the container "IsView = True" maybe try to change this for "IsView" and change the value in the client action "ViewOnClick".

test_cck_UploadFileDemo.oml
UserImage.jpg
Chin Kai

Hi Nuno, thanks for the demo file. I see my oml file is similar to yours in terms of the javascript and output... However, the different is the demo file u uploaded is a one-time thing.


Meaning to say if user upload 1 file, only 1 file will be shown on the preview. The function I was mentioning was from the list of pdf, user click onto the pdf name, it will display... 
U can try upload some pdf file on this oml and give it a try. I have made necessary change and simplified the app. Thanks in advance.




UploadFileDemo2.oml
UserImage.jpg
Chin Kai

I have managed to pull the url out but it seems to be blocked.... 



2024-10-22 07-27-44
Nuno Azevedo
Solution

Hello Chin,

I have tested and seems its working in here, can you try it?

UploadFileDemo2.oml
UserImage.jpg
Chin Kai

Hi Nuno, Thank you so much for the help. I think it should be working but my IT department setting has render the PDF unable to be opened... 

UserImage.jpg
Chin Kai

Hi, thank you so much. Your new OML attached works file for my own personal environment. Appreciated your help, good day! 

2024-10-22 07-27-44
Nuno Azevedo
Solution

Hi Chin Kai,

In my comment you can find a URL to another post.

To view the pdf in the screen i recommend to use a iframe with the src of the iframe being the generated URL from the JS component. 

Something like this:


And instead of using the last line of the JS ("window.open(fileURL,"_blank";") you can use with a output parameter and saving in a local variable as a URL.



2024-10-22 07-27-44
Nuno Azevedo
Solution

Hello,


I will leave a example working in here, i dont have the multiplefile in this example but you simple need to click on the document and send the FileContent, you have a condition in the container "IsView = True" maybe try to change this for "IsView" and change the value in the client action "ViewOnClick".

test_cck_UploadFileDemo.oml
2024-12-10 04-40-04
Gitansh Anand

Hi @Chin Kai, Please look at this forge component for your requirement to show PDF file content pdfJS Viewer Reactive.

Thanks
Gitansh Anand

UserImage.jpg
Chin Kai

Hi Gitansh Anand, Yes I have that forge.... but it doesn't provide any documentation or follow up on how do I placed my document in there for viewing.... 

2024-12-10 04-40-04
Gitansh Anand

Hi @Chin Kai, there is documentation available for Traditional Web version of this component, may be that will be helpful.

https://www.outsystems.com/forge/component-documentation/2661/pdfjs-viewer-o11/0

Thanks
Gitansh Anand

UserImage.jpg
Chin Kai

Hi @Gitansh Anand, I am using reactive for my development... currently the rest of the forge does not comes with the documentation as well....

2024-10-22 07-27-44
Nuno Azevedo
Solution

Hi Chin Kai,

I would suggest you to take a look at this post Preview PDF File Solution.

I will leave a example with the demo you provide.

Kind regards,

Nuno Azevedo

UploadFileDemo.oml
UserImage.jpg
Chin Kai

Hi Nuno, thank you so much! yep it works. May I know where did you get the documentation from? Been searching online and cant seems to understand or know how it works....

 
also, instead of opening a new tab, is it possible to display it in this small PDFViewer block?

2024-10-22 07-27-44
Nuno Azevedo
Solution

Hi Chin Kai,

In my comment you can find a URL to another post.

To view the pdf in the screen i recommend to use a iframe with the src of the iframe being the generated URL from the JS component. 

Something like this:


And instead of using the last line of the JS ("window.open(fileURL,"_blank";") you can use with a output parameter and saving in a local variable as a URL.



UserImage.jpg
Chin Kai

tried to follow your step and it didnt work... 


The js code I create an output. because if i were to leave it out, it shows an error message. 

created an output variable to pass the url out to the screen variable.

then assign the ouput to the screen variable.

However, it still did not load any contents onto the screen when I clicked onto the pdf...


2024-10-22 07-27-44
Nuno Azevedo

Hi Chin Kai,


Could you put the OML in here? Would be easier to help you out, but how are you trigging this action?

UserImage.jpg
Chin Kai

Hi is the oml file for your reference. It is triggered the same way as how the PDF is going to be displayed on a new tab. via clicking onto the PDF file name.


on the oml file u can find it via the screen (AddCusomterViewPDF)

on site, it can be access via the submenu on the top, [ Projects -> Multiple File upload]

then click onto any one of the users follow by the "View PDF Version" 

Thanks in advance Nuno Azevedo.

2024-10-22 07-27-44
Nuno Azevedo
UserImage.jpg
Chin Kai

Oh... file size exceeded 4mb...zzz no wonder it wasn't attached when I reply to the comment.. I tried to reduce till 3.8mb but can't seems to be able to upload here still.... 


Edit: okay done, just remove all the unused dependencies... and file size is 1.9mb now

UploadFileDemo.oml
2024-10-22 07-27-44
Nuno Azevedo
Solution

Hello,


I will leave a example working in here, i dont have the multiplefile in this example but you simple need to click on the document and send the FileContent, you have a condition in the container "IsView = True" maybe try to change this for "IsView" and change the value in the client action "ViewOnClick".

test_cck_UploadFileDemo.oml
UserImage.jpg
Chin Kai

Hi Nuno, thanks for the demo file. I see my oml file is similar to yours in terms of the javascript and output... However, the different is the demo file u uploaded is a one-time thing.


Meaning to say if user upload 1 file, only 1 file will be shown on the preview. The function I was mentioning was from the list of pdf, user click onto the pdf name, it will display... 
U can try upload some pdf file on this oml and give it a try. I have made necessary change and simplified the app. Thanks in advance.




UploadFileDemo2.oml
UserImage.jpg
Chin Kai

I have managed to pull the url out but it seems to be blocked.... 



2024-10-22 07-27-44
Nuno Azevedo
Solution

Hello Chin,

I have tested and seems its working in here, can you try it?

UploadFileDemo2.oml
UserImage.jpg
Chin Kai

Hi Nuno, Thank you so much for the help. I think it should be working but my IT department setting has render the PDF unable to be opened... 

UserImage.jpg
Chin Kai

Hi, thank you so much. Your new OML attached works file for my own personal environment. Appreciated your help, good day! 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.