Trello Power-Up to hide labels and fields from card covers
I had an ingenious idea to show a clutterless view of a Trello board. Sometimes it is beneficial to have an overview of card names without all the details like labels, assignments, photos, dates, custom fields, and so on.
For instance, instead of displaying a board with tens of cards with labels, due dates and custom fields like this:
it would be great to have a quick look at just the names:
I have quickly discovered how to achieve this effect – by calling:
I started investigating Trello documentation and decided to create a Power-Up. There is a lot of useful documentation:
Note: I'll soon be sharing short, practical tips on Angular — a good way to pick up something new if you're interested.
- https://developers.trello.com/docs/get-started
- https://developers.trello.com/reference#power-ups-intro
- https://tech.trello.com/power-up-tutorial-part-one/
It turned out that creating a simple Trello Power-Up is… simple. The fastest route was to use a service Trello uses in the guidelines: Glitch. I have created there just two files:
I know, the icon is stolen from the examples. Anyway, it was just for a test. After registering my Power-Up for my team and enabling it with board-buttons and callback capabilities, it almost worked. Almost – except for the fact that Power-Ups are created inside an iframe so there is no access to the cards or their styles, and the API does not expose any method to hide parts of cards, only for adding new details.
So my treasure with the Trello Power-Up had to be abandoned, and the only way to achieve the functionality is by a Bookmarklet.
Bookmarklet – does anyone still use it?
Check the list of My favorite bookmarklets
And here is my simplest Trello Clutterless View bookmarklet:
I have further developed the bookmarklet in Trello-Clutterless-View GitHub repository where it can be downloaded.
This is really excellent. Thank you
this is a lovely thing!
I’m glad you liked it :).
This has been very helpful to me and I would recommend it fully. Having said that, well deserved compliment, it seems to have stopped working in the past few weeks. I don’t recall exactly when, but I can’t get it to work on any of the various machines I use.
Thanks for the comment. True, it stopped working because Trello changed their class names in HTML. For example, what previously was named “list-card-details”, now is called “T9JQSaXUsHTEzk”, and it seems such random names will be changing from time to time. A temporary solution is to replace the class names I provided in the snippet with new names and update them regularly.
Thank you so much for the reply. I tried changing instances of “list-card-details” with “T9JQSaXUsHTEzk” but must be doing something wrong because I couldn’t get it to work regardless of what I tried. Maybe the random name changed already, but more likely than not – I just don’t know specifically what to do. 🙁
Here’s the code that should work today:
javascript:(function() { const elements = document.querySelectorAll('.Ln_WDlu2A5sGGO, .W21VDtqqicaQTk, .jS9THwzyUow79A, .FDQUs9BQrIPrks, .x5T5fgyyCpXccD'); if (elements.length) { const elDisplay = elements[0].style.display; const visible = elDisplay == undefined || elDisplay == 'block' || elDisplay == ''; for (elem of elements) { elem.style.display = visible ? 'none' : ''; } } })();Łukasz, thank you for this, it worked as expected! My only concern is I don’t know how to keep it up to date/current if and when things change. This might not be something that is even possible to keep up to date if it changes frequently, but I did look around at some of the page source and couldn’t find any references that matched any of your script elements. If you think it’s something that can be updated occasionally (with a little effort on my part) and if you have a chance to point me in the right direction of how to find the parts and elements of the script that need to be changed, that would be great. On the other hand, if you think it will be too cumbersome to find and update the changes due to frequency of the changes or because of some other reason that I’m naive to, that’s OK too. I just wanted to say thank you for your response and for your original bookmarklet – I really enjoyed it while it worked! Take care.
That’s great. For now, ping me when the script stops working, I’ll see then what can be done. Thanks!