Foxit Developer

@device ​

The @device directive specifies a list of device types and restricts a component to run only on those devices. If the current device type does not match any listed type, the component is not parsed and getComponentByName() or querySelector cannot retrieve it.

Device types ​

NameDescription
mobilemobile devices
tablettablet devices
desktopdesktop
touchtouchable screen devices
androidandroid devices
iphoneiphones
iosdevices with iOS OS
ipadipad

Examples ​

html
<html>
<template id="layout-template">
    <webpdf>
        <div>
            <xbutton name="desktop-button" @device="desktop">Works on desktop only</xbutton>
            <xbutton name="mobile-tablet-button" @device="mobile,tablet">Works on mobile and tablet</xbutton>
        </div>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        },
        afterMounted: function (rootComponent) {
            // In addition to the desktop, other devices will return null
            var desktopButton = rootComponent.getComponentByName('desktop-button');
            // in addition to mobile and tablet device, other devices will return null;
            var mobileTabletButton = rootComponent.getComponentByName('mobile-tablet-button');
            console.info(desktopButton, mobileTabletButton);
        }
    });
    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.invert example

html
<html>
<template id="layout-template">
    <webpdf>
        <div>
            <xbutton name="desktop-button" @device.invert="desktop">Doesn't work on desktop</xbutton>
            <xbutton name="mobile-tablet-button" @device.invert="mobile,tablet">Doesn't work on mobile and tablet
            </xbutton>
        </div>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        },
        afterMounted: function (rootComponent) {
            // In desktop, this will return null
            var desktopButton = rootComponent.getComponentByName('desktop-button');
            // in mobile and tablet device will return null
            var mobileTabletButton = rootComponent.getComponentByName('mobile-tablet-button');
            console.info(desktopButton, mobileTabletButton);
        }
    });
    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"
  }
}