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

### # Bookmark sidebar panel

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:

    <html>
        <div id="pdf-ui"></div>
        <template id="custom-bookmark-panel-template">
            <sidebar-panel
                name="sidebar-bookmark-v2"
                class="fv__ui-sidebar-bookmark-v2"
                @tooltip
                tooltip-placement="right"
                tooltip-title="Custom Bookmark Sidebar Panel Tooltip Title"
                title="Custom Bookmark Sidebar Panel Title"
                icon-class="fv__icon-sidebar-bookmark"
                @lazy-content="active"
            >
                <bookmark-v2:bookmark-tree></bookmark-v2:bookmark-tree>
            </sidebar-panel>
        </template>
    </html>
    <style>
        html{
            overflow:hidden;
        }
        body {
            height: 100vh;
        }
        #pdf-ui {
            position: relative;
            top: 50px;
        }
    </style>
    <script>
        const customBookmarkPanelTemplate = document.getElementById('custom-bookmark-panel-template').innerHTML;
        const CustomAppearance = UIExtension.appearances.adaptive.extend({
            getDefaultFragments() {
                return [{
                    target: 'sidebar-bookmark-v2',
                    action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
                    template: customBookmarkPanelTemplate
                }];
            }
        });
        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 context menu

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

### # Bookmark context menu items

1. 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>`
2. 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>`
3. 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>`
4. 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>`
5. 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>`
6. 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>`
7. 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>`
8. 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:

1. `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.

2. `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:

    <html>
        <div id="pdf-ui"></div>
    </html>
    <style>
        html{
            overflow:hidden;
        }
        body {
            height: 100vh;
        }
        #pdf-ui {
            position: relative;
            top: 50px;
        }
    </style>
    <script>
        const libPath = window.top.location.origin + '/lib';
        const pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: '#pdf-ui',
                appearance: UIExtension.appearances.adaptive,
                addons: []
        });
        pdfui.getRootComponent().then(root => {
            return root.querySelector('@bookmark-v2:bookmark-tree').getTree()
        }).then(tree => {
            tree.on('create-tree-node', treeNode => {
                const newTitleElement = document.createElement('a');
                treeNode.titleElement.replaceWith(newTitleElement);
                treeNode.titleElement = newTitleElement;
                newTitleElement.target="about:blank";
                newTitleElement.href="https://foxit.com"
            })
        })
    </script>

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

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

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

2. 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`:

    <html>
    <label>Select a PDF file with bookmarks:
        <input type="file" id="file">
    </label>
    <hr style="width: 100%;">
    <div id="pdf-viewer"></div>
    </html>
    <script>
        const libPath = window.top.location.origin + '/lib';
        const ePDFViewer = document.getElementById('pdf-viewer');
        const pdfViewer = new PDFViewCtrl.PDFViewer({
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            },
            customs: {
                ScrollWrap: PDFViewCtrl.DivScrollWrap.create(ePDFViewer)
            }
        });
        pdfViewer.init(ePDFViewer);
        document.getElementById('file').onchange = function(e){
            if(!this.value) {
                return;
            }
            pdfViewer.openPDFByFile(e.target.files[0]);
            this.value = '';
        };
        pdfViewer.eventEmitter.on(PDFViewCtrl.ViewerEvents.openFileSuccess, () => {
            const bookmarkDataService = pdfViewer.getBookmarkDataService();
            bookmarkDataService.getFirstLevelBookmarks().then(firstLevelBookmarks => {
                console.log(firstLevelBookmarks);
            });
        })
    </script>
    <style>
    body {
        display: flex;
        flex-direction: column;
    }
    #pdf-viewer {
        width: 100%;
        flex: 1;
        overflow: auto;
    }
    </style>

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

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