Dear, it would be easy if you send me, the complete flow step by step to integrate the annotation tool in asp.net mvc project
Dear @Pavel.Teplitsky, not working. image.png (298.9 KB)
kindly guide me step by step, annotation tool integration.
I was trying to integrating from one month, but yet no success
@ImRizwan We have prepared a demo app with integrated Annotation. You can download it from this branch , To run this application as it is you only need to set path to your license file in the line 19 of this configuration file here
To understand the integration process please do next:
1 Investigate code added in the Angular application here. Most important inserts / changes are highlighted with green color, for example as shown on the Screenshot_2.jpg (115.8 KB)
2 The back-end API required by the front-end application you can find here
3 To customize front-end please feel free to change these files:
Best regards.
Dear @Pavel.Teplitsky Thanks a lot, but there is code available in custom-annotation.component.ts how I can modify it according to our requirement, and how It configure into my real mvc project.
By the way, thanks a lot for your support, once again thanks.
@ImRizwan To integrate it in your real mvc project you need to do next:
1 Create Angular app for example named Annotation
2 Copy code from app.module.ts to your app.module,ts
3 Copy code from HTML, Less and TS files placed in the custom-annotation folder in to your similar files.
4 Copy code from AnnotationApiController to your api controller.
5 Build Angular app
6 Add references to built Angular app files and your application selector as shown here Screenshot_3.jpg (97.0 KB) in to the view where you need the Annotation
7 Run your MVC project
As for the customizing the custom-annotation.component.ts you can customize it as you need, i.e do any changes and overriding of default functionality in a way you want. Also you can specific what exactly you need to customize that I can provide more specific steps for it.
Best regards.
1 Like
Thanks a lot, dear, for this useful reply.
Dear @Pavel.Teplitsky, Thanks a lot for the above useful reply. Now I am doing some modification in the angular end, on the save button, When I click on the save. annotate() method was called. I want to customize it. and some more logic implements on it.
I am using it like this. Actually, I want another API call after saved the annotation file.
annotate() {
super.annotate();
const data = {
'filePath': this.credentials.guid,
'fileId': this.fileId,
'token': this.authToken,
};
console.log({data})
this.http.post(`${window.location.href}/annotation/UpdateDriveFile`, data, Api.httpOptionsJson);
//});
}@ImRizwan Your code looks good at least I can’t see any issues with it except one thing: please rename your action to escape pissible conflicts with original annotate action. And make sure you have set your custom action on click event of the save button.
Best regards
Dear @Pavel.Teplitsky, Any update? how I can send a custom API call?
I have using it:
saveAnnotate() {
super.annotate();
const data = {
'filePath': this.credentials.guid,
'fileId': this.fileId,
'token': this.authToken,
};
console.log({data})
let url = `${sessionStorage.getItem('ApiBaseUrl')}/API/annotation/UpdateDriveFile`;
this.http.post(url, data,
{
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
});
this.http.get(`${sessionStorage.getItem('ApiBaseUrl')}/API/annotation/GetUpdateDriveFile?filePath=${this.credentials.guid}&fileId=${this.fileId}&token=${this.authToken}`);
//});
}
It didn’t hit my API.
best regards
@ImRizwan To be able to send any API request in Angular you should add
.subscribe((response: any) => { functionality to process the response data here });
Please update your API calls in this way:
this.http.post(url, data,
{ headers: new HttpHeaders({ 'Content-Type': 'application/json', }) }) .subscribe((response: any) => { functionality to process the response data here });; this.http.get(`${sessionStorage.getItem('ApiBaseUrl')}/API/annotation/GetUpdateDriveFile?filePath=${this.credentials.guid}&fileId=${this.fileId}&token=${this.authToken}`).subscribe((response: any) => { functionality to process the response data here });;
Best regards.
1 Like
Dear @Pavel.Teplitsky, I need once more help. kindly guide me. How I can called async super.annotate();
actually I want my custom code called after success response of super.annotate() method.
like that
super.annotate().then(r=>{
const data = {
‘filePath’: this.credentials.guid,
‘fileId’: this.fileId,
‘token’: this.authToken,
};
console.log({data})
let url = ${sessionStorage.getItem('ApiBaseUrl')}/API/annotation/UpdateDriveFile;
this.http.post(url, data,
{
headers: new HttpHeaders({
‘Content-Type’: ‘application/json’,
})
}).subscribe((response: any) => {console.log({response});});
})
This is my working code. how i can customize it.
saveAnnotate () {
super.annotate();
const data = {
'filePath': this.credentials.guid,
'fileId': this.fileId,
'token': this.authToken,
};
console.log({data})
let url = `${sessionStorage.getItem('ApiBaseUrl')}/API/annotation/UpdateDriveFile`;
this.http.post(url, data,
{
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
}).subscribe((response: any) => {console.log({response});});
}@ImRizwan You do not need to make it async. Instead you can make your own custom API call.
Here is how you should update your code:
saveAnnotate (){
const annotations = this.prepareAnnotationsData();
this.password = this.credentials.password;
const docType = “Your document type here”;
const annotateData = {
‘filePath’: this.credentials.guid,
‘annotations’: annotations,
‘docType’: docType,
‘password’: password,
};
tthis.http.post(“Annotate doc API URL here”, annotateData ).subscribe((file: any) => {
//do what you want here, make your additional API calls or what ever
});
}
Also Please pay attention that the API action which is called in the custom annotation action should accept the same data you will post. As an example please use existed API action or simply use it as it is - only make sure you have prepared and sent all required data to annotate the document.
As for the issue with empty annotations - we work on it and when the fix will be ready I will notify you.
Best regards.