Foxit PDF SDK For Web - V10.0.4

# Sidebar Component

# Code examples

# Basic example

<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>

{
    "iframeOptions": {
        "style": "height: 500px"
    }
}

<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>

{
    "iframeOptions": {
        "style": "height: 500px"
    }
}

# Expand and collapse sidebar

<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>

{
    "iframeOptions": {
        "style": "height: 500px"
    }
}

Hover your mouse over a button to show the tooltip.

<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>

{
    "iframeOptions": {
        "style": "height: 500px"
    }
}

# Dynamically insert a sidebar panel using JavaScript

<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>

{
    "iframeOptions": {
        "style": "height: 300px"
    }
}

# API

Template example:

<!-- 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>

The sidebar component template properties:

Property Decription Type Default Value Version
open Expand Status boolean false 7.0.0
width The width of the expanded Sidebar will be used as pixel value if it is greater than or equal to 1, and will be calculated by multiplying window.innerwidth if it is less than 1 number 310px 7.0.0

The sidebar-panel properties:

Property Description Type Default value Version
title The string show at the top of expanded sidebar-panel string '' 7.0.0
active If the sidebar-panel is active boolean false 7.0.0

The sidebar object properties:

Properties Description Type
disabled If the sidebar is disabled boolean
isVisible If the sidebar is visible boolean
status Three status 'SidebarComponent.STATUS_COLLAPSED','SidebarComponent.STATUS_COLLAPSED_TOTALLY','SidebarComponent.STATUS_EXPANDED' string

The sidebar-panel object properties:

Properties Description Type
disabled If the sidebar-panel is disabled boolean
isVisible If the sidebar-panel is visible boolean
isActive If the sidebar-panel is active boolean

# Methods

The sidebar methods:

Method Description Version
isCollapsed(): boolean Return true if the status is not equal to sidebarcomponent.status_expanded 7.0.0
expand(width: number): void Expand sidebar 7.0.0
collapse(): void Hide the sidebar-panel with the sidebar buttons visible 7.0.0
collapseTotally(): void Hide the sidebar with the sidebar buttons invisible 7.0.0

The sidebar-panel methods:

Method Description Version
disable(): void Disable sidebar-panel.Once disabled, it cannot be activated 7.0
enable(): void Enable sidebar-panel 7.0
show(): void Show the hidden sidebar-panel 7.0
hide(): void Hide the sidebar-panel 7.0
destroy(): void Destroy the sidebar-panel 7.0

# Events

The Sidebar events:

Event Name Description Sample Version
COMPONENT_EVENTS.EXPAND Triggered when the sidebar is expanded sidebar.on(COMPONENT_EVENTS.EXPAND, () => void) 7.0.0
COMPONENT_EVENTS.COLLAPSE Triggered when the sidebar is collapsed sidebar.on(COMPONENT_EVENTS.COLLAPSE, () => void) 7.0.0

The Sidebar-panel events:

Event Name Description Sample Version
active Triggered when the sidebar-panel is activated sidebarPanel.on('active', () => {}) 7.0.0
deactive Triggered when the sidebar-panel is deactivated sidebarPanel.on('deactive', () => {}) 7.0.0
shown Triggered when the sidebar-panel is shown sidebarPanel.on('shown', () => {}) 7.0.0
hidden Triggered when the sidebar-panel is hidden sidebarPanel.on('hidden', () => {}) 7.0.0

← Paddle component →