You’re welcome.
When you add signatures to the document through the front-end application and then click on save button, our front-end sends data to the back-end with all signatures and data. So, at the back-end where the data is received you can store it anywhere you want.
@atirtahir3
Hi, Thanks for the update. I will check. As per the link which you shared before ,
https://gist.github.com/bobkovalex/0674e7d7c54a54daf01a37927df27b05
If i want to use the advanced scenario and integrate the Viewer or Signature to my angular project , do i have to install the modules using npm or not ? Can you please advise ?
In the advanced scenario, It is written " Do not use npm install in this step"
1 Like
npm install will only install libraries that are specified in your configuration file. However, if you set Viewer/Signature to use local repository, then it will not rewrite them. This is actually not related to the back-end API, it is node behavior.
@atirtahir3 Please ignore my previous comment. I tried to follow the approach provided in this link Angular Integration
to integrate ViewerModule to my angular app but i could not run the application after i integrated it.
Here is my angular project. I have deleted node_modules here.
DigitalSignClient.zip (265.8 KB)
Can you please have a look at it and let me know if something is missing ?
Should i have to use the code from GroupDocs.Total-Angular project or @groupdocs.examples.angular from node_modules for integration. Can you please clarify ?
I get the below error in the browser while i run the client. My server was up and running.
Your support is highly appreciated.
compiler.js:2175 Uncaught Error: Template parse errors:
Can’t bind to ‘icon’ since it isn’t a known property of ‘fa-icon’.
- If ‘fa-icon’ is an Angular component and it has ‘icon’ input, then verify that it is part of this module.
- If ‘fa-icon’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
- To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. (“=”‘Drop file here to upload’" *ngIf=“!file” (fileDropped)=“fileDropped($event)”>
Click <fa-icon [ERROR ->][icon]=“[‘fas’,‘folder-open’]”> to open file
Or drop file here
"): ng:///AppModule/AppComponent.html@55:19
‘fa-icon’ is not a known element:- If ‘fa-icon’ is an Angular component, then verify that it is part of this module.
- If ‘fa-icon’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. (“'” [text]=“‘Drop file here to upload’” *ngIf=“!file” (fileDropped)=“fileDropped($event)”>
Click [ERROR ->]<fa-icon [icon]=“[‘fas’,‘folder-open’]”> to open file
Or drop file here
</gd-init"): ng:///AppModule/AppComponent.html@55:10
Apparently, it seems that the font awesome npm package/installation is missing. Please install that and you have to add FontAwesomeModule to your module’s imports. Have a look at this link. Make sure that you restart the server after the installation. Let us know if it resolves your issue.
Please use @groupdocs.examples.angular.
Can you please share complete steps to run/execute the sample project you shared. We’ll then further explore it.
@atirtahir3 Hi, Thanks for the update. I installed font awesome and then restarted the server but i got below error. To run the project, I just started the server and set the apiEndpoint to http://localhost:8080/viewer. For the client, I used “npm start”.
Any idea what is the issue ?
ERROR in ./node_modules/@groupdocs.examples.angular/common-components/fesm2015/groupdocs.examples.angular-common-components.js
Module not found: Error: Recursion in resolving
Stack:
resolve: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@groupdocs.examples.angular\common-components\fesm2015) @fortawesome/angular-fontawesome
newResolve: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@groupdocs.examples.angular\common-components\fesm2015) @fortawesome/angular-fontawesome
parsedResolve: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@groupdocs.examples.angular\common-components\fesm2015) @fortawesome/angular-fontawesome module
describedResolve: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@groupdocs.examples.angular\common-components\fesm2015) @fortawesome/angular-fontawesome module
rawModule: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@groupdocs.examples.angular\common-components\fesm2015) @fortawesome/angular-fontawesome
module: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@groupdocs.examples.angular\common-components\fesm2015) @fortawesome/angular-fontawesome
resolve: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules) ./@fortawesome/angular-fontawesome
newResolve: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules) ./@fortawesome/angular-fontawesome
parsedResolve: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules) ./@fortawesome/angular-fontawesome
describedResolve: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules) ./@fortawesome/angular-fontawesome
relative: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@fortawesome\angular-fontawesome)
describedRelative: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@fortawesome\angular-fontawesome)
rawFile: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@fortawesome\angular-fontawesome)
file: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@fortawesome\angular-fontawesome)
relative: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@fortawesome\angular-fontawesome)
describedRelative: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@fortawesome\angular-fontawesome)
rawFile: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@fortawesome\angular-fontawesome)
file: (D:\Work\CFT Project\Git\DigitalSignClient\node_modules@fortawesome\angular-fontawesome)
Please share source code for the project. It’s hard to find out the root of the issue by simply running the provided application (issue is still with fontawesome package). Secondly, we’d recommend you to prepare a simple application that must use only GroupDocs APIs and using that issue could be reproduced.
Hi, i was able to do it. There was version mismatch with fontawesome package. Thank you for the support !
1 Like
Hi, Hope you are doing good. I need a small help. after i integrated the group docs angular code, I passed the file object for the component to load dynamically.
The Scenario is, i upload the file in the first tab and I try to view it in the third tab using the below code.
<gd-loading-mask [loadingMask]="isLoading"></gd-loading-mask>
<div class="wrapper" (contextmenu)="onRightClick($event)" (click)="hideAll($event)">
<div class="signature-wrapper wrapper">
<gd-tabbed-toolbars [logo]="'signature'" [icon]="'pen-square'">
<gd-tabs>
<gd-tab [tabTitle]="'File'" [icon]="'folder-open'" [id]="'1'" [active]="true">
<div id="files-tools" class="toolbar-panel">
<gd-button [icon]="'folder-open'" [tooltip]="'Browse files'" (click)="openModal(browseFilesModal)"
*ngIf="browseConfig" [elementPosition]="-1"></gd-button>
<gd-button [disabled]="formatDisabled" [icon]="'download'" [tooltip]="'Download'"
(click)="downloadFile()" *ngIf="downloadConfig"></gd-button>
<gd-button [disabled]="formatDisabled" [icon]="'save'" [tooltip]="'Save'" (click)="sign()"></gd-button>
</div>
</gd-tab>
<gd-tab [tabTitle]="'Signatures'" [icon]="'signature'" [id]="'2'">
<div class="toolbar-panel">
<div *ngFor="let signatureType of signatureTypes">
<gd-top-tab [disabled]="!file" *ngIf="isVisible(signatureType.id)"
[icon]="signatureType.icon" (activeTab)="activeTab($event)"
[id]="signatureType.id" [tooltip]="signatureType.name"
[elementPosition]="isFirstTab(signatureType)">
</gd-top-tab>
</div>
</div>
</gd-tab>
<gd-tab [tabTitle]="''" [icon]="'qrcode'" [id]="'3'" *ngIf="!isDesktop && codesConfig()">
<div class="toolbar-panel">
<div *ngFor="let signatureType of signatureTypeCodes">
<gd-top-tab [disabled]="!file" *ngIf="getSignatureTypeConfig(signatureType.id)"
[icon]="signatureType.icon" (activeTab)="activeTab($event)"
[id]="signatureType.id" [tooltip]="signatureType.name"
[elementPosition]="isFirstTab(signatureType)">
</gd-top-tab>
</div>
</div>
</gd-tab>
</gd-tabs>
</gd-tabbed-toolbars>
<gd-signature-left-panel *ngIf="activeSignatureTab" [rewrite]="rewriteConfig" (newSignatureEvent)="newSign($event)"
[isPdf]="isPdf()" [id]="activeSignatureTab">
</gd-signature-left-panel>
<div class="doc-panel" *ngIf="file">
<gd-document (drop)="dropSignature($event)" (dragover)="dragOver($event)" class="gd-document" *ngIf="file"
[file]="file" [mode]="true" gdScrollable
[preloadPageCount]="preloadPageCountConfig" gdRenderPrint [htmlMode]="true"></gd-document>
</div>
<gd-init-state [icon]="'signature'" [text]="'Drop file here to upload'" *ngIf="!file"
(fileDropped)="fileDropped($event)">
Click
<fa-icon [icon]="['fas','folder-open']"></fa-icon>
to open file<br>
Or drop file here
</gd-init-state>
<gd-hand-modal></gd-hand-modal>
<gd-stamp-modal></gd-stamp-modal>
</div>
<gd-browse-files-modal (urlForUpload)="upload($event)" [files]="files" (selectedDirectory)="selectDir($event)"
(selectedFileGuid)="selectFile($event, null, browseFilesModal)"
[uploadConfig]="uploadConfig"></gd-browse-files-modal>
<gd-error-modal></gd-error-modal>
<gd-password-required></gd-password-required>
<gd-success-modal></gd-success-modal>
</div>
I got the below error in the browser console. Attached here. Can you please let me know if i am missing something as I am unable to view the uploaded file in the third tab ?
image.png (58.2 KB)
This is more like a front-end error. It’d be better if you share a simple project with us using that issue could be reproduced.
Hi, Thanks for the update. I have shared the sample project over here Sample POC Project without node_modules
1)First step is to run npm install
2)Second step is to access this URL : http://localhost:4200/document-signature
In the first step, I am calling the Upload service provide by Group Docs to upload the document to a physical location.
When i go to third screen, i get the view signature screen. I have to manually browse and upload the document and then click on it to view. But i need the uploaded document from first screen to be rendered in the 3rd screen. I was able to achieve it with old version of group docs when it was implemented using Jquey and Javascript.
How can View the document directly which i uploaded in 1st screen as soon as i go to 3rd screen ? i tried to enable but it did not work. Please support.
Also, is there any option to check if the document is signed or not in the front end before moving to the next screen ?
The older version was UI-dependent. We discontinued that already. As you are using both Viewer and Signature APIs in your project. So, following work-flow may help you to achieve the goal:
- In the first step, you will upload the source document (of course it will be stored at some physical location)
- In your third screen where you actually want to display the source document uploaded in step 1, you have to pass the uploaded document path to the Viewer API at back-end so that API can render it to Image or HTML format and application will open the rendered output (image or HTML) it in the browser.
Please note that, Viewer API core feature is just to render the source document. Later, it depends on your business logic how you display the rendered document in the browser - Once user goes to third screen, you can invoke step 2 at back-end (pass source document to Viewer API and display document in browser). This way you will not have to manually browse and open document
Hi, Thanks for the update. I am using only signature component. I just need to render the uploaded document in my third screen. I tried to call the API called loadDocumentDescription and i got the response as shown in image. The below mentioned html is being rendered in the 3rd screen.
Can you please let me know how to handle this response to display the image of the document ?
image.png (65.0 KB)
Should i have to use this modify this html ?
<gd-loading-mask [loadingMask]="isLoading"></gd-loading-mask>
<div class="wrapper" (contextmenu)="onRightClick($event)" (click)="hideAll($event)">
<div class="signature-wrapper wrapper">
<gd-tabbed-toolbars [logo]="'signature'" [icon]="'pen-square'">
<gd-tabs>
<gd-tab [tabTitle]="'File'" [icon]="'folder-open'" [id]="'1'" [active]="true">
<div id="files-tools" class="toolbar-panel">
<gd-button [icon]="'folder-open'" [tooltip]="'Browse files'" (click)="openModal(browseFilesModal)"
*ngIf="browseConfig" [elementPosition]="-1"></gd-button>
<gd-button [disabled]="formatDisabled" [icon]="'download'" [tooltip]="'Download'"
(click)="downloadFile()" *ngIf="downloadConfig"></gd-button>
<gd-button [disabled]="formatDisabled" [icon]="'save'" [tooltip]="'Save'" (click)="sign()"></gd-button>
</div>
</gd-tab>
<gd-tab [tabTitle]="'Signatures'" [icon]="'signature'" [id]="'2'">
<div class="toolbar-panel">
<div *ngFor="let signatureType of signatureTypes">
<gd-top-tab [disabled]="!file" *ngIf="isVisible(signatureType.id)"
[icon]="signatureType.icon" (activeTab)="activeTab($event)"
[id]="signatureType.id" [tooltip]="signatureType.name"
[elementPosition]="isFirstTab(signatureType)">
</gd-top-tab>
</div>
</div>
</gd-tab>
<gd-tab [tabTitle]="''" [icon]="'qrcode'" [id]="'3'" *ngIf="!isDesktop && codesConfig()">
<div class="toolbar-panel">
<div *ngFor="let signatureType of signatureTypeCodes">
<gd-top-tab [disabled]="!file" *ngIf="getSignatureTypeConfig(signatureType.id)"
[icon]="signatureType.icon" (activeTab)="activeTab($event)"
[id]="signatureType.id" [tooltip]="signatureType.name"
[elementPosition]="isFirstTab(signatureType)">
</gd-top-tab>
</div>
</div>
</gd-tab>
</gd-tabs>
</gd-tabbed-toolbars>
<gd-signature-left-panel *ngIf="activeSignatureTab" [rewrite]="rewriteConfig" (newSignatureEvent)="newSign($event)"
[isPdf]="isPdf()" [id]="activeSignatureTab">
</gd-signature-left-panel>
<div class="doc-panel" *ngIf="file">
<gd-document (drop)="dropSignature($event)" (dragover)="dragOver($event)" class="gd-document" *ngIf="file"
[file]="file" [mode]="false" gdScrollable
[preloadPageCount]="preloadPageCountConfig" gdRenderPrint [htmlMode]="false"></gd-document>
</div>
<gd-init-state [icon]="'signature'" [text]="'Drop file here to upload'" *ngIf="!file"
(fileDropped)="fileDropped($event)">
Click
<fa-icon [icon]="['fas','folder-open']"></fa-icon>
to open file<br>
Or drop file here
</gd-init-state>
<gd-hand-modal></gd-hand-modal>
<gd-stamp-modal></gd-stamp-modal>
</div>
<gd-browse-files-modal (urlForUpload)="upload($event)" [files]="files" (selectedDirectory)="selectDir($event)"
(selectedFileGuid)="selectFile($event, null, browseFilesModal)"
[uploadConfig]="uploadConfig"></gd-browse-files-modal>
<gd-error-modal></gd-error-modal>
<gd-password-required></gd-password-required>
<gd-success-modal></gd-success-modal>
</div>This response shows the source document details or description. When you browse upload a document, it must be rendered at back-end and then you’ve to display the rendered file in the browser.
This is how you generate the source document preview. Later, you have to display the preview in browser using your own business logic.
Hi, Thanks for the update. The link which you shared uses the latest version of groupdocs which is i think 20.3. i am using Groupdocs-signature with spring java which uses 19.1 version. How can i use the latest?
I wanted to share more information about my requirement through this video . Below is the link to it. Please have a look at it. With the update to angular, I am finding it tough to understand the integration.
https://mega.nz/file/hUljGJTQ#0l4sF14kIHsEhsJAA8rsG8sysnU4pShqQ_gWsQDNZoU
As per the link which you shared before, i also tried to call selectFile method in the component.
import { Component, AfterViewInit, Input, ComponentRef } from '@angular/core';
import { SignatureAppComponent, SignatureService, SignatureConfigService, SelectSignatureService, DragSignatureService, RemoveSignatureService, ActiveSignatureService, SignaturesHolderService, CopySignatureService } from '@groupdocs.examples.angular/signature';
import {
FileDescription,
FileModel,
ModalService,
UploadFilesService,
NavigateService,
PagePreloadService,
PageModel,
ZoomService,
RenderPrintService,
FileUtil,
PasswordService,
FileCredentials,
CommonModals,
HostingDynamicComponentService,
AddDynamicComponentService,
OnCloseService,
ExceptionMessageService,
WindowService,
Utils,
TabActivatorService,
TopTabActivatorService
} from "@groupdocs.examples.angular/common-components";
@Component({
selector: 'digi-sign',
templateUrl: './digi-sign.component.html',
styleUrls: ['./digi-sign.component.less','../variables.less']
})
export class DigiSignComponent extends SignatureAppComponent implements AfterViewInit {
constructor( _signatureService: SignatureService,
_modalService: ModalService,
configService: SignatureConfigService,
uploadFilesService: UploadFilesService,
_navigateService: NavigateService,
_zoomService: ZoomService,
pagePreloadService: PagePreloadService,
_renderPrintService: RenderPrintService,
passwordService: PasswordService,
_windowService: WindowService,
_selectSignatureService: SelectSignatureService,
_signatureTabActivationService: TopTabActivatorService,
_hostingComponentsService: HostingDynamicComponentService,
_addDynamicComponentService: AddDynamicComponentService,
_dragSignatureService: DragSignatureService,
_onCloseService: OnCloseService,
removeSignatureService: RemoveSignatureService,
_activeSignatureService: ActiveSignatureService,
_excMessageService: ExceptionMessageService,
_signaturesHolderService: SignaturesHolderService,
_tabActivatorService: TabActivatorService,
copySignatureService: CopySignatureService) {
alert("init");
super( _signatureService,
_modalService,
configService,
uploadFilesService,
_navigateService,
_zoomService,
pagePreloadService,
_renderPrintService,
passwordService,
_windowService,
_selectSignatureService,
_signatureTabActivationService,
_hostingComponentsService,
_addDynamicComponentService,
_dragSignatureService,
_onCloseService,
removeSignatureService,
_activeSignatureService,
_excMessageService,
_signaturesHolderService,
_tabActivatorService,
copySignatureService);
}
@Input() filePath : string;
ngAfterViewInit() {
alert("after init"+ this.filePath);
if(this.filePath !== undefined){
super.selectFile(this.filePath,"","");
}
}
}
Can you please support ?
In this video, application opens the source document selected in step 1 in step 3.
You didn’t browse and open the source file again. The uploaded document is successfully rendered in the third screen.
Hi, I meant to say that with the video is of old version of group docs and i was able to successfully integrate group docs with my application.
Regarding group docs angular app, I integrated it using the link which you provided before
and that component will be invoked in my third screen which is supposed to render the uploaded document. I tried to call selectFile() function as shown below by passing the file path in the ngAfterViewInit() method to render document but it is not working. I have already shared with you the my complete component code above.
Can you please support ?
ngAfterViewInit() {
if(this.filePath !== undefined){
super.selectFile(this.filePath,null," ");
}
}