<!-- 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:
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:
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
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 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.
WEBDPF SDK supports 4 types of layout, they are flow
, grid
and no
.
By default, the container's layout value is no
.
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 }
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 }
no
layout{ type: 'container component type', layout: 'no' // or this property not be declared }
Currently, WebPDF SDK provides 4 container components: panel
, tab
, groups
, group
{ type: 'panel', layout: 'flow|grid|no', sub: [/*sub components or widgets*/] }
{ type: 'tab', events: { tabactive: function(currentTab, lastTab) { // Triggered after tab switched } }, tabs: [{ name: 'tab name', body: { type: 'panel|groups' } }] }
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 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
.
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 ] }
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' }] }
Components, layouts and controllers customized by developers must be registered to WebPDF.Toolbar.getRegistry()
with a globally unique name.
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:
custom_button: The name of the button to use for configuration and needs to guarantee uniqueness.
doActive: Call when the button is activated. Mainly being used to switch the style state.
doDeactive: Call when the button is deactivated. Mainly being used to switch the style state.
mounted: Call when the button is created. Mainly being used for event binding and initialization
render: Returns a rendered jQuery object for insertion into DOM.
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; } } });
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:
myswitcher: The name of the controller for configuration and needs to guarantee uniqueness
initialize: Will be called when the toolbar initialized. Mainly used for event monitoring and state update.
handle: Will be invoked when this control is triggered. Mainly being used for business logic writing.
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' } }] };
Note:
this.updateComponentsPermission()
function needs to be called to check permissions. If there is no permission, the components will be disabled. See Customize controller example.Below are the tables of permissions and default configurations:
name | description |
---|---|
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 |
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 |