obsidian-kanban icon indicating copy to clipboard operation
obsidian-kanban copied to clipboard

Swim lanes

Open dariuszkowalski-com opened this issue 3 years ago • 31 comments

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

dariuszkowalski-com avatar Jul 25 '21 23:07 dariuszkowalski-com

+1 for swimlanes! would be awesome

eric-schleicher avatar Feb 04 '22 09:02 eric-schleicher

+1 for swimlanes!

solus-hq avatar Feb 15 '22 08:02 solus-hq

Another +1 for swimlanes! Also, it would be useful to clarify terms between vertical "lists" and horizontal "lanes".

j-u-l-i-u-s avatar Feb 28 '22 13:02 j-u-l-i-u-s

Would like to +1 for this.

b1uegh0st avatar Mar 03 '22 16:03 b1uegh0st

+1 for swimlanes. IMO, It would greatly improve ergonomics, while not being too intrusive on the markdown schema.

g-berthiaume avatar Mar 05 '22 16:03 g-berthiaume

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).

mediapathic avatar Mar 19 '22 02:03 mediapathic

+1

davidusken avatar Mar 19 '22 11:03 davidusken

+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

mreel avatar Mar 30 '22 09:03 mreel

This would be a fantastic addition. Currently, mutliple projects require multiple boards to be maintained .

SuperTempAccount avatar Apr 04 '22 20:04 SuperTempAccount

+1

nuokh avatar Jun 15 '22 09:06 nuokh

Is this still going to happen?

Miigon avatar Aug 05 '22 08:08 Miigon

@mgmeyers I'd be interested to hear the main difficulty you encountered (I'd be happy to help if I can!)

alexisthual avatar Aug 08 '22 12:08 alexisthual

Not a full solution, but a workaround I currently use for those in dire need of swimlanes:

image

  • Create a layout with two vertical panes and devide the second pane in three horizontal panes (these are the swimlanes).
  • Create a kanban-board for each pane/swimlane.
  • Save the layout as a workspace (with the core workspace plugin) so you can get to it quickly.
  • Drag and drop cards at will between all panes/swimlanes.

This just describes the example. You should build a pane layout that suits your personal needs.

Downsides I've come across:

  • Opening links (notes) will take over current active/selected pane; I haven't found how to always open in a new pop-out window yet. For now I make sure the "Main" pane is always selected as this gives the most real-estate to edit the note.

dequi avatar Aug 11 '22 13:08 dequi

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.

Workflow for single-key attributes:

Adding/Editing

  1. In list header edit mode (Edit List) show/add/remove "List Enumerations" option
  2. Add Enumeration / Plus Icon Click
  3. Collect list of options/attribute values via modal and insert between header and first bullet as a semicolon delineated string e.g. High Value; Medium Value; Low Value; No Value
  4. Save list
  • Each enumeration inside of a list that's possible is a newline with values split by a uncommon character
  • Edits will call the selected enumeration, add/remove values/allow enumeration/list deletion (with garbage collection for children?)

Viewing/Editing

  • All cards will be "unbucketed" inside their column by default if they have no matching value to the list defined above.
    • Stretch: User can toggle if buckets appear above/below the un-categorized items?
  • First list of enumerations is default view
  • Button on the top right of Kanban page pop-up modal/drop-down select allows choice of "Group By"
    • Change in "Group By" re-queries the line items in each list and refreshes view, placing in buckets/categories/key-values as needed

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.

JHenzi avatar Aug 22 '22 14:08 JHenzi

+1 for swimlanes !

chromer030 avatar Aug 23 '22 05:08 chromer030

+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.

JHenzi avatar Aug 23 '22 13:08 JHenzi

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 !

promethean avatar Sep 02 '22 11:09 promethean

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
  • MetaEdit

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.

JHenzi avatar Sep 03 '22 12:09 JHenzi

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!

pilgrimstack avatar Oct 14 '22 13:10 pilgrimstack

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!

champagnealexandre avatar Dec 16 '22 15:12 champagnealexandre

@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"}
``
%%

champagnealexandre avatar Dec 16 '22 15:12 champagnealexandre

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.

champagnealexandre avatar Dec 24 '22 18:12 champagnealexandre

Willing to chip in financially to bump this up

ryadaj avatar Jun 27 '23 17:06 ryadaj

Here's a css snippet to wrap cards to multiple rows.

.kanban-plugin__board > div {
    display: flex;
    flex-wrap: wrap;
    row-gap: 40px;
}

digitalsignalperson avatar Jul 22 '23 04:07 digitalsignalperson

I tried the snippet @digitalsignalperson but it didn't allow me to scroll down to see the newly created rows.

ryadaj avatar Jul 22 '23 15:07 ryadaj

This is what the snippet can do as-is: image

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;
}

image

digitalsignalperson avatar Jul 22 '23 16:07 digitalsignalperson

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;
}

image

ChatGPT may be able to help you with other tweaks or ways to split up into rows.

digitalsignalperson avatar Jul 22 '23 16:07 digitalsignalperson

Thank you! This worked fantastically.

Tutorial for those who need more instructions.

  1. Open the Obsidian Settings -> Appearance
  2. Scroll down to CSS Snippets and open the snippets folder image
  3. Right click and create a new text file. Name it kanban-swimlanes.css
  4. Right click and select Edit
  5. Paste the following code in it then save and close (tip: note the number 4 in grid-template-columns. This is the number of lists per swimlane. Change this number to suit your workflow)
.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;
}
  1. Click the Reload snippets button image
  2. Turn on kanban-swimlanes image
  3. Add more lists in your Kanban board. Once you exceed 4 lists, a new swimlane will be added. image

SuperTempAccount avatar Jul 23 '23 22:07 SuperTempAccount

@SuperTempAccount - Perfection! Newb to Obsidian, appreciate the walk thru. Watch out world!

melrauinaz avatar Oct 05 '23 05:10 melrauinaz

@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;
}

image

dequi avatar Nov 18 '23 10:11 dequi