Sidebar Component | Foxit PDF SDK For Web

# 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"
    }
}

Hover your mouse over a button to show the tooltip.

<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`	`310`px	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

← Tab component Paddle component →

# Sidebar Component

# Code examples

# Basic example

# Sidebar width

# Expand and collapse sidebar

# Sidebar buttons' tooltip

# Dynamically insert a sidebar panel using JavaScript

# API

# Sidebar component template

# Sidebar object properties

# Methods

# Events