Custom the signature verification result dialog

This guide will show you how to customize the signature verification result dialog.

Replacing the signature verification result dialog

The default signature verification result dialog will be replaced and the widget and signature_state will be output on the console when the sample code below is executed.

var pdfui = new PDFUI({
    viewerOptions: {
        viewerUI: new class extends UIExtension.XViewerUI {
            getSignatureUI() {
                return Promise.resolve({
                    // Get the customization dialog.
                    getSignVerifiedResultDialog(){
                        return pdfui.getRootComponent().then(rootComponent => rootComponent.querySelector('@custom-dialog'));
                    }
                });
            }
        }()
    },
    fragments:[
        // Remove the menu item used to display the signature result dialog.
        // {
        //     target: 'fv--contextmenu-item-form-sign',
        //     action: UIExtension.UIConsts.FRAGMENT_ACTION.REMOVE
        // },
        // {
        //     target: 'fv--xfa-signature-contextmenu-sign',
        //     action: UIExtension.UIConsts.FRAGMENT_ACTION.REMOVE
        // },
        // Remove the menu item used to display the signature properties dialog.
        {
            target: 'fv--contextmenu-item-form-verify',
            action: UIExtension.UIConsts.FRAGMENT_ACTION.REMOVE
        },
        {
            target: 'fv--xfa-signature-contextmenu-verify',
            action: UIExtension.UIConsts.FRAGMENT_ACTION.REMOVE
        }
    ]
});

// Defined the customization dialog.
class CustomSignedPropertiesDialog extends UIExtension.SeniorComponentFactory.createSuperClass({
    template: `
            <layer name="custom-dialog" 
            class="fv__ui-signedProperty-dialog center" 
            modal="true">
                <layer-header class="fv__ui-signProperty-header" title="dialog.signProperty.title" name="dialog.signProperty.title"></layer-header>
                <div id="result"></div>
            </layer>
    `,
}) {
    static getName() {
        return 'custom-dialog';
    }
    constructor(...arg) {
        super(...arg);
    }
    openWith(annot,res){
        console.log(annot,res);
        this.show();
        this.element.querySelector('#result').innerHTML = res;    
    }
    hide(){
        super.hide();
        console.log(`hide`);
    }
    destroy(){
        super.destroy();
        console.log(`destroy`);
    }
    isOpened(){
        return this.isVisible
    }
}
UIExtension.modular.root().registerComponent(CustomSignedPropertiesDialog);
pdfui.getRootComponent().then(rootComponent=>rootComponent.append('<custom-dialog>'));