# # 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.