# Introduction to addons
In the /lib/uix-addons directory, Foxit PDF SDK for Web provides a set of rich addons that can be freely combined. The following structure lists the currently supported addons. Each addon can be loaded individually or in combination as needed.
uix-addons
├── aria ----- Make components support ARIA standards
├── comparison ----- Provides the function of comparing PDF documents
├── edit-graphics ----- Edit page objects
├── export-form ----- Export form
├── file-property ----- Used to display PDF file
├── form-designer ----- Provides form editing function
├── form-to-sheet ----- Provides functionality for form-to-sheet conversion
├── full-screen ----- Full screen
├── h-continuous ----- Horizontal continuous page mode
├── h-facing ----- Horizontal facing mode for the cover
├── h-single ----- Horizontal single page mode
├── import-form ----- Import form
├── javascript-form ----- Add, modify and test JavaScript within the document
├── manage-comments ----- Provides a series of functions to control the list of comments
├── multi-media ----- Provides the function of adding audio and video annotations
├── page-template ----- Provides the function of editing page templates
├── password-protect ----- Password protection
├── path-objects ----- Edit path objects
├── preview ----- Supports output preview feature
├── print ----- Print PDF pages function
├── range-input ----- Provides range-input component.
├── read-aloud ----- Read aloud UI components
├── recognition-form ----- Form field recognition
├── redaction ----- Redaction
├── rotate-pages ----- Rotate pages
├── search ----- Text search function
├── text-object ----- Edit text objects
├── thumbnail ----- Provides the function of thumbnail sidebar
├── undo-redo ----- Undo and redo
├── xfa-form ----- Provides the function of editing static XFA form
├── dynamic-xfa ----- Provides the function of editing dynamic XFA form
├── allInOne.js ----- Collection of all add-ons
└── allInOne.mobile.js ----- Collection of all add-ons that support mobile
# Dependency Hierarchy
In order to avoid repeating registration and execution of the same functions in different addons, the functions will be extracted into separate addons, and then passively loaded as dependencies.
edit-graphics
├── path-objects
└── text-object
When the application loads path-objects or text-object, edit-graphics will also be loaded and only loaded once.
# Load Addons
# Load addons individually
You can load all available addons or a few specific addons individually.
Code Example:
<script src="path/to/UIExtension.full.js"></script>
<script>
var pdfui = new UIExtension.PDFUI({...
addons:[
"path/to/customized-addon/addon.info.json",
"path/to/lib/multi-media/addon.info.json",
...
],
...
})
</script>
The file /examples/UIExtension/complete_webViewer/index.html also provides an example to show how to load all addons individually.
# Load addons in combination
In the network environment, downloading too many addons would increase the HTTP requests. To minimize the number of HTTP requests, you may prefer loading all addons in a single file. We provide two script files allInOne.js (for PC) and allInOne.mobile.js (for mobile) which are a combination of all addons. Besides, you can use our merge addons tools to tailor addons.
# The addon's structure
# The entry file -- addon.info.json
The addon.info.json is the addon entry file, which includes the addon's library name, i18n sources and css files.
Example:
{
"library": "ExampleUIXAddon",
"i18n": {
"ns": "example",
"sources": {
"en-US": "./locales/en-US.json",
"zh-CN": "./locales/zh-CN.json"
}
},
"css": [
"./index.css"
]
}
# The "i18n" sources
This item is used to configure localization. "ns" specifies namespace. "sources" specifies files.
After configuration, you can use [i18n-namespace]:[i18n-key] to implement localization.
In the case below, i18n namespace is "example", "i18n-key" could be "toolbar.title", "dialog.title" or "buttons.addText"(Refer to zh-CN.json for details).
<h6>example:dialog.title</h6>
will be translated to
<h6>Dialog title</h6>
and
<h6>对话框标题 Dialog title</h6>
# The "css" field
This item specifies style sheets("index.css" is the output of style-loader). Currently only CSS is supported.
# allInOne.js and allInOne.mobile.js
The allInOne.js is a script file that contains all currently supported addons for PC, and the allInOne.mobile.js is for mobile. They are provided for your convenience to load addons in a combination way. The difference between them is that form-designer and text-object addons are not available in mobile.
# Load allInOne.js and allInOne.mobile.js
<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script src="path/to/allInOne.mobile.js"></script>
<script>
var pdfui = new UIExtension.PDFUI({...
addons:UIXAddons, // UIXAddons is the library name in allInOne.js
...
})
</script>
# Loading custom addInOne.js
The default allInOne.js (for PC) and allInOne.mobile.js (for mobile) combine all currently supported addons into a single script. You can detach the unwanted addon by UIXAddons(UIExtension).filter and then load them to web viewer.
For example:
<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
UIXAddons = UIXAddons(UIExtension).filter(addon=>addon.getName()!= 'editTextObject')
var pdfui = new UIExtension.PDFUI({...
addons:UIXAddons,
...
})
</script>
# Merge addons
If you want to merge addons by yourself or rebuild allInOne.js or allInOne.mobile.js to merge your selected addons, you can use our merge addon tools addon loader and gulp plugin. Check out the links below for details.
You can also refer to /examples/UIExtension/use-merged-addon for usage.
# Develop custom addons
The /examples/UIExtension/scaffoldDemo/ is a scaffold project that contains an open source addon example. You may refer to the /examples/UIExtension/scaffoldDemo/readme.md file in that directory to start developing your own addons.