Custom signature UI

Overview

Starting in 11.0.0, Foxit PDF SDK for Web provides a full set of APIs to customize signature UI. Implement IViewerUI and related interfaces to customize signing, verification, and signature property dialogs. Foxit PDF SDK for Web calls these interfaces internally; implement them according to the contract.

Core interfaces

IViewerUI.getSignatureUI()

Description

• Returns the digital signature UI manager for signature-related dialogs.
• Called internally by Foxit PDF SDK for Web; implement this method and return an ISignatureUI instance.

Definition

getSignatureUI(): Promise<ISignatureUI>;

ISignatureUI

Description

• Top-level UI interface for signature features (11.0.0 and later).
• Provides access to three core dialogs.
• Called by Foxit PDF SDK for Web; implement the methods below.

Methods

Method	Return type	Description
getSignDocumentDialog()	Promise<ISignDocDialog>	Document signing dialog
getSignVerifiedResultDialog()	Promise<ISignVerifiedResultDialog>	Verification result dialog
getSignedPropertiesDialog()	Promise<ISignedSignaturePropertiesDialog>	Signed field properties dialog

Dialog interfaces

Document signing (ISignDocDialog)

Description

• Handles document signing.
• Called by Foxit PDF SDK for Web; implement the methods below.

Methods

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

    // Whether the dialog is open
    isOpened(): boolean;

    // Current signature widget
    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;

        // 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();
    }
}

Verification result (ISignVerifiedResultDialog)

Description

• Shows signature verification results.
• Called by Foxit PDF SDK for Web; implement the methods below.

Methods

interface ISignVerifiedResultDialog {
    // Show verification result
    openWith(signature: ISignatureField): Promise<void>;

    // Whether the dialog is open
    isOpened(): boolean;

    // 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;

        // Custom verification UI
        showCustomVerifyResult(signature);
    }

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

    getCurrentSignature() {
        return this.currentSignature;
    }

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

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

Signature properties (ISignedSignaturePropertiesDialog)

Description

• Shows properties of a signed field.
• Called by Foxit PDF SDK for Web; implement the methods below.

Methods

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

    // Whether the dialog is 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;

        // Custom properties UI
        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 at initialization
new PDFViewer({
    viewerUI: new CustomViewerUI(),
    // Other options...
});

Notes

1. Implementation

   • Implement all methods as defined in the interfaces.
   • Return types must match the interface.

2. Resource management

   • Release resources in destroy().
   • Avoid memory leaks.

3. Async

   • Handle Promises correctly in async methods.
   • Resolve only after the operation completes.

4. Compatibility

   • Behavior should remain compatible with the default Foxit PDF SDK for Web signing flow.
   • Do not break existing signing steps.

With these interfaces you can fully customize signature-related UI while staying integrated with Foxit PDF SDK for Web.