Foxit Developer

Appearance ​

Appearance defines the UI look and feel. Subclasses supply a layout template for structure and fragments to adjust layout and wire component logic.

Declaration of Appearance; override these methods in subclasses:

typescript
class Appearance {
    constructor(pdfui);

    // Layout Template
    public getLayoutTemplate: () => string;
    // Return fragments config
    public getDefaultFragments: () => UIFragmentOptions[];
    // Trigged before component is mounted into DOM
    public beforeMounted: (root: Component) => void
    // Trigged after component was mounted into DOM
    public afterMounted: (root: Component) => void
    // This method will be called to disalbe component after doc is closed
    protected disableAll: () => void;
    // This method will be called to enalbe component after doc is closed
    protected enableAll: () => void;
}

Custom Appearance example ​

html
<html>
<template id="layout-template">
    <webpdf>
        <div name="toolbar" style="display: flex; flex-direction: row; padding: 6px;">
            <open-localfile-button></open-localfile-button>
            <download-file-button></download-file-button>
        </div>
        <div class="fv__ui-body">
            <viewer @touch-to-scroll></viewer>
        </div>
    </webpdf>
</template>
</html>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        getDefaultFragments: function () {
            return [{
                target: 'toolbar',
                action: 'append',
                template: `<xbutton style="margin: 0 10px">appended via fragment configuration</xbutton>`
            }];
        },
        beforeMounted: function (root) {
            this.toolbarComponent = root.getComponentByName('toolbar')
        },
        disableAll: function () {
            this.toolbarComponent.disable();
        },
        enableAll: function () {
            this.toolbarComponent.enable();
        }
    });
    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>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

Device adaptation ​

For device-adaptive UI, detect the device type and pass the appropriate appearance instance to PDFUI, as below.

Use Chrome DevTools device mode on desktop Chrome to simulate different devices.

html
<html>
</html>
<script>
    var mobileAppearance = UIExtension.appearances.MobileAppearance;
    var desktopAppearance = UIExtension.appearances.RibbonAppearance;
    var tabletAppearance = UIExtension.appearances.RibbonAppearance;

    var isDesktop = PDFViewCtrl.DeviceInfo.isDesktop;
    var isMobile = PDFViewCtrl.DeviceInfo.isMobile;

    var libPath = window.top.location.origin + '/lib';

    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        / Provide different appearance depending on the device type.
        appearance: isDesktop ? desktopAppearance : isMobile ? mobileAppearance : tabletAppearance,
        addons: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px",
    "injectCss": [
      "/lib/UIExtension.vw.css"
    ]
  }
}

Built-in appearances ​

javascript
// Desktop ribbon UI
UIExtension.appearances.RibbonAppearance
// Mobile UI
UIExtension.appearances.MobileAppearance
// Picks ribbon or mobile by device (desktop and mobile)
UIExtension.appearances.AdaptiveAppearance