# # 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://__API_REFERENCE_BASE_PATH__/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`.