TreeView for Trello

Check out my demo board

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
+ 6 more
Share this project:
×

Updates

Jobo Danque posted an update

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

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

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.