Log in to AnswerLog in to Follow
2022-03-10 16-20-13
saif sheikh
50Views
20Comments
Solved
Need to display a Pdf on display Screen
Question
Beginner
Best Practices
CSS
OutSystems UI
14 Days of OutSystems

Hi Team,
Working on to display a pdf on the screen. Trying couple of things but they havent worked out. I have been advised to use it as a link since every page will have a pdf coming from the database.
Could anyone please help. Ideally need to be like this.

I have created a layout but unable to figure how how to get it done. It is present in
Audit workboard/reviewscreen . I have attached .oml file for reference please have a look

Revmaxclaimsummarypage.oml

0
0
11 Mar
2021-06-02 20-50-04
Márcio Carvalho
Champion
Solution

Replying to saif sheikh's comment on 17 Mar 2022 21:19:47

First, as with many others here, I gave you an example of how to do things, there is a lot of options to do what you want. I have just put the upload option because I had to upload a pdf to outsystems to be possible to test what you wanted. You just use what you need or think you need.

Change the tag for embed. 

Second, I don't see any attribute on your entitys that is going to be used to store a pdf, how do you want to show a pdf if you are not storing any?

If you want to show a PDF from the database you need to have an attribute to save the PDF in the database, I advise you to be of data type binary data.

After that, have look again at my example, and see how do I convert the binary data pdf to base64 and how am I showing as a frame on the screen.

Let me know if I am wrong in something, I will be waiting for a reply! :)

Kind Regards,

Márcio

See solution in context
0
0
17 Mar
2021-06-02 20-50-04
Márcio Carvalho
Champion
Solution

Replying to saif sheikh's comment on 20 Mar 2022 11:59:18

I don't understand your problem.

You just need to get the source where you have your pdf attribute to insert the pdf.

In this case, my source is going to be the PDF entity that I created as an example.

See solution in context
0
0
20 Mar

Hello saif sheikh,

Do you try to use this component:

https://www.outsystems.com/forge/component-overview/7529/pdfjs-viewer-reactive

I had the same issue as I have, and with this plugin it was solved.

Hope it helps.

Best Regards,

Nuno R

0
0
11 Mar

Hi  Nuno Ricardo Rodrigues,

Thank you for your swift reply, i have installed the Pdfjs viewer and added it to my dependencies of my application as well. Could you help me out with how to approach with it please.


0
0
11 Mar

Replying to saif sheikh's comment on 11 Mar 2022 14:46:44

Hello saif sheikh,

See the OML in attach.

Hope it helps.

Best Regards,

Nuno R

TestApp.oml

0
0
11 Mar

Replying to Nuno Ricardo Rodrigues' comment on 11 Mar 2022 14:50:12

Saw the test file. Thank you so much, Could you help me with changing the source file so that i could display my pdf. for now, the test file source looks empty to me
Thank you for your time

Revmaxclaimsummarypage.oml

0
0
12 Mar

Replying to Nuno Ricardo Rodrigues' comment on 11 Mar 2022 14:50:12

Hi Nuno Unable to figure out how to add pdf file to source. Could you please help me along with steps. Also i have been advised t use html viewer


Could you please help wih it ..


my progress- 

attaching file 009 below to show the ideal output

009.png

0
0
17 Mar

sharing here the component for showing the pdf, png, jpg in reactive application 

HTML Document Viewer - Overview | OutSystems 

Regards,

Shahaji


0
0
13 Mar

Hi Shahji, This seems to be the solution . Let me work on it and get back. Meanwhile could you please confirm what would be the difference if we use  pdfjs forge Component.


Also, Sorry for creating number of questions for this.. it Wasn't intentional

0
0
15 Mar

Created a web block for displaying pdf. Could you please help me step by step. since i am a beginner

Revmaxclaimsummarypage.oml

0
0
16 Mar

Hello @saif sheikh 

Have a look at the OML that I am sharing.

I just create an iframe embed with the HTML element widget from the toolbox that is going to display my pdf. This way is possible to share. 

Just don't forget to convert from binary to base64 like this in the image. But first, have a good look at the oml.


Look at the final result

ShowPDF.oml

0
0
17 Mar

Hi Márcio Carvalho,

Could you please assist me step by step. I am unable to figure the order of the things. Thank you for considering to help.

I am trying to have a pdf in such a way that for every record their is a relational pdf. i dont need options to upload pdf. I need hem to be pre-present based on logic. This is the screenshot of my  prototype version.

Could you please assist me on similar lines.


I am attaching my .oml file for your reference. but its of my progress and not the prototype.


Revmaxclaimsummarypage.oml

0
0
17 Mar
2021-06-02 20-50-04
Márcio Carvalho
Champion
Solution

Replying to saif sheikh's comment on 17 Mar 2022 21:19:47

First, as with many others here, I gave you an example of how to do things, there is a lot of options to do what you want. I have just put the upload option because I had to upload a pdf to outsystems to be possible to test what you wanted. You just use what you need or think you need.

Change the tag for embed. 

Second, I don't see any attribute on your entitys that is going to be used to store a pdf, how do you want to show a pdf if you are not storing any?

If you want to show a PDF from the database you need to have an attribute to save the PDF in the database, I advise you to be of data type binary data.

After that, have look again at my example, and see how do I convert the binary data pdf to base64 and how am I showing as a frame on the screen.

Let me know if I am wrong in something, I will be waiting for a reply! :)

Kind Regards,

Márcio

0
0
17 Mar

Replying to Márcio Carvalho's comment on 17 Mar 2022 22:19:56

Hi Marcio.
How did you get this component-Binary data

Unable to access the source of getpdfbyId aggregate. which is below start in the picture below.

0
0
20 Mar

Replying to Márcio Carvalho's comment on 20 Mar 2022 10:02:05

Unable to access the source of getpdfbyId aggregate. which is below start in the picture below. 

Almost done with the rest. Could you please confirm

yyy.png

0
0
20 Mar
2021-06-02 20-50-04
Márcio Carvalho
Champion
Solution

Replying to saif sheikh's comment on 20 Mar 2022 11:59:18

I don't understand your problem.

You just need to get the source where you have your pdf attribute to insert the pdf.

In this case, my source is going to be the PDF entity that I created as an example.

0
0
20 Mar
2021-06-02 20-50-04
Márcio Carvalho
Champion
Solution
Revmaxclaimsummarypage.oml

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