# # Customize Dynamic Stamps

## # Differences between dynamic stamps and standard stamps

Type | Dependencies | Files that need to be prepared | Support to set
--- | --- | --- | ---
Dynamic stamps | The uix-addons/customer-dynamic-stamp is required. By default, this addon is included in AllInOne.js. If you are not using AllInOne.js, ensure that this addon is referenced in the PDFUI initialization. | image | Support to set background image, text, font, color and its position
Standard stamps | none | PDF and svg | image

## # The process for creating a custom dynamic stamp

We provide a default dynamic stamp operation process in the Complete WebViewer (hereinafter referred to as UI). You can experience this feature by clicking Comment-> Create-> Create Dynamic Stamp. The logical flow of this implementation is as follows:

1. The UI provides a background image preprocessed by the frontend by default.

2. After the user inputs the required category, name and text of the dynamic stamp, the UI will transfer this data to the PDF Data layer.

3. According to the data received from the step #1 and step #2, the PDF Data layer draws preprocessed image and generates a text form field, updates the form field data in real time, exports the images, and sends them to the UI layer as an icon of the stamp list.

4. When the user selects the dynamic stamp icon created in step #3 from the stamp list and then clicks on the page to create stamp, the stamp data will be synchronized with the PDF data layer, which indicates that the dynamic stamp has been created successfully.

## # Create a custom dynamic stamp

### # Create a custom dynamic stamp through UI

Users can create a custom dynamic stamp directly by clicking comment-> Create-> Create Dynamic Stamp on the UI. Among them, the background image of the dynamic stamp can be passed in and managed by the user through the interfaces. The following code shows how to manage the background image of dynamic stamp by importing or deleting operations and so on.

    // Get the dropdown component of custom dynamic stamp template
    const templates = await pdfui.getComponentByName("stamp-templates");
    // Import the dropdown button and its callback function through append method
    templates.append("<dropdown-button name='test' url='xxx.png'>test</dropdown-button>", [{
        target: 'test',
        config: {
            // Set the callback function
            callback: async function () {
                // Get the dialog component of custom dynamic stamp
                const dialog = await pdfui.getComponentByName("fv--custom-dynamic-stamp-dialog")
                // Set the corresponding template information
                dialog.controller.selectTemplate({ name: 'test', url: "xxx.png" })
            }
        }
    }])

### # Create a custom dynamic stamp through APIs

##### # Add a custom dynamic stamp

    var param = [{
         category:'stamp',
         name:'MyStamp',
         fileData:'http://stamp.png',
         field:{
            textType:PDFViewCtrl.PDF.constant.STAMP_TEXT_TYPE.CUSTOM_TEXT,
            value:'custom text', // the custom text
            font:{ // optional
                name:'Helvetica', //font family
                color:0, // text color
            },
            rect:{  // pdfRect
                left:0,
                right:30,
                top:30,
                bottom:0,
            }
         },
    }]
    // Add a custom dynamic stamp
    pdfui.callAddonAPI( 'CustomDynamicStamp',  'setDynamicStamp',[param])

##### # Remove a custom dynamic stamp

    var param = [{
        category:'stamp',// The directory of the dynamic stamp
        names:[
            'MyStamp', // The name of the dynamic stamp
        ]
    }]
    // Remove a custom dynamic stamp
    pdfui.callAddonAPI( 'CustomDynamicStamp',  'removeDynamicStamp',[param])

##### # Get all custom dynamic stamps

    // Get dynamic stamps
    pdfui.callAddonAPI( 'CustomDynamicStamp',  'getDynamicStamp')