Foxit Developer

Thumbnail Loading Error ​

This component is not available until the thumbnail addon is loaded ​

Starting with version 7.3.0, the thumbnail component was modularized as an addon. Before migrating from earlier versions to 7.3.0 or later, configure the thumbnail component according to your needs. If you migrate without updating the thumbnail setup during initialization, errors appear in the browser console. To see error details, open the browser DevTools and click Run in the upper-right corner of the demo below.

Note: The demo below does not run in legacy browsers.

html
<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>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

Solution ​

Reference the thumbnail addon ​

If you need thumbnails, reference /uix-addons/thumbnail when initializing PDFUI. Example:

html
<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>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

Remove the <thumbnail-sidebar-panel> tag from layout-template ​

If you do not need thumbnails, remove the <thumbnail-sidebar-panel> tag to avoid errors. Example:

html
<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>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}