Foxit Developer

Layout template ​

Examples ​

In Foxit PDF SDK for Web, templates are HTML with UIExtension-specific elements, attributes, and directives. UIExtension combines the layout template with components, controllers, and directives to render the UI. The snippet below shows a template with UIExtension components and directives.

html
<webpdf>
    <div class="toolbar" style="display:flex;flex-direction:row;padding:6px">
        <print:print-ribbon-button></print:print-ribbon-button>
        <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>
    </div>
    <div class="fv__ui-body">
        <viewer @touch-to-scroll>
        </viewer>
    </div>
    <template name="template-container">
        <print:print-dialog></print:print-dialog>
    </template>
</webpdf>

Click Run to see the result:

html
<html>
<template id="layout-template-container">
    <webpdf>
        <div name="mytoolbar" class="toolbar" style="display:flex;flex-direction:row;padding:6px">
            <print:print-ribbon-button></print:print-ribbon-button>
            <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>
        </div>
        <div class="fv__ui-body">
            <viewer @touch-to-scroll></viewer>
        </div>
        <template name="template-container">
            <print:print-dialog></print:print-dialog>
        </template>
    </webpdf>
</template>
</html>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template-container').innerHTML;
        },
        beforeMounted: function (root) {
            this.toolbarComponent = root.getComponentByName('mytoolbar')
        },
        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: [
            libPath + '/uix-addons/print'
        ]
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

Layout template format ​

html
<!-- The layout template root must be <webpdf> -->
<webpdf>
    <!-- Standard HTML tags and attributes are supported -->
    <div class="toolbar" style="display:flex;flex-direction:row;padding:6px">
        <!-- A colon prefix is the component module name; module and component names are lowercase -->
        <print:print-ribbon-button></print:print-ribbon-button>

        <!-- Attributes starting with @ are directives; use @module-name:directive-name when the directive is not in the root module -->
        <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>
    </div>
    <div class="fv__ui-body">
        <!-- viewer displays the PDF; every layout template must include a viewer -->
        <viewer @touch-to-scroll></viewer>
    </div>
    <!-- template replaces the HTML <template> tag; use it for deferred UI such as dialogs, context menus, and layers -->
    <template name="template-container">
        <print:print-dialog></print:print-dialog>
    </template>
</webpdf>

Layout template and device adaptation ​

See Appearance .

Insert a layout template dynamically ​

Click Run to run the example below:

html
<script>
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        addons: [
            libPath + '/uix-addons/print'
        ]
    });
    pdfui.getComponentByName('home-tab-group-change-color')
            .then(component => {
                / after this component, insert a new group component.
                component.after(`
            <group>
                <xbutton name="alert-btn" class="fv__ui-toolbar-show-text-button">Alert</xbutton>
            </group>
        `, [{
                    target: 'alert-btn',
                    config: {
                        callback: function () {
                            alert('Hello world')
                        }
                    }
                }])
            })
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

APIs that support inserting templates:

  • Component
    • #after(component|template, fragments)
    • #before(component|template, fragments)
  • ContainerComponent
    • #append(component|template,fragments)
    • #prepend(component|template,fragments)
    • #insert(component|template, index, fragments)

For details, see API Reference: Component and ContainerComponent

Insert layout template at initialization ​

See UI Fragments.