HTML Widget Bonita 7, display pdf report


Hello programmers,

I am newbie to this bonitasoft, started with bonita ver 7.0.1.
When Customizing the forms, there is a high limitations in widgets.
Here the need is: Can we get the file(.pdf) stored in document, displayed, as we do with the object or else tags, embed src="" width="500" height="375" type='application/pdf', displayed as they do in normal html...!!!

Can some one, suggest how to analyze the customization in UI except the two videos, and the documents..

Will be helpful...!!



Submitted by Sean McP on Tue, 09/15/2015 - 10:55

Are you sure the problem isn't the Browser itself? It is easy to set them not to display the document as required.


Submitted by vivek.paranthaman on Tue, 09/15/2015 - 11:40

Hello Sean,
As I see that the usage of embed and object tags will make me independent of the browser..
However can you brief me, how can I set is easily, will be much appreciated...
Using the context / any API, can I access the "document variable" and its content to a form, any suggestions on that..!!

Thank you,

Submitted by vivek.paranthaman on Wed, 09/16/2015 - 07:27


I see that I can use the Rest Api - as in a variable on form to access the documentDownload?fileName=xxxxx.pdf and use the var as in ng's, however, either the session expires, or the custom widget is not stable.

Any one have a suggestions?..!!


Submitted by Pan Evan on Fri, 02/12/2016 - 06:25

Hi, Sean.
Thanks for sharing your problem. When it comes to pdf processing, I have another question to ask you. I wonder whether text extraction from pdf files is much simpler than pdf to text conversion process. Thre's something wrong with my pdf viewer. I want to look for a method to help with the relevant process. Any suggestion will be appreciated. Thanks in advance.

Best regards,

3 answers

This one is the BEST answer!

Hi all,

Since this is a recurring request from the Community, I have contributed a custom widget for this:



Submitted by vivek.paranthaman on Sun, 09/20/2015 - 15:09


Can we add more than one one custom widget with different templates, to our UI editor?

Thank you,

Submitted by philippe.ozil on Mon, 09/21/2015 - 09:31

Yes, you can create as many custom widget as you want.



To display a PDF without downloading it, you will need a custom widget with an object tag such as this:

<object data="urlToPdfDocument" type="application/pdf" width="300" height="200"></object>

Then, you may use this kind of URL where contentStorageId is replaced by your bonita document property :


You can retrieve the contentStorageId of your document (myPDF here) from the context:


Hope this helps,


Submitted by vivek.paranthaman on Wed, 09/16/2015 - 23:39


Thank you, I have tried your suggestion, where the 'context.myPDF_ref.contentStorageId' is not retrieving anything, otherwise conceptually, this works(virtually). The form doesn't recognize a value from '{{../context.myPDF_ref.xxxx}}'.
Can you please tell me, what can I use instead of the "urlToPdfDocument", in my custom Widget.
As well I see that the custom widget is not stable, What all things I have to take a look, so that to make the custom widget appears on my form?!!

To make it more clear : I can refer to /bonita/portal/formsDocumentImage?document=
the 'contentStorageId'- can't be accessed using context variable..

Can any one take a look at it, whether i have to use angular directives/controllers to access it..

Thanks in advance..