Webviewer Custom UI integration

Jack_Nehme · September 4, 2020, 5:44pm

We currently are using an older version of Webviewer (jquery) in an Angular 8 project.

We needed to retain the same layout and controls of the older version Webviewer for our update. So we decided to rebuild the UI using the PDFTron webviewer custom ui 7 found here: https://github.com/PDFTron/webviewer-custom-ui

The webviewer-custom-ui is build in React and we need to integrate it into our Angular Project.

I was thinking we could use the WebViewer global method but it’s not clear if we can use it with the custom ui.
https://www.pdftron.com/api/web/global.html#WebViewer

Any advice on this best path would be appreciated.

achen · September 8, 2020, 6:43pm

Hello,

Yes you should be able to use the WebViewer global method with the custom UI.

Looking at https://github.com/PDFTron/webviewer-custom-ui/blob/master/public/index.html, observe that the webviewer.min.js and some other files from the webviewer folder is imported (these are the files that allow you to call the WebViewer global method).

To do the same with Angular, please have a look at: https://www.pdftron.com/documentation/web/get-started/angular/exist-project/. By importing the files mentioned in the guide, it should allow you to call WebViewer global methods.

Anthony Chen

Software Developer
PDFTron Systems Inc.

Jack_Nehme · September 8, 2020, 11:14pm

Thanks for responding so quickly.

When building the custom-ui a lib directory is not created.
However, line 12 of the build/index.html or line 23 of https://github.com/PDFTron/webviewer-custom-ui/blob/master/public/index.html
has this “”

I tried copying the lib folder from the WebViewer.zip, https://www.pdftron.com/downloads/WebViewer.zip

into the build directory but that didn’t work.It work render the default ui.

I next turned to the WebViewer global method to see if there’s something I’m missing to configure.
According to the documentation, https://www.pdftron.com/api/web/global.html#WebViewer__anchor
The WebViewerOptions’ ui property description can only accept “default” or “legacy” as a value.

What WebViewerOptions configurations are require for a custom-ui?

achen · September 10, 2020, 8:58pm

My apologies, please disregard what I have said previously as it is not correct.

I’m wondering if you have seen this guide yet: https://www.pdftron.com/documentation/web/guides/core/ ?

From looking at it, its possible we might be going with the wrong approach of attempting to copy the lib folder.

From reading the guide above, we may not need to worry about “WebViewerOptions”.

Anthony Chen

Software Developer
PDFTron Systems Inc.

Jack_Nehme · September 11, 2020, 11:39pm

Yes, we built our own custom webviewer UI using the https://github.com/PDFTron/webviewer-custom-ui.
So we have expanded the custom UI project to include all the tools and layout we need, which is in React

Our existing project is built on Angular.
We would like to integrate the custom UI react project just like the default webviewer UI.

This is where help is needed.
The Webviewer global method is used to instantiate the default webviewer UI.
The Webviewer global method takes a WebViewerOptions object then returns a promise.
For the WebViewerOptions, what would be the proper configuration needed to load our custom UI?

If this isn’t going to work, can you recommend an alternative method to integrating the webviewer into our Angular project?
Thanks

achen · September 15, 2020, 8:44pm

Hi,

I’m wondering if you have had a chance to read this guide as well: https://www.pdftron.com/documentation/web/guides/core/.

Its possible we might be on different pages.

For the WebViewerOptions, what would be the proper configuration needed to load our custom UI?

You don’t need to worry about this part.

I believe you only need to do the following:

copy over the content inside the core folder
set the worker path to the copied core folder
-create a new document viewer object

May I ask why you would like to create your own custom UI?

Anthony Chen

Software Developer
PDFTron Systems Inc.

Jack_Nehme · September 15, 2020, 10:49pm

The reason for upgrading webviewer is that the old version won’t render some newer PDFs with OCR and the current version of webviewer does.

Our management and user base requires that the webviewer layout and tools remain the same.

Keep in mind we have an existing Angular app using an older jQuery based version of webviewer ui.

We are not rewriting our Angular app. We are just replacing the webviewer part.
Because the current default webviewer ui is very different from the old one we needed to create a custom ui.

I did read this guide found here: https://www.pdftron.com/documentation/web/guides/core/.

That is were I found the link to the react webviewer custom ui project: https://github.com/PDFTron/webviewer-custom-ui
Using the pdftron webviewer custom ui project we were able to customize the ui to meet our needs.

Now one of the last hurdle is to integrate the webviewer custom ui (react) into our existing app (angular).

I did try following the step you provided but like you said, were not on the same page.

That’s for creating a webviewer from scratch and not creating an instance of an existing webviewer.

I guess the WebViewer global method is only for the default webviewer ui and cannot be used with webviewer custom ui.

Well, I’m looking into micro frontends now. Let me know if you have any recommendations.

Thanks