Usage

Create toolbar with default config

<!-- Include 'toolbar-config.bundle.js',  a global variable will be defined to store default toolbar config which names 'window.toolbarConfig'  -->
<script src="/scripts/control/toolbar/toolbar-config.bundle.js"></script>
<!-- Initialize toolbar with default config after WebPDF SDK is ready -->
<script>
    var docViewerId = 'docViewer';
    WebPDF.ready(/*parameters*/).then(function(){
        new WebPDF.Toolbar(window.toolbarConfig, docViewerId).initialize();
    });
</script>

This is how the default toolbar looks like:
default toolbar

Customize

Foxit WebPDF SDK allows developers to customize their toolbar's configuration. The toolbar's configuration is divided into two parts: top and bottom. This is how the toolbar elements look in your application:
top and bottom toolbar

And their configuration structure should be:

window.toolbarConfig = {
    top: {...},
    bottom: {...}
}

If you only need to customize the top toolbar, you can use the code below:

var docViewerId = 'docViewer';
WebPDF.ready(/*parameters*/).then(function(){
    window.toolbarConfig.top = {
        type: 'panel',
        name: 'toolbar',
        layout: 'flow',
        gap: 'md',
        sub: [{
            extend: 'hand'
        },{
            extend: 'save'
        }, {
            extend: 'distance'
        }, {
            extend: 'screen'
        }]
    };
    new WebPDF.Toolbar(window.toolbarConfig, docViewerId).initialize();
});

And the output will be:

WebPDF SDK provides many default component configurations, you can extend them by name and overwrite some properties if you wish to. To see all the internal default configurations names, please refer to the end of this article. default configurations table

Components and relative configurations

Common structure

All component types support the type and name properties:

{
    type: 'the type of component',
    name: 'an identifier of this component, it must be globally unique'
}

Container components

Container is a specialized component type that acts as a way to organize and hold components. Its layout provides a way to organize and display subcomponents.

Layout

WEBDPF SDK supports 4 types of layout, they are flow, grid and no.
By default, the container's layout value is no.

  1. flow layout
    {
        type: 'container component type',
        layout: 'flow',
        orientation: 'horizontal|vertical', // default `horizontal`
        gap: 'sm|md|lg', // sm -> small gap, md -> medium gap, lg -> large gap, by default no gap
    }
    
  2. grid layout
    {
        type: 'container component type',
        layout: 'grid',
        cols: 3, // columns count
        width: 100, // width of container in px
        height: 100 // height of container in px
    }
    
  3. no layout
    {
        type: 'container component type',
        layout: 'no' // or this property not be declared
    }
    
supported container components

Currently, WebPDF SDK provides 4 container components: panel, tab, groups, group

  1. panel
    {
        type: 'panel',
        layout: 'flow', // or 'grid'  or 'no'
        sub: [/*sub components or widgets*/]
    }
    
  2. tab
    {
        type: 'tab',
        events: {
            tabactive: function(currentTab, lastTab) {
                // Triggered after tab switched
            }
        },
        tabs: [{
            name: 'tab name',
            body: {
                type: 'panel|groups'
            }
        }]
    }
    
  3. groups and group
    group can't exist independently of other components, it must be configured as the subcomponent of groups. The layout property is not supported for groups, only for the group component.
    {
        type: 'groups',
        groups: [{
            sub: [],
            layout: 'flow',
            gap: 'md'
        }, {
            sub: [],
            layout: 'grid',
            cols: 3,
            width: 100,
            height: 100
        }]
    }
    

Widgets

Widgets are components that allows user to click, select files and then trigger handle event to controller. Foxit WebPDF SDK supports 3 types of widgets: button, fileSelector, dropdown.

  1. This is the configuration structure of button and fileSelector
    {
        type: 'button|fileSelector',
        tip: 'The title of the tooltip',
        tipdesc: 'text of the tooltip',
        text: 'text of button',
        cls: 'the class of button',
        iconCls: 'the class of button\'s icon',
        handler: 'click event handler',
        events: {
            before: function(component, config, data){}, // Call before click event handle
            after: function(component, config, data){} // Call after click event handler
        },
        params: {
            // parameters
        },
        permissions: [
            // list of required permissions 
        ]
    }
    
  2. Configuration structure of dropdown:
    {
        type: 'dropdown',
        inline: true, // false
        tip: 'The title of the tooltip',
        tipdesc: 'text of the tooltip',
        text: 'text of dropdown button',
        cls: 'class of dropdown button',
        iconCls: 'icon class of dropdown button',
        handler: 'click event handler name',
        buttons: [{
            type: 'dropdownItem', // optional, fixed value.
    
            tip: 'The title of the tooltip',
            tipdesc: 'text of the tooltip',
            text: 'text of dropdown item',
            iconCls: 'icon class of dropdown item',
    
            showtip: true, // whether or not show tooltip on mouse over.
            isAdditive: true,// Whether or not can be selected, if not, once user select this item, dropdown button will switch to this item, the otherwise not.
            isFileSelector: true, // whether or not a file selector. if true, it allows user to select local file.
            accept: '.fdf,.xfdf', // accept file formats of file selector.
            handler: 'name of click event handler'
        }]
    }
    

Toolbar extension

Components, layouts and controllers customized by developers must be registered to WebPDF.Toolbar.getRegistry() with a globally unique name.

Customize Component example

WebPDF.Toolbar.getRegistry().registerComponent('custom_button', {
    'constructor': function(options){
        this.superclass.call(this, options);
        this.text = options.text;
    },
    methods: {
        doActive: function() {
            this.$element.css('background', '#d7bae7');
        },
        doDeactive: function() {
            this.$element.css('background', 'transparent');
        },
        mounted: function() {
            var self = this;
            this.$element.click(function(){
                self.trigger('handle');
            });
        },
        render: function(){
            return $('<button>').addClass('button-custom').text(this.text);
        }
    }
});

Note:

Customize layout example

WebPDF.Toolbar.getRegistry().registerLayout('custom_layout', {
    'constructor': function(options){
        this.superclass.call(this, options);
    },
    methods: {
        render: function(elements) {
            var $container = $('<div>');
            $container.addClass('custom_layout');
            elements.forEach(function(elm){
                var $item = $('<div>');
                $item.addClass('custom_layout_item')
                $item.append(elm);
                $container.append($item);
            });
            return $container;
        }
    }
});

Customize controller example

WebPDF.Toolbar.getRegistry().registerController('myswitcher', {
    'constructor': function(application) {
        this.superclass.call(this, application);
    },
    methods: {
        initialize: function(){
            var self = this;
            self.uber.initialize.call(self);

            self.watch('currentToolName', function(toolName) {
                self.components.forEach(function(component) {
                    var componentToolName = component._config.params.toolname;
                    if (componentToolName == toolName) {
                        component.active();
                    } else if (component.isActive) {
                        component.deactive();
                    }
                });
                self.updateComponentsPermission(); // do deactive if has no permission
            });
        },
        handle: function(component, config, data) {
            var toolname = config.params.toolname;
            WebPDF.ViewerInstance.setCurrentToolByName(toolname);
        },
    }
});

Note:

How to use customized extensions

window.toolbarConfig.top = {
    type: 'panel',
    layout: 'custom_layout', // custom layout's name
    sub: [{
        type: 'custom_button', // custom button's name
        handler: 'myswitcher', // custom handler's name
        text: 'Hand',
        params: {
            toolname: 'Hand'
        }
    }, {
        type: 'custom_button',
        handler: 'myswitcher',
        text: 'Distance',
        params: {
            toolname: 'Distance Tool'
        }
    }]
};

Output:

customize toolbar

Note:

Tables

Below are the tables of permissions and default configurations:

  1. Permissions
name description
print print pdf permission
download download permission
offline offline permission
shareDocument share document permission
passwordProtect password protect
save save document permission
annot add annot permission
sign write inksign permission
form form permission
exportform export form permission
modifiable whether modifiable
ppo ppo permission
edittext edittext permission
  1. Default configurations
name component type
save button
hand button
distance button
stamp button
selecttext dropdownItem
selectannot dropdownItem
importform button
exportform button
typewriter button
highlight button
hightlightarea button
strikeOut button
underline button
squiggly button
replace button
caret button
note button
callout button
textbox button
rectangle button
polyling button
cloud button
circle button
arrow button
polygon button
line button
pencel button
edittext button
addtext button
screen button
importfile dropdown
exportfile dropdown
showhidecomments dropdown
markRedaction button
applyRedaction button
inksign button
passwordprotect button