# Thumbnail Loading Error
# This component is unavailable until "thumbnail" addon is loaded
With the release of version 7.3.0, the thumbnail component was modularized as an add-on. As thus, before migrating past versions to this version or higher, thumbnail components should be configured according to actual needs. Directly migrated versions without proper changes on thumbnail component will cause an error on your browser console during the initialization phase. To view the details of the error, open the browser DevTools and click run at the top right of the following demo.
Note: the following demo doesn't run on legacy browsers.
<html>
<template id="layout-template">
<webpdf>
<toolbar name="toolbar">
<div style="display: flex; flex-direction: row; padding: 6px;">
<open-file-dropdown></open-file-dropdown>
<download-file-button></download-file-button>
</div>
</toolbar>
<div class="fv__ui-body">
<sidebar>
<commentlist-sidebar-panel></commentlist-sidebar-panel>
<thumbnail-sidebar-panel></thumbnail-sidebar-panel>
</sidebar>
<viewer @zoom-on-pinch @zoom-on-doubletap @zoom-on-wheel @touch-to-scroll></viewer>
</div>
<template name="template-container">
<fpmodule:file-property-dialog></fpmodule:file-property-dialog>
<!-- contextmenus
<page-contextmenu></page-contextmenu>
<default-annot-contextmenu></default-annot-contextmenu>
<markup-contextmenu></markup-contextmenu>
-->
</template>
</webpdf>
</template>
<script>
var CustomAppearance = PDFViewCtrl.shared.createClass({
getLayoutTemplate: function() {
var template = document.getElementById('layout-template');
return template.innerHTML;
},
beforeMounted: function(rootComponent) {
this.rootComponent = rootComponent;
this.toolbarComponent = rootComponent.getComponentByName('toolbar');
},
disableAll: function() {
this.toolbarComponent.disable();
},
enableAll: function() {
this.toolbarComponent.enable();
}
}, UIExtension.appearances.Appearance);
var libPath = window.top.location.origin + '/lib';
var pdfui = new UIExtension.PDFUI({
viewerOptions: {
libPath: libPath,
jr: {
licenseSN: licenseSN,
licenseKey: licenseKey
},
},
renderTo: document.body,
appearance: CustomAppearance,
addons: [
libPath + '/uix-addons/file-property',
]
});
</script>
</html>
{
"iframeOptions": {
"style": "height: 500px"
}
}
# Solutions
# Reference thumbnail addon
If you need Thumbnails, you should reference /uix-addons/thumbnail when initializing PDFUI. Below is the code example:
<html>
<template id="layout-template">
<webpdf>
<toolbar name="toolbar">
<div style="display: flex; flex-direction: row; padding: 6px;">
<open-file-dropdown></open-file-dropdown>
<download-file-button></download-file-button>
</div>
</toolbar>
<div class="fv__ui-body">
<sidebar>
<commentlist-sidebar-panel></commentlist-sidebar-panel>
<thumbnail-sidebar-panel></thumbnail-sidebar-panel>
</sidebar>
<viewer @zoom-on-pinch @zoom-on-doubletap @zoom-on-wheel @touch-to-scroll></viewer>
</div>
<template name="template-container">
<fpmodule:file-property-dialog></fpmodule:file-property-dialog>
<!-- contextmenus -->
<page-contextmenu></page-contextmenu>
<default-annot-contextmenu></default-annot-contextmenu>
<markup-contextmenu></markup-contextmenu>
</template>
</webpdf>
</template>
<script>
var CustomAppearance = PDFViewCtrl.shared.createClass({
getLayoutTemplate: function() {
var template = document.getElementById('layout-template');
return template.innerHTML;
},
beforeMounted: function(rootComponent) {
this.rootComponent = rootComponent;
this.toolbarComponent = rootComponent.getComponentByName('toolbar');
},
disableAll: function() {
this.toolbarComponent.disable();
},
enableAll: function() {
this.toolbarComponent.enable();
}
}, UIExtension.appearances.Appearance);
var libPath = window.top.location.origin + '/lib';
var pdfui = new UIExtension.PDFUI({
viewerOptions: {
libPath: libPath,
jr: {
licenseSN: licenseSN,
licenseKey: licenseKey
},
},
renderTo: document.body,
appearance: CustomAppearance,
addons: [
libPath + '/uix-addons/file-property',
libPath + '/uix-addons/thumbnail'
]
});
</script>
</html>
{
"iframeOptions": {
"style": "height: 500px"
}
}
# Delete the tag <thumbnail-sidebar-panel> in the layout-template section.
If you don't need thumbnail, then you should delete <thumbnail-sidebar-panel>tag to avoid the error. Below is the code example:
<html>
<template id="layout-template">
<webpdf>
<toolbar name="toolbar">
<div style="display: flex; flex-direction: row; padding: 6px;">
<open-file-dropdown></open-file-dropdown>
<download-file-button></download-file-button>
</div>
</toolbar>
<div class="fv__ui-body">
<sidebar>
<commentlist-sidebar-panel></commentlist-sidebar-panel>
<!-- <thumbnail-sidebar-panel></thumbnail-sidebar-panel> -->
</sidebar>
<viewer @zoom-on-pinch @zoom-on-doubletap @zoom-on-wheel @touch-to-scroll></viewer>
</div>
<template name="template-container">
<fpmodule:file-property-dialog></fpmodule:file-property-dialog>
<!-- contextmenus -->
<page-contextmenu></page-contextmenu>
<default-annot-contextmenu></default-annot-contextmenu>
<markup-contextmenu></markup-contextmenu>
</template>
</webpdf>
</template>
<script>
var CustomAppearance = PDFViewCtrl.shared.createClass({
getLayoutTemplate: function() {
var template = document.getElementById('layout-template');
return template.innerHTML;
},
beforeMounted: function(rootComponent) {
this.rootComponent = rootComponent;
this.toolbarComponent = rootComponent.getComponentByName('toolbar');
},
disableAll: function() {
this.toolbarComponent.disable();
},
enableAll: function() {
this.toolbarComponent.enable();
}
}, UIExtension.appearances.Appearance);
var libPath = window.top.location.origin + '/lib';
var pdfui = new UIExtension.PDFUI({
viewerOptions: {
libPath: libPath,
jr: {
licenseSN: licenseSN,
licenseKey: licenseKey
},
},
renderTo: document.body,
appearance: CustomAppearance,
addons: [
libPath + '/uix-addons/file-property',
]
});
</script>
</html>
{
"iframeOptions": {
"style": "height: 500px"
}
}