Add Capabilities to your Power-Up

Capabilities add extra functionality and utility to Trello Power-Ups and it’s time to add them to your own Power-Up by following the steps below.

1. Open the Root Capabilities File

The entry-point for capabilities is the capabilities.ts file in the root of the src/ folder by default.

This entry-point (file) is bundled with the iFrame Connector URL so that Trello understands what we want it to add to the interface: https://github.com/optro-cloud/trello-powerup-full-sample/blob/main/src/capabilities.ts.

As you can see below, the code sets out what kind of capabilities will be enabled:

window.TrelloPowerUp.initialize({
    ...
    'board-buttons': (t: Trello.PowerUp.IFrame) => getBoardButton(t, CAPABILITY_PROPS),
    'card-buttons': (t: Trello.PowerUp.IFrame) => getCardButton(t, CAPABILITY_PROPS),
    ...
});

This file can be updated to add more capabilities and by default these capabilities are defined in separate files for each type of capability - see the next step on how this is done.

2. Open or Add a Child Capability File

Let’s take the ‘board-buttons' capability as an example.

• You will see that there is a sub-folder called ‘board-buttons’ which contains this logic

• It contains a file called capability.ts which defines the capability (source code example)

3. Implement your Capability Logic

Depending on the type of capability the options and return type may differ.

Use the Trello documentation and TypeScript types to understand how each of these differs in terms of provided information and return type.

Here is some example source code for the ‘board-buttons’ example:

export function getBoardButton(_t: Trello.PowerUp.IFrame, props: CapabilityProps): Trello.PowerUp.BoardButtonCallback[] {
    return [{
        icon: {
            dark: props.baseUrl + props.icon.dark,
            light: props.baseUrl + props.icon.light
        },
        text: 'Notes',
        callback: (tc: Trello.PowerUp.IFrame) => {
            return tc.modal({
                title: 'Notes',
                url: tc.signUrl('./board-button.html'),
                fullscreen: false
            });
        },
        condition: 'edit'
    }];
}

Next Steps

You may wish to add React components that are rendered by your capabilities. For example, if you add a Board Button, you might want a Model or Popup with React content to be displayed when the button is clicked on.

Let’s take a look how you can add these React components now.