Board Bar

t.boardBar(opts)

t.boardBar allows you to load an iframe across the bottom of the board. You are allowed any height you want, up to 60% of the height of the window (this includes the height of the header of the board bar). The board bar comes with a title bar whose color you are able to set. Additionally, you can specify a set of icons to be displayed at the top of the bar along with callbacks for each button which will be called at the point in time the user clicks on a button.

Options

Argument	Description
url string	The url of the page to be loaded into the iframe.
args object	Optional arguments to be passed to the iframe as query parameters.
height integer	Height of the board bar in pixels.
accentColor string	Hex color value or a Trello Brand Color. Used as the color of the header.
callback function	Optional function to be called when user closes board bar.
title string	Optional string to be displayed as the title in the header of the board bar. Board bar title will default to the name of the Power-Up.
actions array	Optional array of quick action buttons for the header. Up to three allowed, with up to one on the right side.
resizable boolean	Determines whether the board bar will be resizable by the user. The default value will be `false`. The initial height will still be determined by the value passed to `height`, calls to `t.sizeTo()` will continue to be respected, and the max height of the board bar will continue to be 60%.

The actions parameter above accepts an array of no more than three action objects with the which have the following values:

Key	Value
icon string	Valid URL (http or https) of image. Required.
alt string	The string to be used as the `alt` value for the `<img>` tag.
callback function	The function to be called when a user clicks on the icon.
position string	Can be `left` or `right` and determines which side of the header the icon is displayed.
url string	Optional `https://` URL that will open in a new tab when the action icon is clicked.

Below is an example of opening a board bar from a board button. When the user clicks the board button labeled "Popup", a board bar with the contents of board-bar.html will be displayed.

1
2
window.TrelloPowerUp.initialize({
  'show-settings': function (t, opts) {
    return t.boardBar({
      // required URL to load in the iframe
      url: './board-bar.html',
      // optional arguments to be passed to the iframe as query parameters
      // access later with t.arg('text')
      args: { text: 'Hello' },
      // optional color for header chrome
      accentColor: '#F2D600',
      // initial height for iframe
      height: 200, // initial height for iframe
      // optional function to be called if user closes modal
      callback: () => console.log('Goodbye.'),
      // optional boolean for whether the user should
      // be allowed to resize the bar vertically
      resizable: true,
      // optional title for header chrome
      title: 'Board Meeting',
      // optional action buttons for header chrome
      // max 3, up to 1 on right side
      actions: [{
        icon: './images/icon.svg',
        url: 'https://google.com',
        alt: 'Leftmost',
        position: 'left',
      }, {
        icon: './images/icon.svg',
        callback: (tr) => tr.popup({
          title: tr.localizeKey('appear_in_settings'),
          url: 'settings.html',
          height: 164,
        }),
        alt: 'Second from left',
        position: 'left',
      }, {
        icon: './images/icon.svg',
        callback: () => console.log(':tada:'),
        alt: 'Right side',
        position: 'right',
      }],
    });
  }
});

t.closeBoardBar()

Board bars come by default with a close control that the use can use to close the board bar. However, if you need to close the board bar programmatically you can do so by calling t.closeBoardBar().

1
2
t.closeBoardBar();