TreeView for Trello

TreeView for Trello
Enable on powerups menu
Click the Trello Tree View button to open the overlay
Viola! Simple outline view for your cards and lists.
Expand/Collapse lists without archiving for a minimal view
Authorize the powerup to enable features like drag and drop!
You can drag and drop lists (needs authorization)
You can drag and drop cards between lists(needs authorization)
Select your favourite color to match your board
Sample blue theme
Sample red theme

What it does

It's a simple power up that gives the user an overview / outline for their board. Users can collapse/expand lists without archiving/closing that list. It has a pretty basic tree structure like that in most computer systems that has a GUI for directories, with pretty basic tree traversal functions. You can even reorder cards and lists while on the tree. It syncs to and from Trello's api so you don't have to go out of the tree.

board
  |--lists
       |--cards
  |--lists
       |--cards
       |--cards
       |--cards

How I built it

Found devpost for this hackathon
Searched the web for some tutorials( using Trello api, GitHub pages, etc. )
Really just searched the web, mostly on GitHub there are a lot of really informative tutorials for building powerups

Challenges I ran into

This is actually my 2nd powerup to develop for Trello, the first one was not a really great idea for a powerup mainly because it's main purpose is already existing as a built-in function in Trello ( lol ). Well, Trello's api was really easy to learn and adapt into, But one challenge that I had when building this(and the other) powerup was how Trello's authenthication works. Eventually I got passed it, then I had to review my javascript to catch up with the future and promises (pun intended). The biggest challenge was that I started developing this specific powerup in a short amount of time.

Accomplishments that I'm proud of

I'm really proud of this project, as I was very excited to work on a project involving Tree Traversals, Trello API, and learned a few ECMAScript6 tricks that I could use for the next party ;). I'm also thrilled to join this hackathon and work on a project that I really like.

What's next for TreeView for Trello

I hope to continue this project for my own learning and also for the potential users of this powerup. Here are some of the things in mind that I plan to continue working on for TreeView for Trello.

Card or list duplication/archiving using the tree

Built With

Updates

Jobo Danque posted an update — Aug 29, 2017 02:21 AM EDT

Updates!

New ui to better integrate with trello. Added theme picker that you can find on the settings page(just like trello's background theme picker). Added badges and labels (can be turned off on powerup settings)

Log in or sign up for Devpost to join the conversation.

Jobo Danque posted an update — Aug 13, 2017 03:43 AM EDT

Autobots Rollout!

Cards and lists can now be reordered/reorganize in the tree through dragging and dropping. You can even reorder lists that are collapsed.

** Please do note that you'll need to authorize the powerup to enable drag and drop for cards and lists. To do so, Go to Menu > Powerups > TreeView for Trello > click on the gear icon > Authorize

Log in or sign up for Devpost to join the conversation.

Jobo Danque posted an update — Aug 08, 2017 03:03 AM EDT

Keyboard shortcuts now available

though they may be pretty basic for now, more will come!

Arrow Left = Collapse Arrow Right = Expand Arrow Up = Select current node up Arrow Down = Select current node down Enter / Return = Open current node's link (only if it's a card) Escape / ESC = Closes TreeView for Trello

Log in or sign up for Devpost to join the conversation.

Jobo Danque started this project — Aug 04, 2017 07:26 PM EDT

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.