# # 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>'));