# Customize bookmark

This section mainly introduces the customization methods of the bookmark component. Since the bookmark component is developed based on the tree component, please first understand the usage of the tree component and the related API documentation (opens new window).

# Bookmark Component Structure

This section introduces the template structure of bookmark-related components, involving the sidebar panel component, bookmark context menu component, and bookmark tree node component.

In the built-in layout templates, <bookmark-v2:sidebar-panel></bookmark-v2:sidebar-panel> refers to the left sidebar bookmark panel, which is actually equivalent to the following complex template:

<sidebar-panel 
    name="sidebar-bookmark-v2"
    class="fv__ui-sidebar-bookmark-v2"
    @tooltip
    tooltip-placement="right"
    tooltip-title="sidebar.bookmark.tooltip"
    title="sidebar.bookmark.title"
    icon-class="fv__icon-sidebar-bookmark"
    @lazy-content="active"
>
    <bookmark-v2:bookmark-tree></bookmark-v2:bookmark-tree>
</sidebar-panel>

In the application, the complex template can replace the built-in simplified template and modify its attributes:

In the built-in layout template, <bookmark-v2:bookmark-contextmenu @lazy></bookmark-v2:bookmark-contextmenu> refers to the bookmark context menu. It is equivalent to the following template:

<contextmenu name="fv--bookmark-contextmenu-v2">
    <bookmark-v2:add-bookmark name="fv--bookmark-contextmenu-item-add"></bookmark-v2:add-bookmark>
    <contextmenu-separator @bookmark-v2:hide-if-no-bookmark></contextmenu-separator>
    <bookmark-v2:goto-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-goto"></bookmark-v2:goto-bookmark>
    <contextmenu-separator @bookmark-v2:hide-if-no-bookmark></contextmenu-separator>
    <bookmark-v2:cut-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-cut"></bookmark-v2:cut-bookmark>
    <bookmark-v2:paste-under-selected-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-paste-under"></bookmark-v2:paste-under-selected-bookmark>
    <bookmark-v2:paste-after-selected-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-paste-after"></bookmark-v2:paste-after-selected-bookmark>
    <bookmark-v2:delete-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-delete"></bookmark-v2:delete-bookmark>
    <bookmark-v2:set-destination @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-set-destination"></bookmark-v2:set-destination>
    <bookmark-v2:rename-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-rename"></bookmark-v2:rename-bookmark>
</contextmenu>

In the template, for the menu items, a @bookmark-v2:hide-if-no-bookmark directive is provided. The function of this directive is: when there are no bookmarks in the document, right-click on the bookmark panel, we need to hide some menu items, leaving only the <bookmark-v2:add-bookmark> component.

Based on this template, we just need to define a context menu named fv--bookmark-contextmenu-v2, replacing the built-in bookmark context menu, to achieve the effect of overriding the built-in bookmark context menu. Below is an example:

<html>
    <div id="pdf-ui"></div>
    <template id="custom-contextmenu-template">
        <contextmenu name="fv--bookmark-contextmenu-v2">
            <bookmark-v2:add-bookmark name="fv--bookmark-contextmenu-item-add"></bookmark-v2:add-bookmark>
            <contextmenu-separator @bookmark-v2:hide-if-no-bookmark></contextmenu-separator>
            <bookmark-v2:goto-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-goto"></bookmark-v2:goto-bookmark>
            <contextmenu-separator @bookmark-v2:hide-if-no-bookmark></contextmenu-separator>
            <bookmark-v2:cut-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-cut"></bookmark-v2:cut-bookmark>
            <bookmark-v2:paste-under-selected-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-paste-under"></bookmark-v2:paste-under-selected-bookmark>
            <bookmark-v2:paste-after-selected-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-paste-after"></bookmark-v2:paste-after-selected-bookmark>
            <bookmark-v2:delete-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-delete"></bookmark-v2:delete-bookmark>
            <bookmark-v2:set-destination @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-set-destination"></bookmark-v2:set-destination>
            <bookmark-v2:rename-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-rename"></bookmark-v2:rename-bookmark>
        </contextmenu>
    </template>
</html>
<style>
    html{
        overflow:hidden;
    }
    body {
        height: 100vh;
    }
    #pdf-ui {
        position: relative;
        top: 50px;
    }
</style>
<script>
    const customBookmarkContextmenuTemplate = document.getElementById('custom-contextmenu-template').innerHTML;
    const CustomAppearance = UIExtension.appearances.adaptive.extend({
        getDefaultFragments() {
            return [{
                target: 'fv--bookmark-contextmenu-v2',
                action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
                template: customBookmarkContextmenuTemplate
            }];
        }
    });
    const libPath = window.top.location.origin + '/lib';
    const pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: '#pdf-ui',
            appearance: CustomAppearance,
            addons: []
    });
</script>

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

Of course, apart from replacing the whole built-in bookmark context menu, you can also delete or add menu items individually:

<html>
    <div id="pdf-ui"></div>
    <template id="custom-contextmenu-template">
        <contextmenu name="fv--bookmark-contextmenu-v2">
            <bookmark-v2:add-bookmark name="fv--bookmark-contextmenu-item-add"></bookmark-v2:add-bookmark>
            <contextmenu-separator @bookmark-v2:hide-if-no-bookmark></contextmenu-separator>
            <bookmark-v2:goto-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-goto"></bookmark-v2:goto-bookmark>
            <contextmenu-separator @bookmark-v2:hide-if-no-bookmark></contextmenu-separator>
            <bookmark-v2:cut-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-cut"></bookmark-v2:cut-bookmark>
            <bookmark-v2:paste-under-selected-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-paste-under"></bookmark-v2:paste-under-selected-bookmark>
            <bookmark-v2:paste-after-selected-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-paste-after"></bookmark-v2:paste-after-selected-bookmark>
            <bookmark-v2:delete-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-delete"></bookmark-v2:delete-bookmark>
            <bookmark-v2:set-destination @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-set-destination"></bookmark-v2:set-destination>
            <bookmark-v2:rename-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-rename"></bookmark-v2:rename-bookmark>
        </contextmenu>
    </template>
</html>
<style>
    html{
        overflow:hidden;
    }
    body {
        height: 100vh;
    }
    #pdf-ui {
        position: relative;
        top: 50px;
    }
</style>
<script>
    const customBookmarkContextmenuTemplate = document.getElementById('custom-contextmenu-template').innerHTML;
    
    class CustomContextMenuItemComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
        template: `
            <contextmenu-item @on.click="$component.handleClick()">Custom Bookmark Contextmenu Item</contextmenu-item>
        `
    }) {
        static getName() {
            return 'custom-bookmark-contextmenu-item';
        }
        handleClick() {
            const contextmenu = this.parent;
            const target = contextmenu.getCurrentTarget();
            if(target instanceof UIExtension.components.widgets.TreeNodeComponent) {
                alert('Click on bookmark item: ' + target.title);
            }
        }
    }
    
    const customModule = UIExtension.modular.module('custom', []);
    customModule.registerComponent(CustomContextMenuItemComponent);
    
    const CustomAppearance = UIExtension.appearances.adaptive.extend({
        getDefaultFragments() {
            return [{
                target: '@bookmark-v2:rename-bookmark',
                action: UIExtension.UIConsts.FRAGMENT_ACTION.REMOVE
        }, {
            target: 'fv--bookmark-contextmenu-v2',
            action: UIExtension.UIConsts.FRAGMENT_ACTION.APPEND,
            template: `<custom:custom-bookmark-contextmenu-item></custom:custom-bookmark-contextmenu-item>`
        }];
        }
    });
    const libPath = window.top.location.origin + '/lib';
    const pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: '#pdf-ui',
            appearance: CustomAppearance,
            addons: []
    });
</script>

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

Add bookmark menu item:
- Simplified template： <bookmark-v2:add-bookmark name="fv--bookmark-contextmenu-item-add"></bookmark-v2:add-bookmark>
- Complete template：<contextmenu-item @controller="AddBookmarkController">contextmenu.bookmark.add</contextmenu-item>
Navigation function menu item:
- Simplified template：<bookmark-v2:goto-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-goto"></bookmark-v2:goto-bookmark>
- Complete template：<contextmenu-item @controller="GotoBookmarkController" @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-goto">contextmenu.bookmark.goTo</contextmenu-item>
Cut function menu item:
- Simplified template：<bookmark-v2:cut-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-cut"></bookmark-v2:cut-bookmark>
- Complete template：<contextmenu-item @controller="CutBookmarkController" @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-cut">contextmenu.bookmark.cut</contextmenu-item>
Paste bookmark under the selected bookmark function menu item:
- Simplified template：<bookmark-v2:paste-under-selected-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-paste-under"></bookmark-v2:paste-under-selected-bookmark>
- Complete template：<contextmenu-item @controller="PasteUnderSelectedBookmarkController as ctrl" @show="ctrl.pasteAvailable" @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-paste-under">contextmenu.bookmark.pasteUnder</contextmenu-item>
Paste bookmark after the selected bookmark function menu item:
- Simplified template：<bookmark-v2:paste-after-selected-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-paste-after"></bookmark-v2:paste-after-selected-bookmark>
- Complete template：<contextmenu-item @controller="PasteAfterSelectedBookmarkController as ctrl" @show="ctrl.pasteAvailable" @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-paste-after">contextmenu.bookmark.pasteAfter</contextmenu-item>
Delete bookmark function menu item:
- Simplified template：<bookmark-v2:delete-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-delete"></bookmark-v2:delete-bookmark>
- Complete template：<contextmenu-item @controller="DeleteBookmarkController" @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-delete">contextmenu.bookmark.delete</contextmenu-item>
Set bookmark target location menu item:
- Simplified template：<bookmark-v2:set-destination @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-set-destination"></bookmark-v2:set-destination>
- Complete template：<contextmenu-item @controller="SetDestinationBookmarkController" @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-set-destination">contextmenu.bookmark.destination</contextmenu-item>
Rename bookmark menu item:
- Simplified template: <bookmark-v2:rename-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-rename"></bookmark-v2:rename-bookmark>
- Complete template: <contextmenu-item @controller="RenameBookmarkController" @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-rename">contextmenu.bookmark.rename</contextmenu-item>

These are the built-in bookmark context menu items supported by Foxit PDF SDK for Web. The application layer can reuse the @controller implementation of these menu items and replace the built-in menu items to create custom menu item functions. Below is an example:

<html>
    <div id="pdf-ui"></div>
</html>
<style>
    html{
        overflow:hidden;
    }
    body {
        height: 100vh;
    }
    #pdf-ui {
        position: relative;
        top: 50px;
    }
</style>
<script>
    
    class CustomContextMenuItemComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
        template: `
            <contextmenu-item @controller="bookmark-v2:RenameBookmarkController" @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-rename" @on.click="$component.handleClick()">contextmenu.bookmark.rename</contextmenu-item>
        `
    }) {
        static getName() {
            return 'custom-bookmark-contextmenu-item';
        }
        handleClick() {
            const contextmenu = this.parent;
            const target = contextmenu.getCurrentTarget();
            if(target instanceof UIExtension.components.widgets.TreeNodeComponent) {
                console.log('Rename bookmark item: ' + target.title);
            }
        }
    }
    
    const customModule = UIExtension.modular.module('custom', []);
    customModule.registerComponent(CustomContextMenuItemComponent);
    
    const CustomAppearance = UIExtension.appearances.adaptive.extend({
        getDefaultFragments() {
            return [{
                target: '@bookmark-v2:rename-bookmark',
                action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
                template: `<custom:custom-bookmark-contextmenu-item></custom:custom-bookmark-contextmenu-item>`
            }];
        }
    });
    const libPath = window.top.location.origin + '/lib';
    const pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: '#pdf-ui',
            appearance: CustomAppearance,
            addons: []
    });
</script>

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

# Bookmark tree node

The bookmark tree node, also known as TreeNodeComponent (opens new window), synchronizes with the bookmark data of the PDF document, and is created or destroyed following the creation or deletion of the bookmark data. Therefore, to customize the bookmark tree node, it needs to be done through events. The TreeComponent (opens new window) component has made these two events available:

create-tree-node event is triggered when a tree node is created. It can be used to modify the appearance of the tree node and register events on the tree node, etc.
destroy-tree-node event is triggered when a tree node is destroyed. It can be used to release some data to avoid memory leaks.

Below is an example that demonstrates how to replace the text content of a tree node with a link:

# Bookmark Service API

Based on the differences between the PDFViewCtrl layer and the UIExtension layer, we have divided the bookmark API into two parts and provided two Service instances:

BookmarkDataService (opens new window): Bookmark data service at the PDFViewCtrl layer. When your application is developed based on PDFViewCtrl, you can only use the API provided by this service for extension.
BookmarkUIService (opens new window): The UIExtension layer APIs encapsulated based on BookmarkDataService, which encapsulates some APIs of BookmarkDataService, are used to support the synchronization of view and data at the UI layer and the undo-redo functionality.

The UIExtension layer can also use BookmarkDataService, but apart from the APIs encapsulated in BookmarkUIService. For specific details, please refer to the API Reference (opens new window).

# Example 1

A basic demonstration of retrieving and printing first-level bookmarks via BookmarkDataService:

# Example 2

A basic demonstration of creating and deleting bookmarks via BookmarkUIService:

<html>
    <div id="pdf-ui"></div>
    <template id="custom-toolbar-template">
         <div class="custom-toolbar" @var.toolbar="$component">
            <xbutton @on.click="toolbar.addBookmark()">Create</xbutton>
            <xbutton @on.click="toolbar.deleteSelectedBookmark()">Delete</xbutton>
        </div>
    </template>
</html>
<style>
    html{
        overflow:hidden;
    }
    body {
        height: 100vh;
        
    }
    #pdf-ui {
        position: relative;
        top: 50px;
    }
    .custom-toolbar {
        display: flex;
        gap: 10px;
        border-bottom: 1px solid #f0f0f0;
        padding: 5px 0;
    }
</style>
<script>
    const customBookmarkContextmenuTemplate = document.getElementById('custom-toolbar-template').innerHTML;
    
    class CustomBookmarkToolbarComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
        template: customBookmarkContextmenuTemplate
    }) {
        static getName() {
            return 'custom-bookmark-toolbar';
        }
        addBookmark() {
            const service = this.getPDFUI().getBookmarkUIService();
            const text = prompt("Create new bookmark", "Untitled");
            service.addBookmark({
                title: text,
                relationship: PDF.bookmark.BookmarkRelationship.LAST_CHILD
            })
        }
        deleteSelectedBookmark() {
            const service = this.getPDFUI().getBookmarkUIService();
            const bookmarkId = service.getCurrentActiveBookmarkId();
            if(bookmarkId === undefined) {
                alert('You did not select a bookmark');
                return;
            }
            const confirmed = confirm('Are you sure you want to delete this bookmark? ')
            if(confirmed) {
                service.deleteBookmark(bookmarkId)
            }
        }
    }
    
    const customModule = UIExtension.modular.module('custom', []);
    customModule.registerComponent(CustomBookmarkToolbarComponent);
    
    const CustomAppearance = UIExtension.appearances.adaptive.extend({
        getDefaultFragments() {
            return [{
                target: 'sidebar-bookmark-v2',
                action: UIExtension.UIConsts.FRAGMENT_ACTION.PREPEND,
                template: `<custom:custom-bookmark-toolbar></custom:custom-bookmark-toolbar>`
            }];
        }
    });
    const libPath = window.top.location.origin + '/lib';
    const pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: '#pdf-ui',
            appearance: CustomAppearance,
            addons: []
    });
</script>

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

← Custom Theme Colors Foxit PDF SDK for Web Example - Angular.js →

# Customize bookmark

# Bookmark Component Structure

# Bookmark sidebar panel

# Bookmark context menu

# Bookmark context menu items

# Bookmark tree node

# Bookmark Service API

# Example 1

# Example 2