Foxit PDF SDK For Web - V11.0.1

# Customize Signature UI

# Overview

Starting from version 11.0.0, Foxit PDF SDK for Web provides a complete set of customizable APIs for signature UI. By implementing IViewerUI and related APIs, developers can easily customize the signature, signature verification, and signature property display functionalities. These APIs are internally invoked by Foxit PDF SDK for Web, and developers only need to implement the required functionalities according to the APIs specifications.

# Core APIs Description

# IViewerUI.getSignatureUI()

# Function Description

  • Get the digital signature UI management instance, which is used to access signature-related dialog APIs
  • This API is internally invoked by Foxit PDF SDK for Web. Developers only need to implement this method and return an ISignatureUI instance

# Method Definition

getSignatureUI(): Promise<ISignatureUI>;

# ISignatureUI

# Function Description

  • Signature Functionality UI Control API, applicable to version 11.0.0 and later
  • This API provides access to three essential dialog boxes related to signature functionality
  • This API is called internally by Foxit PDF SDK for Web. Developers are required to implement the following methods

# Method List

Method Return Type Description
getSignDocumentDialog() Promise<ISignDocDialog> Return an instance of the document signature dialog
getSignVerifiedResultDialog() Promise<ISignVerifiedResultDialog> Return an instance of the signature verification result dialog
getSignedPropertiesDialog() Promise<ISignedSignaturePropertiesDialog> Returns an instance of the signed signature properties dialog

# Explanation of Dialog APIs

# Document Sign(ISignDocDialog)

# Function Description

  • This dialog is used for handling document signature
  • This API is called internally by Foxit PDF SDK for Web. Developers are required to implement the following methods

# Method Description

interface ISignDocDialog {
    // Open Signature Dialog
    openWith(
        signature: Widget,
        okCallback: (data: SignDocInfo) => Promise<void> | void,
        cancelCallback?: () => Promise<void> | void
    ): Promise<void>;

    // Check if the dialog is already open
    isOpened(): boolean;

    // Get the current signature component
    getCurrentSignature(): Widget | undefined;

    // Hide the dialog
    hide(): void;

    // Release resources
    destroy(): void;
}

# Example

class CustomSignDocDialog implements ISignDocDialog {
    private isDialogOpen = false;
    private currentSignature: Widget | undefined;

    async openWith(
        signature: Widget,
        okCallback: (data: SignDocInfo) => Promise<void> | void,
        cancelCallback?: () => Promise<void> | void
    ) {
        this.isDialogOpen = true;
        this.currentSignature = signature;
        
        // Implement custom dialog logic  
        showCustomSignDialog(signature, okCallback, cancelCallback);
    }

    isOpened(): boolean {
        return this.isDialogOpen;
    }

    getCurrentSignature() {
        return this.currentSignature;
    }

    hide() {
        this.isDialogOpen = false;
        hideCustomSignDialog();
    }

    destroy() {
        this.hide();
        cleanupResources();
    }
}

# Signature Verification Result (ISignVerifiedResultDialog)

# Function Description

  • This dialog is used to display the signature verification results
  • This API is called internally by Foxit PDF SDK for Web. Developers are required to implement the following methods

# Method Description

interface ISignVerifiedResultDialog {
    // Display the signature verification result 
    openWith(signature: ISignatureField): Promise<void>;
    
    // Check if the dialog is already open  
    isOpened(): boolean;

    // Get the current signature field  
    getCurrentSignature(): ISignatureField | undefined;

    // Hide the dialog
    hide(): void;

    // Release resources
    destroy(): void;
}

# Example

class CustomVerifyDialog implements ISignVerifiedResultDialog {
    private isDialogOpen = false;
    private currentSignature: ISignatureField | undefined;

    async openWith(signature: ISignatureField) {
        this.isDialogOpen = true;
        this.currentSignature = signature;
        
        // Implement custom logic for displaying signature verification results
        showCustomVerifyResult(signature);
    }

    isOpened(): boolean {
        return this.isDialogOpen;
    }

    getCurrentSignature() {
        return this.currentSignature;
    }

    hide() {
        this.isDialogOpen = false;
        hideCustomVerifyResult();
    }

    destroy() {
        this.hide();
        cleanupResources();
    }
}

# Signature Properties (ISignedSignaturePropertiesDialog)

# Function Description

  • This dialog is used to display the properties of signed fields
  • This API is called internally by Foxit PDF SDK for Web. Developers are required to implement the following methods

# Method Description

interface ISignedSignaturePropertiesDialog {
    // Open the signed signature properties dialog
    openWith(signature: ISignatureField): Promise<void>;

    // Check if the dialog is already open
    isOpened(): boolean;

    // Hide the dialog
    hide(): void;

    // Release resources
    destroy(): void;
}

# Example

class CustomPropertiesDialog implements ISignedSignaturePropertiesDialog {
    private isDialogOpen = false;

    async openWith(signature: ISignatureField) {
        this.isDialogOpen = true;
        
        // Implement custom logic for displaying signed signature properties  
        showCustomSignatureProperties(signature);
    }

    isOpened(): boolean {
        return this.isDialogOpen;
    }

    hide() {
        this.isDialogOpen = false;
        hideCustomSignatureProperties();
    }

    destroy() {
        this.hide();
        cleanupResources();
    }
}

# Integration Example

class CustomSignatureUI implements ISignatureUI {
    async getSignDocumentDialog() {
        return new CustomSignDocDialog();
    }

    async getSignVerifiedResultDialog() {
        return new CustomVerifyDialog();
    }

    async getSignedPropertiesDialog() {
        return new CustomPropertiesDialog();
    }
}

class CustomViewerUI extends PDFViewCtrl.IViewerUI {
    async getSignatureUI() {
        return new CustomSignatureUI();
    }
}

// Inject custom UI during initialization 
new PDFViewer({
    viewerUI: new CustomViewerUI(),
    // Other configurations...
});

# Notes

  1. API Implementation Standards

    • All methods must be implemented strictly according to the API definition
    • Ensure that the return values match the types defined in the API

  2. Resource Management

    • Release all related resources in the destroy() method
    • Avoid memory leaks

  3. Asynchronous Handling

    • Ensure all asynchronous methods properly handle Promises
    • Promise Resolve the Promise only after the operation is completed

  4. Compatibility

    • Ensure that the implemented functionality is consistent with the default behavior of Foxit PDF SDK for Web
    • Avoid disrupting the existing signature workflow

Through the implementation of the above APIs, developers can fully customize the signature-related UI while ensuring seamless integration with the Foxit PDF SDK for Web.

← Signature Workflow →