card-buttons

Sometimes you may want to allow users to take actions directly on and related to a specific card. In those cases you would use the card-buttons capability to add the buttons you need to the card. All buttons that come from Power-Ups land in the Power-Ups section.

Options

You should return an array of button objects or a Promise that resolves to one. A button object has the following properties:

Property	Type	Notes
icon	String	The url to an icon for the button. Trello will add a `color=[hex]` query parameter which you can use to make the icon color match ours. This is easiest to do with an SVG icon.
text	String	The name of the button, keep it short and sweet
condition	String	To what types of users the button should be displayed. One of: `admin` - User is an admin on the board. `edit` - User can edit the board. `readOnly` - User can not edit the board. `signedIn` - User is logged into Trello. `signedOut` - User is not logged into Trello. `always` - Always show. The default is `edit`
callback	Function	Optional function that will be called on click of the button
url	String	Optional href for the button
target	String	Optional with use of `url` property to add a target to the anchor tag.

Example Code

1
2
var GRAY_ICON = 'https://cdn.hyperdev.com/us-east-1%3A3d31b21c-01a0-4da2-8827-4bc6e88b7618%2Ficon-gray.svg';

var onBtnClick = function (t, opts) {
  console.log('Someone clicked the button');
};

window.TrelloPowerUp.initialize({
  'card-buttons': function (t, opts) {
    return [{
      // usually you will provide a callback function to be run on button click
      // we recommend that you use a popup on click generally
      icon: GRAY_ICON, // don't use a colored icon here
      text: 'Open Popup',
      callback: onBtnClick,
      condition: 'edit'
    }, {
      // but of course, you could also just kick off to a url if that's your thing
      icon: GRAY_ICON,
      text: 'Just a URL',
      condition: 'always',
      url: 'https://developer.atlassian.com/cloud/trello',
      target: 'Trello Developer Site' // optional target for above url
    }];
  }
});