Capabilities add extra functionality to your Power-Up and it’s now time for you to begin adding them. Follow the steps below to begin.

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),
    ...
});
CODE

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'
    }];
}
CODE

Next Steps

When Capabilities are created, you may need to add React components that are rendered by your capabilities.

For example, if you add a Board Button, you may wish to show a Modal or Popup with React content when the button is clicked on. Find out how to add additional routes in the following guide:

Add additional routes using React