Open dariuszkowalski-com opened 3 years ago
+1 for swimlanes! would be awesome
+1 for swimlanes!
Another +1 for swimlanes! Also, it would be useful to clarify terms between vertical "lists" and horizontal "lanes".
Would like to +1 for this.
+1 for swimlanes. IMO, It would greatly improve ergonomics, while not being too intrusive on the markdown schema.
Another +1. Having a second axis of organization is very useful for people (like myself) using kanban in non-task-oriented ways (in my case, planning and plotting fiction).
+1
+1! Since the canna columns are 'encoded' as second level headers, the existing syntax can be kept, and top lever headers would be perfect for this
This would be a fantastic addition. Currently, mutliple projects require multiple boards to be maintained .
+1
Is this still going to happen?
@mgmeyers I'd be interested to hear the main difficulty you encountered (I'd be happy to help if I can!)
Not a full solution, but a workaround I currently use for those in dire need of swimlanes:
This just describes the example. You should build a pane layout that suits your personal needs.
Downsides I've come across:
Am working on a master list of tasks I'd love to slice and dice in different ways I have mentally come up with something I think might work for swim lanes and/or these needs.
Essentially the problem is user want/need to group tasks by multiple attributes, sometimes at once. Swimlanes are just a method to mentally approach this. Instead it seems that the tasks/line items, fundamentally, need attributes appended for this to be possible. Right now the heading is the only attribute that is considered in terms of how to visually group the data.
If each line item (stylized bullet) could get sub-bullets with either key-value information or a simple value listing (like the header) then the user and the UI can show the cards in any listing format and/or add more dimensions to the view.
In my use case I have items I need to put into both "buckets" in order to maximize my/the time, usage and now with Obsidian, the tool itself. I want to place items in a list of "High Priority" and within the list (like a swim lane) have items grouped further by their value. What would allow this is a sub-item that contains a property such as "High Value" on one item in the list, and "Low Value" in another.
e.g. High Value; Medium Value; Low Value; No Value
While this isn't the same as having a uniform set of swim lanes across all columns of your kanban, it would allow for more finer and logical groupings and could also help a user just as easily introduce the notion of a swim lane to their workflow. Seems the way a set of swim lanes across the kanban would work is if that enumeration of rows was stored instead in the front matter of the note. Thinking a swimlanes: Team A, Team Red, Alphas
would be enough to slice the rendering of the kanban into something more like a matrix that many teams need to work from.
Jumped in on this because I have that similar need, but from a bigger planning or road mapping perspective and it would be valuable to use it to fulfill my own use case.
@dequi - I didn't know I could drop cards between panes, assuming then you have multiple KANBAN documents setup to do this? I like the concept despite wanting the grouping/splits in a single view it gives me different ideas. If you are doing this and open a file in smaller window, however, can you use a 'back button' to get back to the board (even if not the main window?). One of the most attractive things, oddly, is my ability to use my mouse's back and forward buttons to navigate the frames/notes. If I can share items in three panels this might work. Thinking top would be new/without notes to triage, where I enter them. Two below would be my two sets of groupings. Workflow idea is to always be raising up the 'next best' item (and allowing it to be skipped, others to be cherry picked based on the situation). The forward/back nature would be okay if I don't focus the right frame. I can jump in, edit/link, and jump back.
+1 for swimlanes !
+1 for swimlanes !
I have been a guy who pitched requirements, wrote them, tested them, debugged them, applied code or config against them, product manager (at times), lean portfolio manager/leader, solution architect and solution manager. I can't help but to write up product ideas so forgive me. I think this would be a very valuable addition... but I have some other stuff I've been writing out I might want to propose with a new issue. Unsure if when I look across if they become plugins themselves or proposed features of the core. Ok starting them out as standalone additions that can be pulled into the core as desired - depends on what the maintainer would want.
Having discovered that I can drag/drop kanban cards across horizontally split panes 🍾 I now have no need for swimlanes. Please consider my previous upvote cancelled !
Having discovered that I can drag/drop kanban cards across horizontally split panes 🍾 I now have no need for swimlanes. Please consider my previous upvote cancelled !
My workflow needs is a tiny bit different and/or the way I write up and format my tasks maybe "breaks" some of the flows people are using so I'm not yet ready to cancel a vote but happy to wait for a better flow for all.
As I work and think about process I want to not drive new ideas that break existing workflows or apps either. My needs are a bit bigger or outside of this plugin maybe alone (though this helps solve in a major way too). So far I think my 'sketched' notes say my needs are different plugin or one that brings the below together.
Dataview + Kanban solve most of this with the ability to query records to be listed, though the right queries are a challenge sometimes. Using dv.table instead of standard queries helps. To solve the rest of my needs I'm going to lean more on MetaEdit and the hackish ability to insert code into the results tables. I'm more interested in ranking and scoring a universe of items and then using the scores to prioritize further inside sub-universes, etc. This method works well and keeps things score driven but I then require a place to store scores (w/ fields & standards to store), a way to update them (easily) and a way to calculate final scores. MetaEdit lets me slip buttons into tables to single-click to add values (assign V:: 8 with a click) and then later calculate final scores for the end ranking.
So not sure it's a plugin on top/aside/personal workflow or a fork/PR to existing. Feedback would help decide if I'm one of few wanting to make o.md do things enterprise tools do sometimes better.
Interesting discussion. The workaround proposed by @dequi works if you don't have too many swimlanes but quickly you are limited by the size of your screen.
I'm still interested if this feature would come. And thx for this plugin!
Also interested in this! Only a handful of project management tools support swimlanes (Favro, Jira, etc.) and they pretty much all have the downside of being online tools (slow, difficult to customize) and often on paid plans only.
As someone who uses kanban boards with swimlanes for all my research projects that would be an awesome addition to Obsidian!
@mgmeyers is it possible that implementing swimlanes that automatically replicate the same columns be the "difficult" part of this feature request?
What I mean is that what could be implemented is a simple vertical succession of kanbans (in the same Obsidian md file) that show one after the other and leave complete column customization to the end user?
Actually when I use swimlanes I tend not to have the same columns to each lane.
The structure in markdown would then simply be something like:
---
kanban-plugin: basic
---
# title of the first lane
## title of the first col of first lane
- [ ] card
- [ ] ...
## title of the second col of first lane
- [ ] card
- [ ] ...
## ...
# title of the second lane
## title of the first col of second lane
- [ ] card
- [ ] ...
## title of the second col of second lane
- [ ] card
- [ ] ...
## ...
...
%% kanban:settings
``
{"kanban-plugin":"basic"}
``
%%
Having read the whole discussion in this issue again, I think that it becomes obsolete once #4 will be completed. Embedding kanbans in a page would yield a solution pretty similar to implementing swimlanes imo.
I think this issue should be closed/merged into #4.
Willing to chip in financially to bump this up
Here's a css snippet to wrap cards to multiple rows.
.kanban-plugin__board > div {
display: flex;
flex-wrap: wrap;
row-gap: 40px;
}
I tried the snippet @digitalsignalperson but it didn't allow me to scroll down to see the newly created rows.
This is what the snippet can do as-is:
but for long lists, it's missing a vertical scrollbar
solved with overflow-y: auto
in the next div up
.kanban-plugin__board > div {
display: flex;
flex-wrap: wrap;
row-gap: 40px;
}
.kanban-plugin__scroll-container.kanban-plugin__horizontal {
overflow-y: auto;
}
One way to get your swimlanes from this could be to limit each row to N lists. E.g. 4 lists per row:
.kanban-plugin__board > div {
/* display: flex; */
/* flex-wrap: wrap; */
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 40px;
}
.kanban-plugin__scroll-container.kanban-plugin__horizontal {
overflow-y: auto;
}
ChatGPT may be able to help you with other tweaks or ways to split up into rows.
Thank you! This worked fantastically.
Tutorial for those who need more instructions.
Settings -> Appearance
CSS Snippets
and open the snippets folder
kanban-swimlanes.css
Edit
.kanban-plugin__board > div {
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 40px;
}
.kanban-plugin__scroll-container.kanban-plugin__horizontal {
overflow-y: auto;
}
Reload snippets
button
@SuperTempAccount - Perfection! Newb to Obsidian, appreciate the walk thru. Watch out world!
@digitalsignalperson - This is a great idea: using CSS grid capabilities! I used grid-template-areas for a complex layout (and nested styling for some color shenanigans). I couldn't be happier 😀
.kanban-plugin__board > div {
display: grid;
grid-template-areas: "backlog sprint p1assigned p1active p1done archive"
"backlog sprint p2assigned p2active p2done archive"
"backlog sprint p3assigned p3active p3done archive";
row-gap: 40px;
}
/* Assign each lane you have to a specific position in the grid */
/* first lane */
/* since the area "backlog" spans several rows in the grid-templates-areas definition so will the lane */
.kanban-plugin__lane-wrapper:nth-of-type(1) {
grid-area: backlog;
}
/* second lane */
/* since the area "sprint" spans several rows in the grid-templates-areas definition so will the lane */
.kanban-plugin__lane-wrapper:nth-of-type(2) {
grid-area: sprint;
}
/* you get it... */
/* area p1assigned is unique so it won't span multiple rows */
.kanban-plugin__lane-wrapper:nth-of-type(3) {
grid-area: p1assigned;
}
.kanban-plugin__lane-wrapper:nth-of-type(4) {
grid-area: p1active;
}
.kanban-plugin__lane-wrapper:nth-of-type(5) {
grid-area: p1done;
}
/* coloring the 6th lane border and the background for all cards that get put into it: red */
.kanban-plugin__lane-wrapper:nth-of-type(6) {
grid-area: p2assigned;
.kanban-plugin__lane {
border: 1px solid #FF0000;
.kanban-plugin__item-title-wrapper {
background-color: #880000;
}
}
}
/* coloring the 7th lane border and background red (but not the cards) */
.kanban-plugin__lane-wrapper:nth-of-type(7) {
grid-area: p2active;
.kanban-plugin__lane {
border: 1px solid #FF0000;
background-color: #880000;
}
}
/* doing the same with the 8th lane but green */
.kanban-plugin__lane-wrapper:nth-of-type(8) {
grid-area: p2done;
.kanban-plugin__lane {
border: 1px solid #00FF00;
background-color: #004800;
}
}
.kanban-plugin__lane-wrapper:nth-of-type(9) {
grid-area: p3assigned;
}
.kanban-plugin__lane-wrapper:nth-of-type(10) {
grid-area: p3active;
}
.kanban-plugin__lane-wrapper:nth-of-type(11) {
grid-area: p3done;
}
/* since the area "archive" spans several rows in the grid-templates-areas definition so will the lane */
.kanban-plugin__lane-wrapper:nth-of-type(12) {
grid-area: archive;
}
.kanban-plugin__scroll-container.kanban-plugin__horizontal {
overflow-y: auto;
}
i just check one of them. they solve this issue by a layout editor. swim lanes are not draggable but it have option to split, make narrow-wider, add above and below.
Thank you @dequi ! Your workaround works beautifully. In case anyone else stumbles upon this, here's my variation: it creates six columns and three rows, where the first board takes up the entire height, and the other smaller boards scoot together - I also added a negative margin to minimize the height between the rows, although this only seems to work when you view the board in "list view" (can be chosen with the buttons in the top right corner). Technically one could manually adjust this margin for each board if one wants to eliminate all the gaps, although that's probably a bit fiddly, especially for a constantly changing board (although I wonder if there's a better way to do this, where each board "flows up" underneath the one above instead of putting them on a line?) Anyway, the following works well too.
.kanban-plugin__board > div {
display: grid;
grid-template-areas: "first second third fourth fifth sixth"
"first seconde thirde fourthe fifthe sixthe"
"first secondes thirdes fourthes fifthes sixthes";
row-gap: 40px;
column-gap: 10px;
}
.kanban-plugin__lane-wrapper:nth-of-type(1) {
grid-area: first;
}
.kanban-plugin__lane-wrapper:nth-of-type(2) {
grid-area: second;
}
.kanban-plugin__lane-wrapper:nth-of-type(3) {
grid-area: third;
}
.kanban-plugin__lane-wrapper:nth-of-type(4) {
grid-area: fourth;
}
.kanban-plugin__lane-wrapper:nth-of-type(5) {
grid-area: fifth;
}
.kanban-plugin__lane-wrapper:nth-of-type(6) {
grid-area: sixth;
}
.kanban-plugin__lane-wrapper:nth-of-type(7) {
grid-area: seconde;
.kanban-plugin__lane {margin-top: -40px;}
}
.kanban-plugin__lane-wrapper:nth-of-type(8) {
grid-area: thirde;
.kanban-plugin__lane {margin-top: -40px;}
}
.kanban-plugin__lane-wrapper:nth-of-type(9) {
grid-area: fourthe;
.kanban-plugin__lane {margin-top: -40px;}
}
.kanban-plugin__lane-wrapper:nth-of-type(10) {
grid-area: fifthe;
.kanban-plugin__lane {margin-top: -40px;}
}
.kanban-plugin__lane-wrapper:nth-of-type(11) {
grid-area: sixthe;
.kanban-plugin__lane {margin-top: -40px;}
}
.kanban-plugin__lane-wrapper:nth-of-type(12) {
grid-area: secondes;
.kanban-plugin__lane {margin-top: -40px;}
}
.kanban-plugin__lane-wrapper:nth-of-type(13) {
grid-area: thirdes;
.kanban-plugin__lane {margin-top: -40px;}
}
.kanban-plugin__lane-wrapper:nth-of-type(14) {
grid-area: fourthes;
.kanban-plugin__lane {margin-top: -40px;}
}
.kanban-plugin__lane-wrapper:nth-of-type(15) {
grid-area: fifthes;
.kanban-plugin__lane {margin-top: -40px;}
}
.kanban-plugin__lane-wrapper:nth-of-type(16) {
grid-area: sixthes;
.kanban-plugin__lane {margin-top: -40px;}
}
.kanban-plugin__scroll-container.kanban-plugin__horizontal {
overflow-y: auto;
}
Also, thanks @SuperTempAccount for the detailed how-to!
PS. I've set the list width in the settings to 250 - that way I can comfortably have 6 columns on my screen without horisontal scrolling.
PPS. Is there a way to assign a css snippet to a specific board? That way one could have multiple customized boards instead of a general template.
@Gnildryw check out the obsidian cssclasses property https://help.obsidian.md/Editing+and+formatting/Properties#Default+properties . This prepends an additional css class for this one note (or kanban board)
in your note add the yaml property to the header:
---
cssclasses: board1
---
then adjust your csssnippet to
.board1 {
/* your existing css board layout*/
}
then you can add a second css snippet for board2, and so on
@dequi Thank you!
Now I can create only flat kanban boards. I would like to add next dimensions -> slimlines
The is description with examples https://kanbantool.com/support/kanban-board/what-are-swimlanes