Regarding Viewer Integration

GroupDocs.Viewer Product Family
,
1

Dear Team,

We are trying to integrate Viewer product into our web application which has been developed in Java+Spring technologies. I am able to execute your Viewer product using STS IDE but I am unable to integrate in our web page which is in .jsp file format and customize the look & feel according to our application.
Can you share integration & customization document / developer guide which help me out during the integration proceaa as we have urgent poc which has been scheduled in next week?

Please help me into integration process on urgent basis.

2

Hello!
I am not completely understand what do you mean. Running our spring sample you saw free example of Viewer UI, that is developed with a help of Angular.
Here it’s package - https://npm.io/package/@groupdocs.examples.angular/viewer
It is not a part of the Viewer, it’s just completely free sample Angular application. It’s sources can be found here - https://github.com/groupdocs-total/GroupDocs.Total-Angular/tree/master/dist/libs/viewer
Some small example of integration is here - https://gist.github.com/bobkovalex/0674e7d7c54a54daf01a37927df27b05
You are free to modify it however you want.

GroupDocs.Viewer itself does not have any UI or look & feel. It genrates a part of html page with content of the source document. The html has css styles that you can change any way before integrating the html into your applications page.

Or you need an example of creating Viewer Java objects using JSP tags?

Thanks

3

Actually I just want to integrate Viewer and Annotaion into our Web application which has been developed in Java + Spring MVC. I am using latest version of Angular i.e Angular 14.

I am unable to execue the sample source code. Can you share latest UI/UX source code for Viewer and Annotation where everything will be customizable according to our besiness requirement and Integration steps?

I am struggling from last more than 2 months but can’t found solution.

4

FYI, below error I am getting while trying to execute the sample Viewer code:

image.png (59.2 KB)

5

@3iinfo

Thank you for sharing the screenshot. Can you please share your angular app so we could try reproducing this issue on our side?

6

@3iinfo

Please share the sample application and the version of NPM you’re using.

7

Please find the npm version details and sample source code for viewer.

viewer.zip (128.8 KB)
image.png (39.8 KB)

8

@3iinfo

Thank you for attaching the application and screenshot with the versions of the tools installed in your system. We’ll take a look and update you.

9

@3iinfo

Please check this minimal-viewer-app.zip (198.1 KB)
that has been built using the latest version of Angular CLI to create a minimal application by executing ng new --minimal.
I installed viewer with npm install "@groupdocs.examples.angular/viewer" --legacy-peer-deps. I had to use --legacy-peer-deps to install the viewer package. Learn more about --legacy-peer-deps from this SO question.

Another option would be installing Node v14.* instead of the version you have. The app you’ve shared would work well with it and would not fail during the build.

We’re planning to update the viewer package to work well with the latest versions of Node and Angular in the near future.

10

Hello @vladimir.litvinchik

I have tried to run “minimal-viewer-app.zip” but getting an below error for import { TranslateService } from ‘@ngx-translate/core’;

image.png (112.9 KB)

Below is the error geting when I tried to run the application using Visual Studio Code.

image.png (110.3 KB)

Below is the libraries installation screenshots in which I followed same steps which you have adviced.

image.png (47.3 KB)

11

@3iinfo

Unfortunately, I can’t reproduce the same issue locally. Here the steps I’ve performed:

  • Downloaded attached minimal-viewer-app.zip archive and unpacked it
  • Installed packages using npm install --legacy-peer-deps see npm-install.png (18.4 KB)
  • Then I’ve built the app with ng build see ng-build.png (36.9 KB)

Can you please double-check following the same steps?

12

@vladimir.litvinchik

I have followed the same steps then into browser white screen is being desplayed:
image.png (51.3 KB)

Below is the screenshots for the commands which I have executed:

npm install & ng build.png (73.5 KB)
npm start.png (46.4 KB)

13

Please find below error into browser console:

image.png (70.9 KB)

14

@3iinfo

Thank you for sharing the screenshots, it looks like the application was built successfully but it does require a service to be running at the backend that will process the files and return the rendering results back (HTML or PNG).

As a backend, you can take one of our demo applications - https://github.com/groupdocs-annotation/GroupDocs.Annotation-for-Java/tree/master/Demos. But, in this case, you have to replace the client folder in a demo with the Angular applications you have at the moment. You can also just remove client folder from a demo and use it as a service.

As an example, please check this spring-sample-app.zip (3.8 MB). Run it with mvn spring-boot:run and run your Angular app.

15

@vladimir.litvinchik

Above demo application is working fine and below is the screenshot for the same:
image.png (56.5 KB)

Then I have replaced existing client folder with our latest source code then I am getting Annotation UI but I should get Viewer UI.
image.png (54.3 KB)

How will I get Viewer UI?

Please help me to resolve this issue on urgent basis.

16

@3iinfo

As I can see from the screenshot you’re opening /annotation instead of /viewer. Also, please make sure that you’re running the app that contains Viewer app sources.

17

@vladimir.litvinchik

Yeah, I am trying with Viewer Java Source code to Integrate. Meanwhile can you help me to understand what about below project directory structure which contains .html and .js files as per below screenshot:
image.png (16.4 KB)

Do I still need of all these files?

18

@3iinfo

This html and js files are created during build of the Angular application. You can also see js.map files that are used to debug app in production. This files are refernced in the index.html file and you still need them in case you’re planning to run Annotation Spring Demo which serves both client side app and backend API.

19

Hi @vladimir.litvinchik

I Integrated Viewer UI source code with Java Backend code but still blank screen is coming. Please share sample Angular UI Sorce code with backend java code.
We don’t have that much of time time to experiment.

Please help me urgently.

20

@3iinfo

Please find both apps attached: java-backend.zip (197.8 KB) viewer-ui.zip (3.8 MB).