');
$container.addClass('custom_layout');
elements.forEach(function(elm){
var $item = $('
');
$item.addClass('custom_layout_item')
$item.append(elm);
$container.append($item);
});
return $container;
}
}
});
```
### Customize controller example
```js
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.
### How to use customized extensions
```js
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：
**Note:**
- Before registering components, layouts and controllers, you must ensure that WebPDF SDK is ready.
- After the component's status is updated, the `this.updateComponentsPermission()` function needs to be called to check permissions. If there is no permission, the components will be disabled. See Customize controller example.
## 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|
|highlightarea|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|