CODEWITHSUNDEEP
trello
Joshua Duxbury
Joshua Duxbury

Reputation: 5260

Trello Power Up Development - Custom Fields

My Research

I've recently noticed that there is a power up called Custom Fields and after reading the Trello client library documentation I can't see how to produce an input box like the one demonstrated in the custom fields power up.

enter image description here

What my thought process was is opening a page on a button click in an iframe 

'card-buttons': function(t, options){
  return [{
    icon: './images/icon.svg',
    text: 'Button Text',
    callback: function(t){
      return t.popup({
        title: "Click To Input Data",
        url: './inputData.html'
      });
    }
  }];
}

The above won't work because I don't know how to pass the input values back to the Trello board as I intend to save it in trello's data storage

Storing the input value

t.set('board', 'private', 'key', value)

Quick Summary

Adding an input field to a Trello card and storing the input data in data storage so all Trello users can see this.

Upvotes: 1

Views: 928

Answers (1)

Bentley Cook
Bentley Cook

Reputation: 136

You're starting down the right path!

The Custom Fields Power-Up makes use of t.popup and t.set to manage the data input in the fields. On your inputData.html file, you'll want to include the style sheet provided here so that your input fields look the same as Trello's.

To store the data, you can actually make use of t.set from your inputData.html if you include the Trello client library on the page. Once you've included it on the page, you can set a click listener for your button and then use t.set to store the data. A great example of how this is accomplished can be found on this example Power-Up.

Upvotes: 3

Related Questions