Using Trello Power-Ups to Add Custom Validation Logic

The Problem: Missing Business Rules in Trello Boards

Teams often need to enforce a rule before a card can move forward, such as checking that a custom field contains a valid identifier. Trello's native UI does not provide a way to run custom checks, so the board cannot block invalid transitions.

How Power-Ups Isolate Custom Code

Trello loads each Power-Up inside an iframe that runs in a separate origin. This prevents the third-party script from accessing Trello's DOM or cookies directly. Communication happens through the postMessage API via the official Trello Power-Up Client library, which exposes methods like t.card for reading card data and t.popup for showing messages.

Worked Example: Adding a Validation Button to a Card Back

The following snippet runs on a server you control (served over HTTPS) and is referenced in the Power-Up manifest. It adds a button to the back of a card; when clicked it reads a custom field, calls an external validation endpoint, and shows the result.

import t from 'trello-powerup-client';

// Initialize the client – replace with your auth endpoint
const client = t.authorize({
  name: 'ID Validator',
  authorize: 'https://your-app.com/auth'
});

// Add a button to the card back
client.get('board', 'id').then(boardId => {
  client.button({
    text: 'Validate ID',
    // The callback receives the card context
    onClick: (card) => {
      const customId = card.customFields?.find(f => f.id === 'customField_123')?.value;
      if (!customId) {
        t.popup({
          title: 'Missing ID',
          message: 'Please fill in the custom field first.',
        });
        return;
      }
      // Call your validation service
      return fetch(`https://api.example.com/validate?id=${encodeURIComponent(customId)}`)
        .then(r => r.json())
        .then(data => {
          if (data.valid) {
            t.popup({title: 'Success', message: 'ID is valid.'});
          } else {
            t.popup({title: 'Invalid', message: data.reason || 'Check the identifier.'});
          }
        })
        .catch(err => {
          t.popup({title: 'Error', message: 'Could not reach validation service.'});
        });
    }
  });
});

To verify the button appears, open a board, enable the Power-Up, and open the back of a card. Open the browser's developer tools, go to the Network tab, filter for 'postMessage', and you should see messages exchanged between the iframe and trello.com when the button is clicked.

Trade-off: Iframe Isolation Limits Styling

Because the Power-Up runs in an iframe, matching Trello's look-and-feel requires copying CSS variables or using inline styles that stay within the iframe's boundary. This can cause slight visual mismatches compared to native Trello elements.

Practical check: after loading the Power-Up, inspect the iframe element and compare its computed font-size and colors with those of a Trello button. Adjust your CSS until the values are within a few percent.

Actionable Next Steps

1. Create a developer account at trello.com and register a new Power-Up.
2. Host the snippet above on an HTTPS endpoint and add the URL to the Power-Up's iframe connector.
3. Add the Power-Up to a test board, enable it, and verify the validation button works as described.