Foxit Developer

Pre-configured components ​

A pre-configured component is an alias for a component with complete business behavior. It encapsulates configuration details for reuse and simpler templates.

Custom pre-configured components ​

registerPreConfiguredComponent API ​

javascript
PDFUI.module('custom', [])
    .registerPreConfiguredComponent('alias-button', {
        template: '<xbutton name="pre-configured-button"></xbutton>',
        config: [{
            target: 'pre-configured-button',
            text: 'Pre-configured button'
        }]
    })

Run the example:

html
<html>
<template id="layout-template">
    <webpdf>
        <div>
            <custom:alias-button></custom:alias-button>
        </div>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<script>
    UIExtension.PDFUI.module('custom', [])
            .registerPreConfiguredComponent('alias-button', {
                template: '<xbutton name="pre-configured-button">Pre-configured button</xbutton>',
                config: [{
                    target: 'pre-configured-button',
                    callback: function () {
                        alert('click pre-configured button')
                    }
                }]
            });
    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>

Built-in pre-configured components ​

<hand-button> ​

Starting in version 8.2.0, the default is <hand-ribbon-button>。

Switches the state handler to STATE_HANDLER_HAND

Component usage:

html
<hand-button></hand-button>

Equivalent to:

html
<xbutton @tooltip tooltip-title="toolbar.tooltip.hand.title" name="hand-tool" icon-class="fv__icon-toolbar-hand"
         @controller="states:HandController"></xbutton>

<hand-ribbon-button> ​

Added in version 8.2.0.

Switches the state handler to STATE_HANDLER_HAND

Component usage:

html
<hand-ribbon-button></hand-ribbon-button>

Equivalent to:

html
<ribbon-button text="toolbar.tooltip.hand.title" @tooltip tooltip-title="toolbar.tooltip.hand.title" name="hand-tool"
               icon-class="fv__icon-toolbar-hand" @controller="states:HandController"></ribbon-button>

<selection-dropdown> ​

Starting in version 8.2.0, the default is <selection-ribbon-dropdown>。

Selection dropdown containing select-text-image and select-annotation buttons.

Component usage:

html
<selection-dropdown></selection-dropdown>

Equivalent to:

html
<dropdown @tooltip @controller="selection:SelectionDropdownController" name="selection-dropdown"
          class="fv__ui-dropdown-hide-text">
    <select-text-image-button @controller="states:SelectTextImageController"></select-text-image-button>
    <select-annotation-button @controller="states:SelectAnnotationController"></select-annotation-button>
</dropdown>

<selection-ribbon-dropdown> ​

Added in version 8.2.0.

Selection dropdown containing select-text-image and select-annotation buttons.

Component usage:

html
<selection-dropdown icon-class="fx-icon-ribbon_home_selecttextandimage-32"></selection-dropdown>

Equivalent to:

html
<ribbon-button
        @tooltip
        @controller="selection:SelectionDropdownController"
        name="selection-dropdown"
        @var.self="$component"
        has-select="true"
>
    <selection-dropdown></selection-dropdown>
</ribbon-button>

<select-text-image-button> ​

Switches the state handler to STATE_HANDLER_SELECT_TEXT_IMAGE

Component usage:

html
<select-text-image-button></select-text-image-button>

Equivalent to:

html
<xbutton @controller="states:SelectTextImageController" name="select-text-image"
         icon-class="fv__icon-toolbar-select-text-image">toolbar.buttons.selectTextImage
</xbutton>

<select-annotation-button> ​

Switches the state handler to STATE_HANDLER_SELECT_ANNOTATION

Component usage:

html
<select-annotation-button></select-annotation-button>

Equivalent to:

html
<xbutton @controller="states:SelectAnnotationController" name="select-annotation"
         icon-class="fv__icon-toolbar-select-annotation">toolbar.buttons.selectAnnotation
</xbutton>

<snapshot-button> ​

Starting in version 8.2.0, the default is <snapshot-ribbon-button>。

Switches the state handler to STATE_HANDLER_SNAPSHOT_TOOL

Component usage:

html
<snapshot-button></snapshot-button>

Equivalent to:

html
<xbutton @controller="states:SnapshotToolController" @tooltip tooltip-title="toolbar.buttons.snapshot"
         name="snapshot-button" icon-class="fv__icon-toolbar-snapshot">toolbar.buttons.snapshot
</xbutton>

<snapshot-ribbon-button> ​

Added in version 8.2.0.

Switches the state handler to STATE_HANDLER_SNAPSHOT_TOOL

Component usage:

html
<snapshot-ribbon-button></snapshot-ribbon-button>

Equivalent to:

html
<ribbon-button
        text="toolbar.buttons.snapshot"
        @controller="states:SnapshotToolController"
        @tooltip
        tooltip-title="toolbar.buttons.snapshot"
        name="snapshot-button"
        icon-class="fv__icon-toolbar-snapshot"
>toolbar.buttons.snapshot
</ribbon-button>

<change-color-dropdown> ​

Starting in version 8.2.0, the default is <change-color-ribbon-dropdown>。

Color dropdown that changes the PDF viewer background color.

Component usage:

html
<change-color-dropdown></change-color-dropdown>

Equivalent to:

html
<dropdown
        name="change-color-dropdown"
        @controller="change-color:ChangeColorController as ctrl"
        @tooltip tooltip-title="toolbar.tooltip.changeColor.title"
        icon-class="fv__icon-toolbar-change-color"
        popup-class="fv__ui-change-color-dropdown-popup"
        class="fv__ui-change-color-dropdown"
        separate="false"
        @init="ctrl.dropdown = $component"
        changeIconCls="false"
>
    <xbutton
            @foreach="color in colors track by background"
            @class="'fv__ui-change-color-dropdown-color-round ' + color.type || ''"
            @sync.attr.style="color.type === 'moon' ? '' : ('background-color:' + color.background)"
            tabindex='0'
            @on.click="ctrl.changeColor(color, $index)"
    ></xbutton>
</dropdown>

<change-color-ribbon-dropdown> ​

Added in version 8.2.0.

Color dropdown that changes the PDF viewer background color.

Component usage:

html
<change-color-ribbon-dropdown></change-color-ribbon-dropdown>

Equivalent to:

html
<ribbon-button name="change-color-dropdown" @controller="change-color:ChangeColorController as ctrl" @tooltip
               tooltip-title="toolbar.tooltip.changeColor.title" text="toolbar.tooltip.changeColor.title"
               icon-class="fv__icon-toolbar-change-color" @var.self="$component" not-immediately="true">
    <dropdown
            popup-class="fv__ui-change-color-dropdown-popup" class="fv__ui-change-color-dropdown" separate="false"
            @init="ctrl.dropdown = $component"
    >
        <xbutton
                @foreach="color in colors track by background"
                @class="'fv__ui-change-color-dropdown-color-round ' + color.type || ''"
                @sync.attr.style="color.type === 'moon' ? '' : ('background-color:' + color.background)"
                tabindex='0'
                @on.click="ctrl.changeColor(color, $index)"
        ></xbutton>
    </dropdown>
</ribbon-button>

<open-file-dropdown> ​

Starting in version 8.2.0, the default is <open-file-ribbon-dropdown>。

Dropdown with open local file and open URL buttons.

Component usage:

html
<open-file-dropdown></open-file-dropdown>

Equivalent to:

html
<dropdown @controller="OpenFileDropdownController" name="open-file-button-list" class="fv__ui-dropdown-hide-text"
          @cannotBeDisabled>
    <file-selector
            @controller="file:OpenLocalFileController"
            icon-class="fv__icon-toolbar-open"
            name="open-local-file"
            accept=".pdf,.gif,.jpeg,.jpg,.png,.bmp"
            @cannotBeDisabled
    >toolbar.buttons.openfile
    </file-selector>
    <xbutton
            @controller="file:OpenRemoteFileController"
            icon-class="fv__icon-toolbar-open-url"
            name="open-from-url"
            @cannotBeDisabled
    >toolbar.buttons.openFromUrl
    </xbutton>
</dropdown>

<open-file-ribbon-dropdown> ​

Added in version 8.2.0.

Dropdown with open local file and open URL buttons.

Component usage:

html
<open-file-ribbon-dropdown></open-file-ribbon-dropdown>

Equivalent to:

html
<ribbon-button name="open-file-button-list" @cannotBeDisabled @var.self="$component">
    <dropdown
            @controller="OpenFileDropdownController"
            name="open-file-button-list"
            class="fv__ui-dropdown-hide-text"
            @cannotBeDisabled
    >
        <file-selector
                @controller="file:OpenLocalFileController"
                icon-class="fv__icon-toolbar-open"
                name="open-local-file"
                accept=".pdf,.gif,.jpeg,.jpg,.png,.bmp"
                @cannotBeDisabled
        >toolbar.buttons.openfile
        </file-selector>
        <xbutton
                @controller="file:OpenRemoteFileController"
                icon-class="fv__icon-toolbar-open-url"
                name="open-from-url"
                @cannotBeDisabled
        >toolbar.buttons.openFromUrl
        </xbutton>
    </dropdown>
</ribbon-button>

<download-file-button> ​

Starting in version 8.2.0, the default is <download-file-ribbon-button>。

Button that downloads the currently open PDF file.

Component usage:

html
<download-file-button></download-file-button>

Equivalent to:

html
<xbutton @tooltip tooltip-title="toolbar.buttons.download" name="download-file-button"
         icon-class="fv__icon-toolbar-download" @controller="file:DownloadFileController">toolbar.buttons.download
</xbutton>

<download-file-ribbon-button> ​

Added in version 8.2.0.

Button that downloads the currently open PDF file.

Component usage:

html
<download-file-ribbon-button></download-file-ribbon-button>

Equivalent to:

html
<ribbon-button
        @tooltip
        text="toolbar.buttons.download"
        tooltip-title="toolbar.buttons.download"
        name="download-file-button"
        icon-class="fv__icon-toolbar-download"
        @controller="file:DownloadFileController"
>toolbar.buttons.download
</ribbon-button>

<print:print-button> opens <print:print-dialog>

These components are defined in the print add-on. Add it to addons:[] before use. For details, see Add-ons overview。

Component usage:

First, place <print:print-button> on the toolbar or elsewhere (from 8.2.0, the default is <print:print-ribbon-button>：

html
<print:print-button></print:print-button>

Equivalent to:

html
<xbutton @tooltip tooltip-title="print:button-tooltip.title" name="print-button" icon-class="fv__icon-toolbar-print"
         @controller="print:ShowPrintDialogController">print:button-tooltip.title
</xbutton>

Second, define <print:print-dialog> inside a <template> tag:

html
<print:print-dialog></print:print-dialog>

This component is required; without it users cannot open the print settings dialog.

Added in version 8.2.0.

Opens <print:print-dialog>

Component usage:

html
<print:print-ribbon-button></print:print-ribbon-button>

Equivalent to:

html
<ribbon-button
        text="print:button-tooltip.title"
        @tooltip
        tooltip-title="print:button-tooltip.title"
        name="print-button"
        icon-class="fv__icon-toolbar-print"
        @controller="print:ShowPrintDialogController"
>print:button-tooltip.title
</ribbon-button>

<goto-prev-page-button> and <goto-next-page-button> ​

Buttons to go to the previous or next page.

Component usage:

html
<goto-prev-page-button></goto-prev-page-button>
<goto-next-page-button></goto-next-page-button>

Equivalent to:

html
<xbutton @tooltip tooltip-title="toolbar.tooltip.previousPage.title" icon-class="fv__icon-toolbar-prev-page"
         name="goto-prev-page" @controller="gotoview:GotoPrevPageController"></xbutton>
<xbutton @tooltip tooltip-title="toolbar.tooltip.nextPage.title" icon-class="fv__icon-toolbar-next-page"
         name="goto-next-page" @controller="gotoview:GotoNextPageController"></xbutton>

<goto-page-input> ​

Input and label showing current page and total pages; press Enter to jump to the entered page.

Component usage:

html
<goto-page-input></goto-page-input>

Equivalent to:

html
<div class="fv__ui-toolbar-gotopage">
    <number @controller="gotoview:GotoPageController" min="1" @bind.attr.max="pageNumber" @bind.value="currentPageIndex"
            name="gotopage-input" @on.change="onchange" @on.keydown="onkeydown"></number>
    <span class="fv__ui-toolbar-gotopage-sep">/</span>
    <text @controller="gotoview:TotalPageTextController" @sync.text="pageNumber" name="gotopage-total">0</text>
</div>

<zoom-out-button> and <zoom-in-button> ​

Buttons to zoom in or out.

Component usage:

html
<zoom-out-button></zoom-out-button>
<zoom-in-button></zoom-in-button>

Equivalent to:

html
<xbutton @tooltip tooltip-title="toolbar.buttons.zoomout" @controller="zoom:ZoomInAndOutController" action="zoomout"
         name="zoom-out" icon-class="fv__icon-toolbar-zoom-out">toolbar.buttons.zoomout
</xbutton>
<xbutton @tooltip tooltip-title="toolbar.buttons.zoomin" @controller="zoom:ZoomInAndOutController" action="zoomin"
         name="zoom-in" icon-class="fv__icon-toolbar-zoom-in">toolbar.buttons.zoomin
</xbutton>

<editable-zoom-dropdown> ​

Dropdown to zoom and set a specific scale.

Component usage:

html
<editable-zoom-dropdown></editable-zoom-dropdown>

Equivalent to:

template:

html
<dropdown name="editable-zoom-dropdown" @controller="zoom:EditableZoomDropdownController"
          class="fv__ui-editable_zoom_dropdown" editable="true">
    <dropdown-button icon-class="fv__icon-toolbar-fit-page" action="fitHeight"
                     @controller="zoom:EditableZoomActionController" name="editable-zoom-dropdown-fitpage">
        toolbar.buttons.fitHeight
    </dropdown-button>
    <dropdown-button icon-class="fv__icon-toolbar-fit-width" action="fitWidth"
                     @controller="zoom:EditableZoomActionController" name="editable-zoom-dropdown-fitwidth">
        toolbar.buttons.fitWidth
    </dropdown-button>
    <li class="fv__ui-dropdown-separator"></li>
    <dropdown-button @foreach="scale in $pdfui.customScalingValues" @sync.text="scale * 100 + '%'"
                     @controller="zoom:EditableZoomToScaleValueController"></dropdown-button>
</dropdown>,

config:

json
{
  target: 'editable-zoom-dropdown',
  editOptions: {
    type: 'number',
    min: 25,
    max: 600,
    step: 1,
    value: 50,
    template: '${value}%'
  }
}

<zoom-dropdown> ​

Starting in version 8.2.0, the default is <zoom-ribbon-dropdown>。

Zoom dropdown similar to <editable-zoom-dropdown> but not editable.

Component usage:

html
<zoom-dropdown></zoom-dropdown>

Equivalent to:

html
<dropdown name="dropdown-zoom" icon-class="fv__icon-toolbar-zoom-in" class="fv__ui-dropdown-hide-text" selected="0">
    <dropdown-button name="dropdown-zoom-in" action="zoomin" @controller="zoom:DropdownZoomInAndOutController"
                     icon-class="fv__icon-toolbar-zoom-in">toolbar.buttons.zoomin
    </dropdown-button>
    <dropdown-button name="dropdown-zoom-out" action="zoomout" @controller="zoom:DropdownZoomInAndOutController"
                     icon-class="fv__icon-toolbar-zoom-out">toolbar.buttons.zoomout
    </dropdown-button>
    <dropdown-button name="dropdown-zoom-fitpage" action="fitHeight" @controller="zoom:ZoomActionController"
                     icon-class="fv__icon-toolbar-fit-page">toolbar.buttons.fitHeight
    </dropdown-button>
    <dropdown-button name="dropdown-zoom-fitwidth" action="fitWidth" @controller="zoom:ZoomActionController"
                     icon-class="fv__icon-toolbar-fit-width">toolbar.buttons.fitWidth
    </dropdown-button>
    <li class="fv__ui-dropdown-separator"></li>
    <dropdown-button @foreach="scale in $pdfui.customScalingValues" @sync.text="scale * 100 + '%'"
                     @controller="zoom:ZoomToScaleValueController"></dropdown-button>
</dropdown>

<zoom-ribbon-dropdown> ​

Added in version 8.2.0.

Dropdown to zoom in or out.

Component usage:

html
<zoom-ribbon-dropdown></zoom-ribbon-dropdown>

Equivalent to:

html
<ribbon-button name="dropdown-zoom" @var.self="$component" @tooltip>
  <dropdown @aria:label.caret="aria:labels.setzoom" icon-class="fv__icon-toolbar-zoom-in"
            class="fv__ui-dropdown-hide-text" selected="0" @on.selected="self.select($args[0])">
      <dropdown-button name="dropdown-zoom-in" action="zoomin" @controller="zoom:DropdownZoomInAndOutController"
                       icon-class="fv__icon-toolbar-zoom-in" ribbon-icon="fx-icon-ribbon_home_zoomin-32"
                       tooltip-title="toolbar.buttons.zoomin" tabindex="0">toolbar.buttons.zoomin
      </dropdown-button>
      <dropdown-button name="dropdown-zoom-out" action="zoomout" @controller="zoom:DropdownZoomInAndOutController"
                       icon-class="fv__icon-toolbar-zoom-out" ribbon-icon="fx-icon-ribbon_home_zoomout-32"
                       tooltip-title="toolbar.buttons.zoomout" tabindex="0">toolbar.buttons.zoomout
      </dropdown-button>
      <dropdown-button name="dropdown-zoom-fitpage" action="fitHeight" @controller="zoom:ZoomActionController"
                       icon-class="fv__icon-toolbar-fit-page" ribbon-icon="fx-icon-ribbon_home_fitpage-32"
                       tooltip-title="toolbar.buttons.fitHeight" tabindex="0">toolbar.buttons.fitHeight
      </dropdown-button>
      <dropdown-button name="dropdown-zoom-fitwidth" action="fitWidth" @controller="zoom:ZoomActionController"
                       icon-class="fv__icon-toolbar-fit-width" ribbon-icon="fx-icon-ribbon_home_fitwidth-32"
                       tooltip-title="toolbar.buttons.fitWidth" tabindex="0">toolbar.buttons.fitWidth
      </dropdown-button>
      <dropdown-button name="dropdown-zoom-fitvisible" action="fitVisible" @controller="zoom:ZoomActionController"
                       icon-class="fv__icon-toolbar-fit-visible" ribbon-icon="fx-icon-ribbon_home_visible-32"
                       tooltip-title="toolbar.buttons.fitVisible" tabindex="0">toolbar.buttons.fitVisible
      </dropdown-button>
      <li class="fv__ui-dropdown-separator"></li>
      <dropdown-button @foreach="scale in $pdfui.customScalingValues" @sync.text="scale * 100 + '%'"
                       @controller="zoom:ZoomToScaleValueController" tabindex="0"></dropdown-button>
  </dropdown>
</ribbon-button>

Page view mode buttons ​

Page view mode includes a set of buttons for switching page layout.

Component usage:

html
<single-page-button></single-page-button>
<continuous-page-button></continuous-page-button>
<facing-page-button></facing-page-button>
<continuous-facing-page-button></continuous-facing-page-button>
<h-continuous:h-continuous-button></h-continuous:h-continuous-button>

Equivalent to:

html
<xbutton @tooltip tooltip-title="toolbar.tools.single-page" @controller="pagemode:SinglePageModeController"
         name="single-page" icon-class="fv__icon-toolbar-single-page">toolbar.tools.single-page
</xbutton>
<xbutton @tooltip tooltip-title="toolbar.tools.continuous-page" @controller="pagemode:ContinuousPageModeController"
         name="continuous-page" icon-class="fv__icon-toolbar-continuous-page">toolbar.tools.continuous-page
</xbutton>
<xbutton @tooltip tooltip="toolbar.tools.facing" @controller="pagemode:FacingPageModeController" name="facing-page"
         icon-class="fv__icon-toolbar-double-page">toolbar.tools.facing
</xbutton>
<xbutton @tooltip tooltip="toolbar.tools.continuous-facing" @controller="pagemode:ContinuousFacingPageModeController"
         name="continuous-facing-page" icon-class="fv__icon-toolbar-facing-continuous-page">
    toolbar.tools.continuous-facing
</xbutton>
<xbutton @tooltip tooltip-title="h-continuous:buttons.title" @controller="h-continuous:HContinuousViewModeController"
         name="h-continuous-button" icon-class="fv__icon-toolbar-h-continuous-page">h-continuous:buttons.title
</xbutton>

<h-continuous:h-continuous-button> is defined in the h-continuous add-on. Add 'h-continuous' to the addons list before use. See Add-ons overview for details.

Starting in version 8.2.0, the default page view mode buttons are:

html
<single-page-ribbon-button></single-page-ribbon-button>
<continuous-page-ribbon-button></continuous-page-ribbon-button>
<facing-page-ribbon-button></facing-page-ribbon-button>
<continuous-facing-page-ribbon-button></continuous-facing-page-ribbon-button>
<h-continuous:h-continuous-ribbon-button></h-continuous:h-continuous-ribbon-button>

Equivalent to:

html
<ribbon-button small="true" @tooltip tooltip-title="toolbar.tools.single-page"
               @controller="pagemode:SinglePageModeController" name="single-page"
               icon-class="fv__icon-toolbar-single-page">toolbar.tools.single-page
</ribbon-button>
<ribbon-button small="true" @tooltip tooltip-title="toolbar.tools.continuous-page"
               @controller="pagemode:ContinuousPageModeController" name="continuous-page"
               icon-class="fv__icon-toolbar-continuous-page">toolbar.tools.continuous-page
</ribbon-button>
<ribbon-button small="true" @tooltip tooltip-title="toolbar.tools.facing"
               @controller="pagemode:FacingPageModeController" name="facing-page"
               icon-class="fv__icon-toolbar-double-page">toolbar.tools.facing
</ribbon-button>
<ribbon-button small="true" @tooltip tooltip-title="toolbar.tools.continuous-facing"
               @controller="pagemode:ContinuousFacingPageModeController" name="continuous-facing-page"
               icon-class="fv__icon-toolbar-facing-continuous-page">toolbar.tools.continuous-facing
</ribbon-button>
<ribbon-button small="true" @tooltip tooltip-title="h-continuous:buttons.title"
               @controller="h-continuous:HContinuousViewModeController" name="h-continuous-button"
               icon-class="fv__icon-toolbar-h-continuous-page">h-continuous:buttons.title
</ribbon-button>

<loupe-tool-button> and <loupe-tool-dialog> ​

When clicked, switches the state handler to the loupe (magnifier) tool.

Component usage:

html
<loupe-tool-button></loupe-tool-button>
<template>
    <loupe-tool-dialog></loupe-tool-dialog>
</template>

Equivalent to:

html
<xbutton name="loupe-button" icon-class="fv__icon-toolbar-loupe" class="fv__ui-toolbar-show-text-button" @tooltip
         tooltip-title="toolbar.tooltip.loupe.title" @controller="loupe:LoupeController">toolbar.tools.loupe
</xbutton>
<template>
    <layer name="loupe-tool-dialog" class="fv__ui-loupe-tool-dialog" @resizable>
        <layer-header class="fv__ui-loupe-tool-header" title="loupe.title" @draggable="{type: 'parent'}"></layer-header>
        <layer-view class="fv__ui-loupe-body">
        </layer-view>
        <layer-toolbar class="loupe-tool-bottom-bar" visible="false">
            <dropdown name="loupe-tool-zoom-dropdown" @controller="loupe:LoupeToolScaleListController" editable="true">
                <dropdown-button @foreach="scaleItem in scaleList track by value"
                                 @controller="loupe:LoupeToolScaleController"
                                 @bind.text="scaleItem.text"></dropdown-button>
            </dropdown>
            <slider name="loupe-tool-zoom-slider" min="50" max="600" step="1"></slider>
            <checkbox name="loupe-tool-lock">loupe.lockButton</checkbox>
        </layer-toolbar>
    </layer>
</template>

Starting in version 8.2.0, <loupe-button> is implemented as <ribbon-button>:

html
<ribbon-button
        name="loupe-button"
        icon-class="fv__icon-toolbar-loupe"
        class="fv__ui-toolbar-show-text-button"
        @tooltip tooltip-title="toolbar.tooltip.loupe.title"
        @controller="loupe:LoupeController"
>toolbar.tools.loupe
</ribbon-button>

Note: <loupe-tool-button> and <loupe-tool-dialog> must both be defined in the layout template.

<marquee-tool-button> ​

Switches the state handler to the marquee selection tool.

Component usage:

html
<marquee-tool-button></marquee-tool-button>

Equivalent to:

html
<xbutton name="marquee-button" icon-class="fv__icon-toolbar-marquee" class="fv__ui-toolbar-show-text-button" @tooltip
         tooltip-title="toolbar.tooltip.marquee.title" @controller="marquee:MarqueeToolController">
    toolbar.buttons.marquee
</xbutton>

Starting in version 8.2.0, <marquee-tool-button> is implemented as <ribbon-button>:

html
<ribbon-button
        name="marquee-button"
        icon-class="fv__icon-toolbar-marquee"
        @tooltip
        tooltip-title="toolbar.tooltip.marquee.title"
        @controller="marquee:MarqueeToolController"
>toolbar.buttons.marquee
</ribbon-button>

<fpmodule:contextmenu-item-file-property>, <fpmodule:file-property-button>, and <fpmodule:file-property-dialog> ​

<fpmodule:contextmenu-item-file-property> and <fpmodule:file-property-button> show <fpmodule:file-property-dialog> when clicked. All of these components are defined in the file-property add-on. Add the file-property add-on to addons:[] before use. See Add-ons overview for details.

<fpmodule:file-property-dialog> Component usage:

html
<fpmodule:file-property-button></fpmodule:file-property-button>
<template>
    <fpmodule:file-property-dialog></fpmodule:file-property-dialog>
</template>

<fpmodule:contextmenu-item-file-property> must be used inside <contextmenu>.

Annotation creation buttons ​

These built-in pre-configured components include initial templates that switch the current state-handler to annotation-creation state handlers.

<create-drawings-dropdown> ​

Starting in version 8.2.0, the default is <create-drawings-ribbon-button>.

html
<dropdown @controller="drawings:DrawingsDropdownController" name="create-shape-dropdown"
          class="fv__ui-dropdown-hide-text">
    <create-square-button></create-square-button>
    <create-circle-button></create-circle-button>
    <create-line-button></create-line-button>
    <create-arrow-button></create-arrow-button>
    <create-polygon-button></create-polygon-button>
    <create-polyline-button></create-polyline-button>
    <create-cloud-button></create-cloud-button>
</dropdown>

<create-drawings-ribbon-button> ​

html
<ribbon-button @controller="drawings:DrawingsDropdownController" name="create-shape-dropdown" @var.self="$component"
               not-immediately="true">
    <dropdown @aria:label.caret="aria:labels.toolbar.shape" @on.selected="self.select($args[0])"
              class="fv__ui-dropdown-hide-text" selected="0">
        <create-square-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-square-button>
        <create-circle-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-circle-button>
        <create-polygon-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-polygon-button>
        <create-cloud-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-cloud-button>
        <create-arrow-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-arrow-button>
        <create-line-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-line-button>
        <create-polyline-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-polyline-button>
    </dropdown>
</ribbon-button>

<create-note-button> ​

html
<xbutton name="create-text" @tooltip tooltip-title="toolbar.tooltip.note.title"
         @controller="states:CreateTextController" icon-class="fv__icon-toolbar-note">toolbar.create.note
</xbutton>

<create-note-ribbon-button> ​

html
<ribbon-button name="create-text" @tooltip tooltip-title="toolbar.tooltip.note.title" text="toolbar.tooltip.note.title"
               @controller="states:CreateTextController" icon-class="fv__icon-toolbar-note">toolbar.create.note
</ribbon-button>

<create-text-highlight-button> ​

html
<xbutton name="create-highlight" @tooltip tooltip-title="toolbar.tooltip.highlight.title"
         @controller="states:CreateHighlightController" icon-class="fv__icon-toolbar-text-highlight">
    toolbar.create.highlight
</xbutton>

<create-text-highlight-ribbon-button> ​

html
<ribbon-button name="create-highlight" @tooltip tooltip-title="toolbar.tooltip.highlight.title"
               text="toolbar.tooltip.highlight.title" @controller="states:CreateHighlightController"
               icon-class="fv__icon-toolbar-text-highlight">toolbar.create.highlight
</ribbon-button>

<create-strikeout-button> ​

html
<xbutton name="create-strikeout" @tooltip tooltip="toolbar.tooltip.strikeout.title"
         @controller="states:CreateStrikeoutController" icon-class="fv__icon-toolbar-strikeout">toolbar.create.strikeout
</xbutton>

<create-strikeout-ribbon-button> ​

html
<ribbon-button name="create-strikeout" @tooltip tooltip-title="toolbar.tooltip.strikeout.title"
               text="toolbar.tooltip.strikeout.title" @controller="states:CreateStrikeoutController"
               icon-class="fv__icon-toolbar-strikeout">toolbar.create.strikeout
</ribbon-button>

<create-underline-button> ​

html
<xbutton name="create-underline" @tooltip tooltip-title="toolbar.tooltip.underline.title"
         @controller="states:CreateUnderlineController" icon-class="fv__icon-toolbar-underline">toolbar.create.underline
</xbutton>

<create-underline-ribbon-button> ​

html
<ribbon-button name="create-underline" @tooltip tooltip-title="toolbar.tooltip.underline.title"
               text="toolbar.tooltip.underline.title" @controller="states:CreateUnderlineController"
               icon-class="fv__icon-toolbar-underline">toolbar.create.underline
</ribbon-button>

<create-squiggly-button> ​

html
<xbutton name="create-squiggly" @tooltip tooltip="toolbar.tooltip.squiggly.title"
         @controller="states:CreateSquigglyController" icon-class="fv__icon-toolbar-squiggly">toolbar.create.squiggly
</xbutton>

<create-squiggly-ribbon-button> ​

html
<ribbon-button name="create-squiggly" @tooltip tooltip-title="toolbar.tooltip.squiggly.title"
               text="toolbar.tooltip.squiggly.title" @controller="states:CreateSquigglyController"
               icon-class="fv__icon-toolbar-squiggly">toolbar.create.squiggly
</ribbon-button>

<create-replace-button> ​

html
<xbutton name="create-replace" @tooltip tooltip="toolbar.tooltip.replace.title"
         @controller="states:CreateReplaceController" icon-class="fv__icon-toolbar-replace">toolbar.create.replace
</xbutton>

<create-replace-ribbon-button> ​

html
<ribbon-button name="create-replace" @tooltip tooltip-title="toolbar.tooltip.replace.title"
               text="toolbar.tooltip.replace.title" @controller="states:CreateReplaceController"
               icon-class="fv__icon-toolbar-replace">toolbar.create.replace
</ribbon-button>

<create-caret-button> ​

html
<xbutton name="create-caret" @tooltip tooltip-title="toolbar.tooltip.caret.title"
         @controller="states:CreateCaretController" icon-class="fv__icon-toolbar-insert">toolbar.create.caret
</xbutton>

<create-caret-ribbon-button> ​

html
<ribbon-button name="create-caret" @tooltip tooltip-title="toolbar.tooltip.caret.title"
               text="toolbar.tooltip.caret.title" @controller="states:CreateCaretController"
               icon-class="fv__icon-toolbar-insert">toolbar.create.caret
</ribbon-button>

<create-typewriter-button> ​

html
<xbutton name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title"
         @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter">
    toolbar.create.typewriter
</xbutton>

<create-typewriter-ribbon-button> ​

html
<ribbon-button name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title"
               @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter">
    toolbar.create.typewriter
</ribbon-button>

<create-callout-button> ​

html
<xbutton name="freetext-callout" @tooltip tooltip-title="toolbar.tooltip.callout.title"
         @controller="states:CreateCalloutController" icon-class="fv__icon-toolbar-callout">toolbar.create.callout
</xbutton>

<create-callout-ribbon-button> ​

html
<ribbon-button name="freetext-callout" @tooltip tooltip-title="toolbar.tooltip.callout.title"
               @controller="states:CreateCalloutController" icon-class="fv__icon-toolbar-callout">toolbar.create.callout
</ribbon-button>

<create-textbox-button> ​

html
<xbutton name="freetext-textbox" @tooltip tooltip-title="toolbar.tooltip.textbox.title"
         @controller="states:CreateTextboxController" icon-class="fv__icon-toolbar-textbox">toolbar.create.textbox
</xbutton>

<create-textbox-ribbon-button> ​

html
<ribbon-button name="freetext-textbox" @tooltip tooltip-title="toolbar.tooltip.textbox.title"
               @controller="states:CreateTextboxController" icon-class="fv__icon-toolbar-textbox">toolbar.create.textbox
</ribbon-button>

<create-area-highlight-button> ​

html
<xbutton name="create-area-highlight" @tooltip tooltip="toolbar.tooltip.areaHighlight.title"
         @controller="states:CreateAreaHighlightController" icon-class="fv__icon-toolbar-area-highlight">
    toolbar.create.areahighlight
</xbutton>

<create-area-highlight-ribbon-button> ​

html
<ribbon-button name="create-area-highlight" @tooltip tooltip-title="toolbar.tooltip.areaHighlight.title"
               text="toolbar.tooltip.areaHighlight.title" @controller="states:CreateAreaHighlightController"
               icon-class="fv__icon-toolbar-area-highlight">toolbar.create.areahighlight
</ribbon-button>

<create-pencil-button> ​

html
<xbutton name="pencil-tool" @tooltip tooltip-title="toolbar.tooltip.pencil.title"
         @controller="states:CreatePencilController" icon-class="fv__icon-toolbar-pencil">toolbar.buttons.pencil
</xbutton>

<create-pencil-ribbon-button> ​

html
<ribbon-button name="pencil-tool" @tooltip tooltip-title="toolbar.tooltip.pencil.title"
               @controller="states:CreatePencilController" icon-class="fv__icon-toolbar-pencil">toolbar.buttons.pencil
</ribbon-button>

<eraser-button> ​

html
<xbutton name="eraser-tool" @tooltip tooltip-title="toolbar.tooltip.eraser.title" @controller="states:EraserController"
         icon-class="fv__icon-toolbar-eraser">toolbar.buttons.eraser
</xbutton>

<eraser-ribbon-button> ​

html
<ribbon-button name="eraser-tool" @tooltip tooltip-title="toolbar.tooltip.eraser.title"
               @controller="states:EraserController" icon-class="fv__icon-toolbar-eraser">toolbar.buttons.eraser
</ribbon-button>

<stamp-dropdown> ​

Dropdown that lists stamp icons and buttons for creating custom stamps. From 8.2.0, the default is <stamp-ribbon-dropdown>.

html
<!-- internal implementation -->

<stamp-ribbon-dropdown> ​

Added in version 8.2.0. Equivalent to <stamp-dropdown>.

<create-measurement-dropdown> ​

html
<dropdown name="create-measurement-button-list" class="fv__ui-dropdown-hide-text" @cannotBeDisabled selected="0">
    <xbutton @tooltip tooltip-title="toolbar.buttons.tooltip.distance" name="create-distance-btn"
             icon-class="fv__icon-toolbar-distance" @controller="distance:CreateDistanceController">
        toolbar.buttons.distance
    </xbutton>
    <xbutton @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.perimeter" name="create-perimeter-btn"
             icon-class="fv__icon-toolbar-perimeter" @controller="distance:CreatePerimeterController">
        toolbar.buttons.perimeter
    </xbutton>
    <xbutton @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.area" name="create-area-btn"
             icon-class="fv__icon-toolbar-area" @controller="distance:CreateAreaController">toolbar.buttons.area
    </xbutton>
    <xbutton @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.circleArea" name="create-circle-area-btn"
             icon-class="fv__icon-toolbar-areacircle" @controller="distance:CreateCircleAreaController">
        toolbar.buttons.area
    </xbutton>
</dropdown>

<create-measure-ribbon-dropdown> ​

html
<ribbon-button @controller="selection:SelectionDropdownController" icon-class="fv__icon-toolbar-measurement"
               name="create-measurement-button-list" @var.self="$component">
    <dropdown class="fv__ui-dropdown-hide-text" @cannotBeDisabled selected="0" @on.selected="self.select($args[0])">
        <xbutton ribbon-text="toolbar.buttons.measure" @tooltip tooltip-title="toolbar.buttons.tooltip.distance"
                 name="create-distance-btn" ribbon-icon="fx-icon-ribbon_comment_measure_distance-32"
                 icon-class="fx-icon-sm fv__icon-toolbar-distance" @controller="distance:CreateDistanceController">
            toolbar.buttons.distance
        </xbutton>
        <xbutton ribbon-text="toolbar.buttons.measure" @hide-on-sr @tooltip
                 tooltip-title="toolbar.buttons.tooltip.perimeter" name="create-perimeter-btn"
                 ribbon-icon="fx-icon-ribbon_comment_measure_perimeter-32"
                 icon-class="fx-icon-sm fv__icon-toolbar-perimeter" @controller="distance:CreatePerimeterController">
            toolbar.buttons.perimeter
        </xbutton>
        <xbutton ribbon-text="toolbar.buttons.measure" @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.area"
                 name="create-area-btn" ribbon-icon="fx-icon-ribbon_comment_measure_area-32"
                 icon-class="fx-icon-sm fv__icon-toolbar-area" @controller="distance:CreateAreaController">
            toolbar.buttons.area
        </xbutton>
        <xbutton ribbon-text="toolbar.buttons.measure" @hide-on-sr @tooltip
                 tooltip-title="toolbar.buttons.tooltip.circleArea" name="create-circle-area-btn"
                 ribbon-icon="fx-icon-ribbon_areacircle-32" icon-class="fx-icon-sm fv__icon-toolbar-areacircle"
                 @controller="distance:CreateCircleAreaController">toolbar.buttons.area
        </xbutton>
    </dropdown>
</ribbon-button>

<create-attachment-button> ​

html
<xbutton name="create-fileattachment" @tooltip tooltip-title="toolbar.tooltip.fileattachment.title"
         @controller="states:CreateFileAttachmentController" icon-class="fv__icon-toolbar-attachment">
    toolbar.create.fileattachment
</xbutton>

<create-attachment-ribbon-button> ​

html
<ribbon-button name="create-fileattachment" @tooltip tooltip-title="toolbar.tooltip.fileattachment.title"
               text="toolbar.buttons.fileattachment" @controller="states:CreateFileAttachmentController"
               icon-class="fv__icon-toolbar-file-attachment">toolbar.create.fileattachment
</ribbon-button>

<create-image-button> ​

html
<xbutton name="create-image" @tooltip tooltip-title="toolbar.tooltip.image.title"
         @controller="states:CreateImageController" icon-class="fv__icon-toolbar-image">toolbar.create.image
</xbutton>

<create-image-ribbon-button> ​

html
<ribbon-button name="create-image" @tooltip tooltip-title="toolbar.tooltip.imageAnnot.title"
               @controller="states:CreateImageController" icon-class="fv__icon-toolbar-image">toolbar.create.image
</ribbon-button>
html
<xbutton name="create-link" @tooltip tooltip-title="toolbar.tooltip.link.title"
         @controller="states:CreateLinkController" icon-class="fv__icon-toolbar-link">toolbar.create.link
</xbutton>
html
<ribbon-button name="create-link" @tooltip tooltip-title="toolbar.tooltip.link.title"
               @controller="states:CreateLinkController" icon-class="fv__icon-toolbar-links">toolbar.create.link
</ribbon-button>

<multi-media:multi-media-button> ​

Defined in the multi-media add-on. Add multi-media to addons:[] before use. See Add-ons overview for details.

Starting in version 8.2.0, the default is <multi-media-ribbon-button>.

<multi-media:multi-media-ribbon-button> ​

Added in version 8.2.0. Same behavior as <multi-media:multi-media-button>.

Page object editing add-on components ​

Components in the edit-graphics add-on: ​

  1. <edit-graphics:contextmenu-item-properties>:

    A <contextmenu-item> that opens the graphics object properties dialog.

  2. <edit-graphics:contextmenu-item-delete>:

    A <contextmenu-item> that deletes a graphics object.

  3. <edit-graphics:image-contextmenu>:

    A <contextmenu> with properties and delete items, shown on right-click of an image graphics page object.

  4. <edit-graphics:contextmenu-item-set-to-back>:

    A <contextmenu-item> that sends a graphics object to the back. Added in version 8.2.0.

  5. <edit-graphics:contextmenu-item-set-to-front>:

    A <contextmenu-item> that brings a graphics object to the front. Added in version 8.2.0.

Components in the path-object add-on: ​

  1. <edit-pageobjects:path-contextmenu>:

    A <contextmenu> with properties and delete items, shown on right-click of a path graphics page object.

  2. <edit-pageobjects:edit-all-objects-button>:

Switches the state handler to edit-all to edit supported graphics objects on the PDF page.

  1. <edit-pageobjects:path-objects-dropdown>:

    Dropdown for creating different types of path objects.

Components in the text-object add-on: ​

  1. <edit-text-object:add-text-button>:

    Switches the state handler to add-text.

  2. <edit-text-object:text-bold-style-button>:

    Toggles bold style on the text object being edited.

  3. <edit-text-object:text-italic-style-button>:

    Toggles italic/normal style on the text object being edited.

  4. <edit-text-object:text-underline-button>:

    Toggles underline style on the text object being edited.

  5. <edit-text-object:font-color-picker>:

    Font color picker for the text object being edited.

  6. <edit-text-object:font-style-dropdown>:

    Dropdown for font family and size on the text object being edited.

PDF form components ​

  1. <import-form-module:import-form-button>

    Selects a form file to import form data. Defined in the import-form add-on. From 8.2.0, the default is <import-form-module:import-form-ribbon-button>.

  2. <import-form-module:import-form-ribbon-button>

    Added in 8.2.0. Same as <import-form-module:import-form-button>.

  3. <export-form-module:export-form-dropdown>

    Exports form data (including as XML). Defined in the export-form add-on.

  4. <create-text-field-button>

    Removed in version 8.2.0.

  5. <create-signature-field-button>

    Removed in version 8.2.0.

  6. <recognition-form:recognition-form-ribbon-button>

    Runs automatic form field recognition.

  7. <form-designer:create-text-ribbon>

    Added in 8.2.0. Switches to CreateTextStateHandler to create a text field. Same as <create-text-field-button>.

  8. <form-designer:create-sign-ribbon>

    Switches to CreateSignStateHandler to create a signature field.

  9. <form-designer:create-push-button-ribbon>

    Switches to CreatePushButtonStateHandler to create a push button field.

  10. <form-designer:create-check-box-ribbon>

    Switches to CreateCheckBoxStateHandler to create a check box field.

  11. <form-designer:create-radio-button-ribbon>

    Switches to CreateRadioButtonStateHandler to create a radio button field.

  12. <form-designer:create-combo-box-ribbon>

    Switches to CreateComboBoxStateHandler to create a combo box field.

  13. <form-designer:create-list-box-ribbon>

    Switches to CreateListBoxStateHandler to create a list box field.

  14. <form-designer:create-image-ribbon>

    Switches to CreateImageStateHandler to create an image field.

  15. <form-designer:create-date-ribbon>

    Switches to CreateDateStateHandler to create a date field.

<page-template:page-template-ribbon-button> ​

Added in 8.2.0. Opens the create PDF page template dialog. Defined in the page-template add-on.

html
<ribbon-button text="page-template:button-tooltip.title" @tooltip name="page-template-button"
               icon-class="fv__icon-toolbar-page-template" @controller="page-template:ShowPageTemplateDialogController">
    page-template:button-tooltip.title
</ribbon-button>

<xfa-form-module:xfa-form-button> ​

Added in 8.2.0. Edits static XFA forms. Defined in the xfa-form add-on.

html
<ribbon-button text="xfa:tips.xfa" @tooltip name="xfa-form-button"
               icon-class="fv__icon-toolbar-xfa-form"></ribbon-button>

<form-designer:showco> ​

Added in 8.2.0. Opens the Calculation Order dialog.

html
<ribbon-button name="fv--showCO-btn" icon-class="fv__icon-toolbar-form-CO" @tooltip
               tooltip-title="form-designer:tips.showCO" @controller="form-designer:showCODialogController">
    form-designer:tips.showCO
</ribbon-button>

<form-designer:add-tooltip> ​

Added in 8.2.0. Adds tooltip text.

html
<ribbon-button @tooltip name="fv--add-tooltip-btn" @controller="form-designer:AddTooltipController"
               tooltip-title="form-designer:tips.AddTooltip" icon-class="fv__icon-toolbar-add-tooltip">
    form-designer:tips.AddTooltip
</ribbon-button>

<form-designer:reset-form> ​

Added in 8.2.0. Resets all form fields to their default values.

html
<ribbon-button @tooltip name="fv--reset-field-btn" @controller="form-designer:ResetFormController"
               tooltip-title="form-designer:tips.ResetForm" icon-class="fv__icon-toolbar-reset-field">
    form-designer:tips.ResetForm
</ribbon-button>

<ink-sign-dropdown> and <create-ink-sign-dialog> ​

Shows all ink signatures and supports creating custom ink signatures. <ink-sign-dropdown> and <create-ink-sign-dialog> must both be defined in the layout template.

html
<ink-sign-dropdown></ink-sign-dropdown>
<template>
    <create-ink-sign-dialog></create-ink-sign-dialog>
</template>

From 8.2.0, the default is <ink-sign-ribbon-dropdown>.

<ink-sign-ribbon-dropdown> ​

Added in 8.2.0. Same as <ink-sign-dropdown>.

<password-protect:password-protect-button> ​

Opens the password protection dialog to encrypt the current PDF.

Usage

html
<password-protect:password-protect-button></password-protect:password-protect-button>

<password-protect:remove-protect-button> ​

Removes security/encryption from the current PDF.

Usage

html
<password-protect:remove-protect-button></password-protect:remove-protect-button>

Redaction components ​

  1. <redaction:create-redactions-dropdown>

    Switches the state handler to create-redaction-state.

  2. <redaction:create-redactions-ribbon-dropdown>

    Added in 8.2.0. Same as <redaction:create-redactions-dropdown>.

  3. <redaction:apply-redactions-button>

    Applies all redaction annotations in the PDF.

  4. <redaction:apply-redactions-ribbon-button>

    Added in 8.2.0. Same as <redaction:apply-redactions-button>.

  5. <redaction:redaction-search-button>

    Switches to the search sidebar panel.

  6. <redaction:redaction-search-ribbon-button>

    Added in 8.2.0. Same as <redaction:redaction-search-button>.

  7. <redaction:create-text-image-redaction-button>

    Added in 8.6.0. Switches to CreateRedactionTextAndImageStateHandler to mark text and images.

    html
    <xbutton class="fv__ui-redaction-item"
    name="create-text-image-redaction"
    @tooltip
    tooltip-title="redaction:buttons.redact_text_image"
    @controller="redaction:RedactionTextAndImageController"
    icon-class="fx-icon-sm fv__icon-toolbar-text-image-redaction">
    redaction:buttons.redact_text_image
</xbutton>

  8. <redaction:create-area-redaction-button>

    Added in 8.6.0. Switches to CreateRedactionStateHandler to mark an area.

    html
    <xbutton class="fv__ui-redaction-item"
    name="create-area-redaction"
    @tooltip
    tooltip-title="redaction:buttons.redact_area"
    @controller="redaction:RedactionController"
    icon-class="fx-icon-sm fv__icon-toolbar-area-redaction">
    redaction:buttons.redact_area
</xbutton>

  9. <redaction:create-page-redaction-button>

    Added in 8.6.0. Marks a page for redaction.

    html
    <xbutton class="fv__ui-redaction-item"
    name="create-page-redaction"
    @tooltip
    tooltip-title="redaction:buttons.redact_page"
    @controller="redaction:RedactionPageController"
    icon-class="fx-icon-sm fv__icon-toolbar-page-redaction">
    redaction:buttons.redact_page
</xbutton>
  1. <bookmark-sidebar-panel>
  2. <commentlist-sidebar-panel>
  3. <thumbnail-sidebar-panel>
  4. <layer-sidebar-panel>
  5. <search-sidebar-panel>
  6. <attachment-sidebar-panel>

<distance:ruler-container> and <distance:measurement-popup> ​

Displays ruler and distance information when creating distance annotations. Place <viewer> inside the <slot> of <distance:ruler-container>, and <distance:measurement-popup> inside a <template> tag.

html
<distance:ruler-container name="pdf-viewer-container-with-ruler">
    <slot>
        <viewer></viewer>
    </slot>
</distance:ruler-container>
<template>
    <distance:measurement-popup></distance:measurement-popup>
</template>

Context menu components ​

<page-contextmenu> ​

html
<contextmenu name="fv--page-contextmenu" @controller="collaboration-mode:PageContextmenuController">
    <full-screen:contextmenu-item-fullscreen></full-screen:contextmenu-item-fullscreen>
    <contextmenu-separator @require-modules="full-screen" @hide-on-device="ios"></contextmenu-separator>
    <contextmenu-item-select-text-image></contextmenu-item-select-text-image>
    <contextmenu-item-select-annotation></contextmenu-item-select-annotation>
    <contextmenu-item-hand-tool></contextmenu-item-hand-tool>
    <contextmenu-item-marquee-zoom></contextmenu-item-marquee-zoom>
    <contextmenu-separator></contextmenu-separator>

    <contextmenu-item-zoom-actual-size></contextmenu-item-zoom-actual-size>
    <contextmenu-item-zoom-fitpage></contextmenu-item-zoom-fitpage>
    <contextmenu-item-zoom-fitwidth></contextmenu-item-zoom-fitwidth>
    <contextmenu-item-zoom-fitvisible></contextmenu-item-zoom-fitvisible>

    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-rotate-right></contextmenu-item-rotate-right>
    <contextmenu-item-rotate-left></contextmenu-item-rotate-left>
    <contextmenu-separator></contextmenu-separator>
    <print:contextmenu-item-print></print:contextmenu-item-print>
    <contextmenu-separator @require-modules="fpmodule"></contextmenu-separator>
    <fpmodule:contextmenu-item-file-property></fpmodule:contextmenu-item-file-property>
</contextmenu>

<default-annot-contextmenu> ​

Used by default when no annotation-specific context menu exists and the annotation is not a markup type.

html
<contextmenu name="fv--default-annot-contextmenu">
    <contextmenu-item-reply></contextmenu-item-reply>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
</contextmenu>

<markup-contextmenu> ​

Used by default when no annotation-specific context menu exists and the annotation is a markup type.

Original template:

html
<contextmenu name="fv--markup-contextmenu">
    <contextmenu-item-reply></contextmenu-item-reply>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-cut></contextmenu-item-cut>
    <contextmenu-item-copy></contextmenu-item-copy>
    <contextmenu-item-paste></contextmenu-item-paste>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
    <contextmenu-separator></contextmenu-separator>
    <form-designer:alignment-menu></form-designer:alignment-menu>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-flip></contextmenu-item-flip>
    <contextmenu-separator @require-modules="group-annot"></contextmenu-separator>
    <contextmenu-item-group></contextmenu-item-group>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-default-prop></contextmenu-item-default-prop>
</contextmenu>

Usage:

html
<markup-contextmenu name="fv--line-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--linearrow-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--linedimension-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--polylinedimention-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--polygondimension-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--circle-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--square-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--polyline-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--polygon-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--polygoncloud-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--ink-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--stamp-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--text-contextmenu"></markup-contextmenu>

<caret-contextmenu> ​

Original template:

html
<contextmenu name="fv--caret-contextmenu">
    <contextmenu-item-reply></contextmenu-item-reply>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-group></contextmenu-item-group>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-default-prop></contextmenu-item-default-prop>
</contextmenu>

Usage:

html
<caret-contextmenu name="fv--areahighlight-contextmenu"></caret-contextmenu>
<caret-contextmenu name="fv--replace-contextmenu"></caret-contextmenu>
<caret-contextmenu name="fv--caret-contextmenu"></caret-contextmenu>

<textmarkup-contextmenu> ​

Original template:

html
<contextmenu name="fv--textmarkup-contextmenu">
    <contextmenu-item-reply></contextmenu-item-reply>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-copy-text></contextmenu-item-copy-text>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-default-prop></contextmenu-item-default-prop>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-group></contextmenu-item-group>
</contextmenu>

Usage:

html
<textmarkup-contextmenu name="fv--highlight-contextmenu"></textmarkup-contextmenu>
<textmarkup-contextmenu name="fv--strikeout-contextmenu"></textmarkup-contextmenu>
<textmarkup-contextmenu name="fv--underline-contextmenu"></textmarkup-contextmenu>
<textmarkup-contextmenu name="fv--squiggly-contextmenu"></textmarkup-contextmenu>

<freetext-contextmenu> ​

Original template:

html
<contextmenu name="fv--freetext-contextmenu">
    <contextmenu-item-cut></contextmenu-item-cut>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
    <contextmenu-separator></contextmenu-separator>
    <form-designer:alignment-menu></form-designer:alignment-menu>
    <contextmenu-separator @require-modules="group-annot"></contextmenu-separator>
    <contextmenu-item-group></contextmenu-item-group>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-default-prop></contextmenu-item-default-prop>
</contextmenu>

Usage:

html
<freetext-contextmenu name="fv--typewriter-contextmenu"></freetext-contextmenu>
<freetext-contextmenu name="fv--callout-contextmenu"></freetext-contextmenu>
<freetext-contextmenu name="fv--textbox-contextmenu"></freetext-contextmenu>

<action-annot-contextmenu> ​

Original template:

html
<contextmenu name="fv--action-annot-contextmenu">
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
    <contextmenu-separator></contextmenu-separator>
    <form-designer:alignment-menu></form-designer:alignment-menu>
</contextmenu>

Usage:

html
<action-annot-contextmenu name="fv--image-contextmenu"></action-annot-contextmenu>
<action-annot-contextmenu name="fv--link-contextmenu"></action-annot-contextmenu>

<fileattachment-contextmenu> ​

Original template:

html
<contextmenu name="fv--fileattachment-contextmenu">
    <contextmenu-item-reply></contextmenu-item-reply>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
    <contextmenu-separator></contextmenu-separator>
    <form-designer:alignment-menu></form-designer:alignment-menu>
    <contextmenu-separator @require-modules="group-annot"></contextmenu-separator>
    <contextmenu-item-group></contextmenu-item-group>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-default-prop></contextmenu-item-default-prop>
</contextmenu>

<media-contextmenu> ​

Original template:

html
<contextmenu name="fv--media-contextmenu">
    <contextmenu-item-media-download></contextmenu-item-media-download>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-media-play></contextmenu-item-media-play>
    <contextmenu-separator></contextmenu-separator>
    <form-designer:alignment-menu></form-designer:alignment-menu>
</contextmenu>

<sound-contextmenu> ​

Original template:

html
<contextmenu name="fv--sound-contextmenu">
    <contextmenu-item-media-download></contextmenu-item-media-download>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-media-play></contextmenu-item-media-play>
</contextmenu>

<redact-contextmenu> ​

Original template:

html
<contextmenu name="fv--redact-contextmenu">
    <contextmenu-item-reply></contextmenu-item-reply>
    <contextmenu-separator functional-module="redaction" @license-validation=""></contextmenu-separator>
    <contextmenu-item-delete-annot functional-module="redaction" @license-validation=""></contextmenu-item-delete-annot>
    <contextmenu-separator functional-module="redaction" @license-validation=""></contextmenu-separator>
    <contextmenu-item-apply functional-module="redaction" @license-validation=""></contextmenu-item-apply>
    <contextmenu-item-apply-all functional-module="redaction" @license-validation=""></contextmenu-item-apply-all>
    <contextmenu-item-place functional-module="redaction" @license-validation=""></contextmenu-item-place>
    <contextmenu-separator functional-module="redaction" @license-validation=""></contextmenu-separator>
    <contextmenu-item-properties functional-module="redaction" @license-validation=""></contextmenu-item-properties>
    <contextmenu-separator functional-module="redaction" @license-validation=""></contextmenu-separator>
    <form-designer:alignment-menu></form-designer:alignment-menu>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-default-prop></contextmenu-item-default-prop>
    <span class="fv-redact-codesets" name="codesets" @controller="annot-opr:SetPropsDefault as spdcl">
    <contextmenu-separator></contextmenu-separator>
    </span>
</contextmenu>

<edit-graphics:image-contextmenu> ​

Original template:

html
<contextmenu name="fv--image-graphics-object-contextmenu" @edit-graphics:check-activates="">
    <edit-graphics:contextmenu-item-set-to-front
            name="fv--contextmenu-item-image-graphics-object-set-to-front"></edit-graphics:contextmenu-item-set-to-front>
    <edit-graphics:contextmenu-item-set-to-back
            name="fv--contextmenu-item-image-graphics-object-set-to-back"></edit-graphics:contextmenu-item-set-to-back>
    <edit-graphics:contextmenu-separator></edit-graphics:contextmenu-separator>
    <edit-graphics:contextmenu-item-delete
            name="fv--contextmenu-item-image-graphics-object-delete"></edit-graphics:contextmenu-item-delete>
    <edit-graphics:contextmenu-separator></edit-graphics:contextmenu-separator>
    <edit-graphics:contextmenu-item-properties
            name="fv--contextmenu-item-image-graphics-object-properties"></edit-graphics:contextmenu-item-properties>
</contextmenu>

<edit-pageobjects:path-contextmenu> ​

Original template:

html
<contextmenu name="fv--path-graphics-object-contextmenu" @edit-graphics:check-activates="">
    <edit-graphics:contextmenu-item-set-to-front
            name="fv--contextmenu-item-image-graphics-object-set-to-front"></edit-graphics:contextmenu-item-set-to-front>
    <edit-graphics:contextmenu-item-set-to-back
            name="fv--contextmenu-item-image-graphics-object-set-to-back"></edit-graphics:contextmenu-item-set-to-back>
    <edit-graphics:contextmenu-separator></edit-graphics:contextmenu-separator>
    <edit-graphics:contextmenu-item-delete
            name="fv--contextmenu-item-path-graphics-object-delete"></edit-graphics:contextmenu-item-delete>
    <edit-graphics:contextmenu-separator></edit-graphics:contextmenu-separator>
    <edit-graphics:contextmenu-item-properties
            name="fv--contextmenu-item-path-graphics-object-properties"></edit-graphics:contextmenu-item-properties>
</contextmenu>

<text-field-contextmenu> ​

Original template:

html
<contextmenu name='fv--text-field-contextmenu'>
    <contextmenu-item name="fv--contextmenu-item-form-sign" @controller="annot-opr:SignController">certifySign.sign
    </contextmenu-item>
    <contextmenu-item-form-properties></contextmenu-item-form-properties>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
</contextmenu>

Note: Context menu names are used internally to resolve menu components and must not be changed.

Removed in version 8.2.0 and replaced by contextmenu-form-designer.

<bookmark-contextmenu> ​

Original template:

html
<contextmenu class="bookmark-panel-contentmenu" name="fv--bookmark-contextmenu"
             @controller="bookmark:BookmarkSidebarMenuController">
    <contextmenu-item name="fv--contextmenu-item-add">contextmenu.bookmark.add</contextmenu-item>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item name="fv--contextmenu-item-goTo">contextmenu.bookmark.goTo</contextmenu-item>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item name="fv--contextmenu-item-cut">contextmenu.bookmark.cut</contextmenu-item>
    <contextmenu-item name="fv--contextmenu-item-pasteUnder">contextmenu.bookmark.pasteUnder</contextmenu-item>
    <contextmenu-item name="fv--contextmenu-item-pasteAfter">contextmenu.bookmark.pasteAfter</contextmenu-item>
    <contextmenu-item name="fv--contextmenu-item-delete-bookmark">contextmenu.bookmark.delete</contextmenu-item>
    <contextmenu-item name="fv--contextmenu-item-destination">contextmenu.bookmark.destination</contextmenu-item>
    <contextmenu-item name="fv--contextmenu-item-rename">contextmenu.bookmark.rename</contextmenu-item>
</contextmenu>

<thumbnail:thumbnail-contextmenu> ​

Original template:

html
<contextmenu name="fv--thumbnail-contextmenu" @thumbnail:permission>
    <contextmenu-item feature="rotate" name="contextmenu-item-thumbnail-rotate-left"
                      @controller="thumbnail:RotateLeftController">thumbnail:contextmenu.rotateLeft
    </contextmenu-item>
    <contextmenu-item feature="rotate" name="contextmenu-item-thumbnail-rotate-right"
                      @controller="thumbnail:RotateRightController">thumbnail:contextmenu.rotateRight
    </contextmenu-item>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item feature="insert" name="contextmenu-item-thumbnail-add-blank-page"
                      @controller="thumbnail:InsertBlankPageController">thumbnail:contextmenu.addBlankPage
    </contextmenu-item>
    <contextmenu-separator></contextmenu-separator>
    <thumbnail:delete-page-contextmenu-item
            name="contextmenu-item-thumbnail-delete"></thumbnail:delete-page-contextmenu-item>
</contextmenu>

Note: Implemented in the thumbnail add-on; load that add-on before use.

<portfolio-node-contextmenu> ​

html
<portfolio-node-contextmenu name="fv--portfolio-file-item-contextmenu" @lazy>
    <portfolio-extract-node-contextmenu-item
            name="fv--portfolio-extract-node-contextmenu-item"></portfolio-extract-node-contextmenu-item>
    <portfolio-show-selected-node-information-contextmenu-item
            name="fv--portfolio-show-selected-node-information-contextmenu-item"></portfolio-show-selected-node-information-contextmenu-item>
</portfolio-node-contextmenu>

contextmenu-form-designer ​

html
<contextmenu name="contextmenu-form-designer">
    <contextmenu-item
            @controller="form-designer:Copy"
    >contextmenu.annot.copyAnnot
    </contextmenu-item>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item
            name="deleteTarget"
            @controller="form-designer:Delete"
    >contextmenu.annot.delete
    </contextmenu-item>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item
            name="propertiesMenu"
            @controller="form-designer:ShowPropertiesController"
    >contextmenu.annot.properties
    </contextmenu-item>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item
            @controller="form-designer:MultipleCopy"
    >form-designer:contextMenu.multipleCopy
    </contextmenu-item>
    <contextmenu-item
            name="copyToPage"
            @controller="form-designer:CopyToPage"
    >form-designer:contextMenu.copyToPage
    </contextmenu-item>
    <contextmenu-item
            name="setTabOrdern"
            @controller="form-designer:SetTabOrder"
    >form-designer:contextMenu.setTabOrder
    </contextmenu-item>
    <contextmenu-separator></contextmenu-separator>
    <form-designer:alignment-menu></form-designer:alignment-menu>
</contextmenu>

<text-sel:text-selection-tooltip> ​

Floating component shown when text is selected on a PDF page.

<annottext> ​

Floating component shown when the pointer moves over an annotation.