Simple card creation using Trello-ized links

Simple card creation using Trello-ized links

Objective

Create a card on a Trello board using a simple link (URL) or a bookmark. The link should work from outside of the Trello environment, thus could be integrated in other systems, web pages etc.

Context

Trello is nice tool to manage tasks, issues, requirements etc. Adding cards to a Trello board should be as easy as a click on a link - wherever the link is available.

Different solutions exist to (externally) interact with a Trello board.

In particular:

  • Communicate with the Trello API using a SDK
  • Communicate with the Trello API using Emails
  • Create and integrate a plugin in Trello
  • Send Trello a command per encoded URL

The first 3 methods require a fairly amount of configuration and implementation, though.

The last method offers a light-weight solution to create a new card on any board you have access to and requires - in its simplest form - no configuration or programming.

Solution

The very basic link URL that can be used to create a new card on a Trello board e.g. to create a bookmark (Trello will prepare the bookmark for you) is:

https://trello.com/de/add-card?
Trello card creation basic URL

Though you may prefer to use a link on a web page. You'd need to know about the following link parameters to configure and save the link once.
Then... use and re-use it. That's all.

Optional parameters

The URL above - and thus the user experience - can be enhanced using a few optional parameters:

  • source: usually the URL of the host triggering the creation request.
  • url*: usually the URL representing the request context i.e. initiating the request. If available, this parameter is used to set the card title. It is also added as a reference on the card (as visible on the board).
  • name*: usually, the name of the referred page as in the url parameter. If a value for name is provided, it is used  as the card title. The url parameter value would still be available as a reference on the created card, then.
  • desc*: the value of this parameter is used to set the card description.
  • idBoard: the board ID parameter will bind the request to the corresponding board. If this ID is not provided, the user will be asked to choose a board to add the card to - out of a list of boards that can be accessed by the user.
  • idList: the ID of one of the existing lists (board columns). This parameter works similar to the one for the board ID.

(*) Important: If neither the url , name nor the desc parameter are provided, Trello will offer the user to configure the link and to save it as a bookmark. Otherwise, Trellow will open a prefilled card template, using the provided parameter values.

Note: the idBoard can be found in the Trello Board settings and is usually visible as part of the Board URL.

Formating the parameter values

All parameter values need to be URL encoded. This is the only condition to build a correct "card creation request" URI.

URL encoding is used to replace unsafe ASCII characters with a "%" followed by two hexadecimal digits and thus to allow building compliant URIs. Different alternatives exist to encode a parameter value (string). E.g.:

  • Use a free online service like https://www.urlencoder.org/.
  • Encode by hand using a character mapping table (see below).
  • use a JavaScript, PHP, ASP etc. function that is able to URL encode a string.
    This can be done directly in the browser console. E.g.:
console.log(encodeURIComponent('https://www.example.com/some-specific-page'));
URL encoding from the browser console

This command automatically generates the encoded output https%3A%2F%2Fwww.example.com%2Fsome-specific-page.

Anyhow, some common characters must be encoded:

Unsafe character Encoded value
Space %20
" %22
< %3C
> %3E
# %23
% %25
| %7C

Multiple use cases may be considered, depending on the level of comfort you'd like to provide the user with. Anyhow, some parameters may be pre-formated and used to construct the resulting URI.

Suggested (minimal) URI format:

https://trello.com/add-card?url=ENCODED_REFERENCE_URL&idBoard=ENCODED_BOARD_ID
URI format suggestion

Once the 2 parameter values ENCODED_REFERENCE_URL and ENCODED_BOARD_ID have been prepared/encoded, a corresponding link could be displayed on a web page.

Note: If you prefer to bookmark this kind of link in your browser (favorites), then just visit https://trello.com/add-card? and configure accordingly.

A click on a link should (re-)direct the visitor of your web page to the Trello "card creation page". The user experience often depends on details, though.

  • Standard Redirection
<a href="PUT_THE_ENCODED_URL_HERE">
  Add a card to the Trello board
</a>
Link with redirection
  • Redirection opening a new page (depending on the browser configuration)
<a href="PUT_THE_ENCODED_URL_HERE" 
   target="_blank" 
   rel="noopener">
   Add a card to the Trello board
</a>
Link with redirection opening a new page
  • Link opening a "popup" window (depending on the browser configuration)
<a href="PUT_THE_ENCODED_URL_HERE" 
   onClick="window.open(this.href, 'Trello Card', 'width=580,height=700');return false;"
   rel="noopener">
   Add a card to the Trello board
</a>
Link opening a popup window

Let's give it a try:

Add a card to the "Khatastroffik Test Board" at Trello

Note: if the user is not already logged in or doesn't have access to the specified board, then Trello will ask to log in, select a board etc. Hustle free!

Conclusion

  • The objective has been achieved!
    It's pretty easy to create a new card on a Trello board by clicking on a (bookmarked) link! 2 solutions have been presented.
  • The Link on Page solution:
    It's working out-of-the-box. Wherever needed, the web page is offering its visitors the initiating (service) link. The link configuration is centralized, hence updatable and adaptable for all visitors and pages. The solution best fits in a high quality service environment.
    For example:
    links from any enterprise portal, web page, email signature etc. to corresponding IT support boards.
  • The Bookmarked Link solution:
    It doesn't require to enhance/modify any (visited) web page, since Trello implements the bookmark creation service. Though the user is in charge of saving and updating his bookmark... at least once for each of his devices/browsers. The visited web page isn't offering any (service) link. This solution covers simple needs and environments.

Addendum

A demo on "using a bookmarked link" can be found on The Ultimate Board Of Trello Tips & Tricks.

Show Comments