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

The UI provides a background image preprocessed by the frontend by default.
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.
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.
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')

← Compare PDF Files The Edit Modules in Foxit PDF SDK for Web →