Capabilities
Client Library
Color Theme Compliance (Beta)
UI Functions

attachment-sections

If your Power-Up can display rich, or interactive content, for an attached URL or URLs on a Trello card, then it should use attachment-sections to do so.

An attachment section is an iframe that gets rendered on the back of a card, above the attachments section. You give the section a title and icon, and tell Trello what page to load into the iframe. That page is then responsible for rendering content relevant to any attached URLs that it has claimed.

Your Power-Up can have 0 or more attachment-sections, and each section can be for 1 or more claimed URLs.

You can return a Promise if you need to make asynchronous requests while determining which URL attachments to claim.

Attachment sections have a number of options that can be passed in. Check out the code snippet below for the options available and valid values.

Example Code

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

window.TrelloPowerUp.initialize({
  'attachment-sections': function(t, options){
    // options.entries is a list of the attachments for this card
    // you can look through them and 'claim' any that you want to
    // include in your section.

    // we will just claim urls for Yellowstone
    var claimed = options.entries.filter(function (attachment) {
      return attachment.url.indexOf('http://www.nps.gov/yell/') === 0;
    });

    // you can have more than one attachment section on a card
    // you can group items together into one section, have a section
    // per attachment, or anything in between.
    if (claimed && claimed.length > 0) {
      // if the title for your section requires a network call or other
      // potentially lengthy operation you can provide a function for the title
      // that returns the section title. If you do so, provide a unique id for
      // your section
      return [{
        id: 'Yellowstone', // optional if you aren't using a function for the title
        claimed: claimed,
        icon: GRAY_ICON, // Must be a gray icon, colored icons not allowed.
        title: 'Example Attachment Section: Yellowstone',
        content: {
          type: 'iframe',
          url: t.signUrl('./section.html', {
            arg: 'you can pass your section args here'
          }),
          height: 230
        }
      }];
    } else {
      return [];
    }
  }
});

./section.html looks like:

1
2
<html>
  <head>
    <link rel="stylesheet" href="https://p.trellocdn.com/power-up.min.css">
    <script src="https://p.trellocdn.com/power-up.min.js"></script>
  </head>
  <body>
    <div id="content">
      <p>Tips for using attachment-sections</p>
      <ol>
        <li>Make sure your section feels at home on the card. It should fit in with the rest of the card and not stick out.</li>
        <li>You can specify a height when you claim the section, and also use t.sizeTo() to make sure your section is the perfect height.</li>
        <li>Try to keep the height of your sections to a minimum.</li>
        <li>It should be obvious to the user what attachments went into your section. They shouldn't be left wondering where one of their attachments disappeared to.</li>
      </ol>
      <p class="u-quiet">Claimed attachment urls: <span id="urls"></span></p>
    </div>
    <script src="./js/section.js"></script>
  </body>
</html>

./js/section.js looks like:

1
2
var t = window.TrelloPowerUp.iframe();

// you can access arguments passed to your iframe like so
var arg = t.arg('arg');

t.render(function(){
  // make sure your rendering logic lives here, since we will
  // recall this method as the user adds and removes attachments
  // from your section
  t.card('attachments')
  .get('attachments')
  .filter(function(attachment){
    return attachment.url.indexOf('http://www.nps.gov/yell/') == 0;
  })
  .then(function(yellowstoneAttachments){
    var urls = yellowstoneAttachments.map(function(a){ return a.url; });
    document.getElementById('urls').textContent = urls.join(', ');
  })
  .then(function(){
    return t.sizeTo('#content');
  });
});

Rate this page: