Utils and Helpers

We've included a number of utilities and helpers to make it easier to build Power-Ups without needing to bring in a lot of extra packages nor libraries.

t.safe(string)

Escapes a string for insertion into HTML, replacing &, <, >, ", and ' characters.

1
2
3
4
5
6
7
var t = window.TrelloPowerUp.iframe();

console.log(t.safe('<script>alert("danger")</script>'));

// prints out:
// <script>alert("danger")</script>

Bluebird Promises

Trello Power-Ups rely heavily on Promises to enable communication back and forth between your Power-Up and Trello.

If you are using Promises in your own code, you should make sure that you use the provided Bluebird Promise as a way of making sure that your Power-Up works in browsers such as IE11 that don't support Promises natively.

1
2
var Promise = window.TrelloPowerUp.Promise;

Trello Brand Colors

We've made it easy to get the hex string for a Trello brand color by name. You can find the colors on our brand guide.

1
2
var colors = window.TrelloPowerUp.util.colors;

// returns the hex string for a named Trello color
// first arg is the name of the color
// second is optional weight, defaults to 500
colors.getHexString('blue', 500);
// returns "#0079BF"

colors.getHexString('gray');
// returns "#C4C9CC"

// Given a specially formatted color name string
// returns the hex string
colors.namedColorStringToHex('business-blue#600');
// returns "#3E4D80"

colors.namedColorStringToHex('yellow');
// returns "#F2D600"

Relative URL to Absolute

Generally Trello handles this for you transparently. If for some reason you need to take a relative URL like ./folder.html and turn that into an absolute URL, you can use:

1
2
var absolute = window.TrelloPowerUp.util.relativeUrl('./folder.html');