Foxit Developer

Sidebar component ​

Example code ​

Basic example ​

html
<html>
<template id="layout-template">
    <webpdf>
        <div class="btn-container">
            <xbutton @controller="custom:SidebarActionController" action="collapse">collapse</xbutton>
            <xbutton @controller="custom:SidebarActionController" action="collpase.totally">collapse totally</xbutton>
            <xbutton @controller="custom:SidebarActionController" action="expand">expand</xbutton>
            <xbutton @controller="custom:SidebarActionController" action="active.layers">active layers panel</xbutton>
            <xbutton @controller="custom:SidebarActionController" action="active.bookmark">active bookmark panel
            </xbutton>
        </div>
        <div class="fv__ui-body">
            <sidebar name="my-sidebar">
                <sidebar-panel name="sidebar-layers" icon-class="fv__icon-sidebar-page-manager"
                               title="Layers"></sidebar-panel>
                <sidebar-panel name="sidebar-bookmark" active icon-class="fv__icon-sidebar-bookmark"
                               title="Bookmark"></sidebar-panel>
            </sidebar>
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<style>
    .btn-container {
        display: flex;
        padding: 10px 0;
    }

    .btn-container > .fv__ui-button + .fv__ui-button {
        margin-left: 20px;
    }
</style>
<script>
    UIExtension.PDFUI.module('custom', [])
            .controller('SidebarActionController', {
                handle: function () {
                    var action = this.component.getAttribute('action');
                    var sidebar = this.getComponentByName('my-sidebar');
                    switch (action) {
                        case 'collapse':
                            sidebar.collapse();
                            break;
                        case 'collpase.totally':
                            sidebar.collapseTotally();
                            break;
                        case 'expand':
                            sidebar.expand();
                            break;
                        case 'active.layers':
                            sidebar.getComponentByName('sidebar-layers').active();
                            break;
                        case 'active.bookmark':
                            sidebar.getComponentByName('sidebar-bookmark').active();
                            break;
                    }
                }
            })
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    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: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}
html
<html>
<template id="layout-template">
    <webpdf>
        <p> Use a fixed pixel value as the initial width
        <p>
        <div>
            <sidebar width="500" open>
                <sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                <sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
            </sidebar>
        </div>
        <p> Use the scale value of window.innerWidth as the initial width </p>
        <div>
            <sidebar width="0.5" open>
                <sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                <sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
            </sidebar>
        </div>
        <div class="hide">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    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: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

Expand and collapse the sidebar ​

html
<html>
<template id="layout-template">
    <webpdf>
        <p>Expand sidebar by default</p>
        <div>
            <sidebar open>
                <sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                <sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
            </sidebar>
        </div>
        <p>Collapse sidebar by default/p>
        <div>
            <sidebar>
                <sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                <sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
            </sidebar>
        </div>
        <div class="hide">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    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: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

Hover over a button to show tooltip text.

html
<html>
<template id="layout-template">
    <webpdf>
        <div>
            <sidebar open>
                <sidebar-panel @tooltip tooltip-title="Layers sidebar panel" tooltip-placement="right"
                               icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                <sidebar-panel @tooltip tooltip-title="Bookmark sidebar panel" tooltip-placement="right" active
                               icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
            </sidebar>
        </div>
        <div class="hide">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    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: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

Insert a sidebar panel dynamically with JavaScript ​

html
<html>
<template id="layout-template">
    <webpdf>
        <div>
            <xbutton @controller="custom:InsertSidebarController">Add sidebar panel</xbutton>
        </div>
        <div>
            <sidebar open name="sidebar-component-name">
                <sidebar-panel @tooltip tooltip-title="Layers sidebar panel" tooltip-placement="right"
                               icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                <sidebar-panel @tooltip tooltip-title="Bookmark sidebar panel" tooltip-placement="right" active
                               icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
            </sidebar>
        </div>
        <div class="hide">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<script>
    UIExtension.PDFUI.module('custom', [])
            .controller('InsertSidebarController', {
                mounted: function () {
                    this.count = 0;
                },
                handle: function () {
                    if (this.count >= 3) {
                        return;
                    }
                    this.count++;
                    this.getPDFUI().getComponentByName('sidebar-component-name')
                            .then(sidebar => {
                                sidebar.append(
                                        '<sidebar-panel icon-class="fv__icon-sidebar-bookmark" title="Dynamic sidebar panel"></sidebar-panel>'
                                );
                            })
                }
            });
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    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: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 300px"
  }
}

API ​

Template example:

html
<!-- The width value smaller than 1 means that is a scale value of window.innerWidth -->
<sidebar open width="500">
    <sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
    <sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
</sidebar>

sidebar template attributes:

AttributeDescriptionTypeDefaultVersion
openExpanded statebooleanfalse7.0.0
widthIf the expanded sidebar width is greater than or equal to 1, it is treated as pixels; if less than 1, it is multiplied by window.innerWidth for responsive widthnumber310px7.0.0

sidebar-panel attributes:

AttributeDescriptionTypeDefaultVersion
titleString shown at the top of the expanded sidebar panelstring''7.0.0
activeWhether the sidebar panel is activebooleanfalse7.0.0

sidebar object properties:

PropertyDescriptionType
disabledWhether the sidebar is disabledboolean
isVisibleWhether the sidebar is visibleboolean
statusOne of three states:
'SidebarComponent.STATUS_COLLAPSED'
'SidebarComponent.STATUS_COLLAPSED_TOTALLY'
'SidebarComponent.STATUS_EXPANDED'		string

sidebar-panel object properties:

PropertyDescriptionType
disabledWhether the sidebar panel is disabledboolean
isVisibleWhether the sidebar panel is visibleboolean
isActiveWhether the sidebar panel is activeboolean

Methods ​

sidebar methods:

MethodDescriptionVersion
isCollapsed(): booleanReturns true if status is not SidebarComponent.STATUS_EXPANDED7.0.0
expand(width: number): voidExpand the sidebar7.0.0
collapse(): voidHide sidebar panels while keeping sidebar buttons visible7.0.0
collapseTotally(): voidHide sidebar panels and sidebar buttons7.0.0

sidebar-panel methods:

MethodDescriptionVersion
disable(): voidDisable the sidebar panel; once disabled, it cannot be activated7.0
enable(): voidEnable the sidebar panel7.0
show(): voidShow a hidden sidebar panel7.0
hide(): voidHide the sidebar panel7.0
destroy(): voidDestroy the sidebar panel7.0

Events ​

Sidebar events:

Event nameDescriptionExampleVersion
COMPONENT_EVENTS.EXPANDFired when the sidebar expandssidebar.on(COMPONENT_EVENTS.EXPAND, () => void)7.0.0
COMPONENT_EVENTS.COLLAPSEFired when the sidebar collapsessidebar.on(COMPONENT_EVENTS.COLLAPSE, () => void)7.0.0

Sidebar-panel events:

Event nameDescriptionExampleVersion
activeFired when the sidebar panel is activatedsidebarPanel.on('active', () => {})7.0.0
deactiveFired when the sidebar panel is deactivatedsidebarPanel.on('deactive', () => {})7.0.0
shownFired when the sidebar panel is shownsidebarPanel.on('shown', () => {})7.0.0
hiddenFired when the sidebar panel is hiddensidebarPanel.on('hidden', () => {})7.0.0