How to use the controllers in addons

API overview

The controllers in the Web SDK can be found in the API Reference documentation under the "Modules > UIExtension > controllers" section. Specifically, the controllers defined in addons are grouped together under the "Modules > UIExtension > controllers > UIXAddon" section.

The API Reference documentation can be found at the following address: https://webviewer-demo.foxit.com/docs/api_reference/html/group__controllers.html (opens new window)

The usage of controllers

Using controllers in templates

Let's take page-editor:AddTextController as an example to illustrate how to use a controller in a template.

Using controllers during initialization

new PDFUI({
    fragments: [{
        // The target element to be manipulated
        target: 'add-text',
        // The type of operation, here is replacement
        action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
        // Template，here the "@require-modules" directive is used to handle lazy loading   
        template: `<ribbon-button @controller="page-editor:AddTextController" @require-modules="page-editor"></ribbon-button>`,
    }]
});

or

new PDFUI({
    fragments: [{
        // The target element to be manipulated
        target: 'add-text',
        // The type of operation, here is replacement
        action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
        // Template，here the "@async" directive is used to handle lazy loading  
        templage: `<ribbon-button @controller="page-editor:AddTextController" @async></ribbon-button>`,
    }]
});

Using controllers after initialization

// After initialization, use the "Component.after" method to add elements after the component
var someComponent = await pdfui.getComponentByName('some-component-name');
someComponent.after(`<ribbon-button @controller="page-editor:AddTextController"></ribbon-button>`);

Using controllers in configuration

Let's take AddImageController as an example to illustrate how to use a controller in a configuration-based manner.

new PDFUI({
    fragments: [{
        // The target element to be manipulated
        target: 'image-tool',
        config: {
            // Specify the controller
            callback: UIExtension.controllers.AddImageController
        }
    }]
});

Limitations on the use of controllers in addons

1. Controllers in addons cannot be used in a configuration-based manner and can only be used via templates. This is because addons are loaded asynchronously, and when configuring, the controllers in addons have not yet been loaded. Therefore, they can only be used via templates, which are loaded after the addons have been loaded.

2. Controllers in addons cannot be accessed through UIExtension.controllers.SomeController, because addons are loaded asynchronously. Therefore, it is not possible to expose the controllers in addons under UIExtension.controllers.