Capabilities
Client Library
Color Theme Compliance (Beta)
UI Functions

Modal

t.modal(opts)

In certain cases, your Power-Up might need to show UI that requires taking up a large portion of the screen. When you need something more than t.popup(opts) or t.boardBar(opts) can provide, you can use t.modal. This lets you display an iframe directly on top of Trello. The modal comes in two widths, fullscreen: true as seen below:

And fullscreen: false looks like:

Options

KeyValid ValuesDescription
url
string
Any valid URL.The URL of the page to be shown inside of the iframe.
accentColor
string
Hex color value or a Trello Brand Color.Color to be used on top of modal design.
height
integer
Positive integer.Height of the modal.
fullscreen
boolean
True or FalseDetermines whether the modal should be full width or not.
callback
function
Function that runs.
optional
The function to be called if the user closes the modal.
title
string
Any string.
optional
String to be displayed in header of modal.
actions
array
Array of action items (as described below).
optional
Buttons to be displayed in header of modal.
args
object
Object of key / values to be passed as query parameters to iframe
optional
Can be accessed from the iframe using t.arg(key)

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

KeyValid ValueDescription
icon
string
Valid URL of image.Icon to be displayed.
callback
function
Callable function.The function to be called when a user clicks on the icon.
alt
string
Any stringThe string to be used as the alt value for the <img> tag.
position
string
left or rightDetermines whether the icon should be displayed on the left or right side of the modal header.
url
string
An https:// urlAn optional URL to open in a new tab when the user clicks the action icon.

Here is an example call to t.modal:

1
2
t.modal({
  // the url to load for the iframe
  url: './modal.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: 500, // not used if fullscreen is true
  // whether the modal should stretch to take up the whole screen
  fullscreen: true,
  // optional function to be called if user closes modal (via `X` or escape, etc)
  callback: () => console.log('Goodbye.'),
  // optional title for header chrome
  title: 'appear.in 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.closeModal()

If you have a modal open, you can call t.closeModal() to close it.

1
2
t.closeModal();

t.updateModal(opts)

If you have a modal open, you can update parts of it using t.updateModal({options}).

Options

NameValue
accentColor stringA valid hex color (eg, 9900CC) to update the modal header's background color to.
actions array of objectsAn array of action objects.
fullscreen booleanA boolean used to determine whether the modal should be fullscreen or not.
title stringThe string to update the modal's header to.

And here is an example of how you would update a modal that is already opened:

1
2
let updateObject = {
  fullscreen: false,
  accentColor: "9900CC",
  actions: [{
    icon: './images/icon.svg',
    url: 'https://google.com',
    alt: 'Leftmost',
    position: 'left',
  }],
  title: "My New Title",
}

t.updateModal(updateObject);

Rate this page: