Outline tree in documents

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Package: Page ManipulationLive demo

To navigate an outline tree and print its result.

JavaScript (SDK v8.0+)

WebViewer({ ... }, viewerElement).then(instance => {
    const { documentViewer } = instance.Core;
    documentViewer.addEventListener('documentLoaded', () => {

        const doc = documentViewer.getDocument();
        doc.getBookmarks().then((bookmarks) => {

            const printOutlineTree = (item, level) => {
                const indent = '   '.repeat(level);
                const name = item.getName();
                console.log(indent + name);
                item.getChildren().map(b => printOutlineTree(b, level+1));
            };

            bookmarks.map((root) => {
                printOutlineTree(root, 0);
            });
        });
    });
});

DocumentViewer.getDocument Document.getBookmarks

JavaScript (SDK v6.0+)

WebViewer({ ... }, viewerElement).then(instance => {
    const { docViewer } = instance;
    docViewer.on('documentLoaded', () => {

        const doc = docViewer.getDocument();
        doc.getBookmarks().then((bookmarks) => {

            const printOutlineTree = (item, level) => {
                const indent = '   '.repeat(level);
                const name = item.getName();
                console.log(indent + name);
                item.getChildren().map(b => printOutlineTree(b, level+1));
            };

            bookmarks.map((root) => {
                printOutlineTree(root, 0);
            });
        });
    });
});

WebViewerInstance DocumentViewer.getDocument Document.getBookmarks

About outline tree

A document may contain a document outline, allowing the user to navigate interactively from one part of the document to another. The outline consists of a tree-structured hierarchy of Outlines, which serve as a "visual table of contents" to display the document's structure to the user.

Each Outline has a title, a Page, and a scroll offset that specifies where an outline will take a user that clicks on the Outline. The typical action for a Outline is to move to another location in the current document — although there is an optional parameter to link to a URL instead.

Expand outlines by default

Pass autoExpandOutlines: true in the WebViewer constructor options.

JavaScript

Webviewer({
    ...,
    fullAPI: true,
    autoExpandOutlines: true,
}, viewerElement).then(instance => {
    // ...
});

Or, use this API to expand outlines.

JavaScript

instance.UI.OutlinesPanel.setDefaultOptions({
    autoExpandOutlines: true,
});