Hello,
I am attempting a custom implementation of the GroupDocs Viewer and need some help. I have gone through all the example repos and haven’t been able to figure this out.
We have our own Angular application with a UI that displays a list of documents to the user. When the user clicks on a documents, we need the GroupDocs viewer to open and display that document. The document data is stored in database, which is accessed via our UI-agnostic Java/SpringBoot API. So the idea is that when the user clicks on a document, that documentId will be sent as a parameter to the API, which should return whatever data the GroupDocs viewer needs to render that document.
I have implemented a ViewerController with the /loadConfig and /loadDocumentDescription endpoints, which I believe is all we will need in terms of functionality (users will only need to view documents) – but please let me know if I am wrong.
However I cannot find an example of how to implement the Viewer client into our Angular application in such a way that it will hit the API endpoints, rather than trying to hit routes on the client side.
For example, if my Angular application is running on http://localhost:4200 and my API is running on http://localhost:8080, the Viewer client tries to route to http://localhost:4200/viewer/loadConfig, where we need it to make the request to http://localhost:8080/viewer/loadConfig.
Are you able to advise on the best way to complete this sort of implementation?
@bennett.foster
There are a couple of questions in your post. Let me try answering them one by one.
I assume that you have started with one of our demo projects or GroupDocs.Viewer-for-Java-UI which are using common Angular component.
I have implemented a ViewerController with the /loadConfig and /loadDocumentDescription endpoints, which I believe is all we will need in terms of functionality (users will only need to view documents) – but please let me know if I am wrong.
Yes, it should be enough to implement this two endpoints in case /loadDocumentDescription returns all the pages. Also, you can set static config to avoid implementing /loadConfig. Check this Angular application as an example of how you can have more customization freedom.
When the user clicks on a documents, we need the GroupDocs viewer to open and display that document.
You can pass ?file=myfile.docx as a query string parameter, Angular component will read it and send value myfile.docx to /loadDocumentDescription endpoint.
For example, if my Angular application is running on http://localhost:4200 and my API is running on http://localhost:8080, the Viewer client tries to route to http://localhost:4200/viewer/loadConfig, where we need it to make the request to http://localhost:8080/viewer/loadConfig.
To change the API endpoint you can set window.apiEndpoint="http://localhost:8080"; or set it on your page as it shown here. The value should be set before Angular app starts initialization.
Hope it helps. In case you already have some we could take a look at it.
Thank you for this thorough response! I will try this and follow up here with any further questions.