Flat WorkFlowy Lists

I love WorkFlowy. Dump your brain into this versatile web-app. Tame it with intuitive and flexible outlines. Tag to connect the disconnected. Zoom to focus. Power in simplicity. What’s not to love?

While WorkFlowy’s standard tag/text search is great for showing context and relationships, there are times you don’t want the noise of an outline. You just need a simple, flat list.

Meet FlatFlowy.

FlatFlowy is a bookmarklet that hides the “breadcrumb” header, removes indentation, hides parents, and (optionally) hides notes. The result is a simple, flat, distraction-free list when searching for tags or text in WorkFlowy. It works as a toggle; click once for flat lists, and again to return to the standard view. FlatFlowy is compatible with most browsers, even mobile ones.

There are two versions: Show Notes and Hide Notes. Which one you choose will depend on how you structure things in WorkFlowy. You can install both to test (or use). As of version 1.7, you can run both simultaneously; no page reload is required.

I use the Show Notes version, and here’s why: When a search yields a ton of matches, FlatFlowy can dramatically reduce the number of items to scan. You can easily toggle to view context. The Hide Notes version will omit any matches in notes, so you may not see complete search results in flat view.

Post navigation

34 thoughts on “Flat WorkFlowy Lists”

Great to see another tool for Workflowy. This is tantalisingly close to the ultimate use of Workflowy as a todo list whose order can be manually sorted. However, it doesn’t seem to work on my latest version of Chrome for Windows (it does for Firefox). I’ve turned off other styles and scripts, but it still doesn’t work.

Hey Kevin, when you say it doesn’t work in Chrome, do you mean it isn’t creating flat lists, or you are having problems moving items within the flat list?

I should make it clear, I don’t recommend moving items items in flat mode. That would be a great feature, but FlatFlowy works by hiding some elements and moving others. Moving things will not work as expected, if you are able to move things at all.

If the issue is Chrome isn’t showing flat lists, and you’ve disabled other user styles (CSS), the only advice I can think of is to try disabling Chrome extensions.

Well, it seems I am destined to find only harmless bugs. The bookmarklet is working in Chrome now. I think it was a matter of re-starting the browser. I realise about the problem of moving the items around. It would be great eventually to put them into an order that can be worked through. Thanks again for the great tool.

Oh man – THANK YOU!!! I have been waiting for this feature to come to WorkFlowy since I started using it a couple years ago. It’s still not native to WorkFlowy, but this bookmarklet is an awesome enough hack to work for my needs. THANK YOU to all who had a hand in creating and sharing this!!

OK. It seems to be working now. I think it conflicted with the Grammarly extension, which persisted even when I originally disabled all the extensions. BTW, Grammarly also seems to introduce Adware to Chrome, so beware.

Hmm, not sure where the “?pro#” comes from, I just logged out and then back in to my pro account to see if WorkFlowy had changed anything. I didn’t see it. Maybe you have a bookmark that got edited somehow? You should be able to remove the “?pro” from the url (leave the hash) , refresh the page and be good to go.

If this is a WorkFlowy change, there is a surefire way to fix it by editing the FlatFlowy bookmarklet as follows:

• Right Click on the bookmarklet and select Edit.
• Tab to the URL field.
• Type Ctrl+Home to move the cursor to the beginning of the JavaScript
• You should see: “javascript:(function(){var customDomain=’workflowy.com/#’;”
• Simply delete the single ‘#’ character from the WorkFlowy url. (Don’t touch anything else!)
• Save it.

But there is one ongoing issue with Workflowy, which is the inverse of your flat list.

I find if I expand a note and then move to another part of the list, the note remains expanded and overlays other text, making it unreadable. This happens in both Chrome and Firefox. It seems such as bothersome thing I imagine it must have been discussed before, and perhaps there are some work arounds.

I’ve found that it doesn’t work (as in: the ‘flattening’ CSS is not applied) if my tag or text search uses the “-” (NOT) search operator prefix. Can that be fixed?

Alternatively, how might the javascript and/or CSS code be changed so as to eliminate the requirement that one must be searching for tags or text — so that it applies to whatever WorkFlowy view I’m zoomed into?

I should probably add a qualifying note that the current CSS doesn’t work with WorkFlowy’s special search operators. (*done) It is a known issue. There are a set of css class selectors, ‘metaMatches’, that apply to these searches and my first (and only) attempt to add them failed. I gave up pretty quickly, and haven’t looked at it since. So I think there is a solution… it is on my list, but frankly pretty far down at this point.

As far as flattening the normal views, that’s doable and likely easier than the search operators. It’s all CSS. The bookmarklet (as of v1.7) is pretty easy to customize once you have the css. Make a copy of the bookmarklet. Then encode the css in base64… this works great as long as the css isn’t huge. Then replace the base64 code between the quotes in the var css64= with your new code. Each bookmarklet will inject and then toggle its stylesheet on/off. You can have multiple running at once.

Thank you. I appreciate and understand your instructions. Unfortunately, after trying on and off over the past day, I’ve failed to figure out what changes to make to the CSS. I hate to bother you again, but if it wouldn’t be too much trouble, could you provide a little more specifics? Thanks again!

I played a little bit with the -(NOT) operator. It’s not one of the ‘metaMatches’ like “last-changed:” as I assumed. I found everything worked OK with simple examples… like “@tag -#tag”. But as searches got more complex, more terms, more levels of hierarchy… then the problems happen.

So, I don’t have the answer, and frankly not much time to look at it. I suspect it’s probably best addressed by looking at your specific situation. Maybe you could create a shared outline that mirrors your structure and shows the issue. When I have time I can look at that.

No worries, I appreciate that you took any time at all to think about it.

As it happened, after I switched to using Firefox’s development tools instead of Chrome’s, I was able to puzzle out enough CSS to write the rules I needed so that both Search and Regular WorkFlowy views would be flattened.

Moments later, I realized that if I’d only had the wit to combine a (close enough to) universal search term (namely: “a” OR “e” OR “i” OR “o” OR “u” OR “y”) with your FlatFlowy bookmarklet, I could have achieved the same result. Oh well, live and learn!

I understand the appeal of the DL feature set for many, but for me there are many DL features I don’t need and some that slow me down. And to be fair, there are some features I’d like to see in WorkFlowy too.

I know Erica and Shida are actively developing new DL features, so I’d take that request directly to them.

For the Show Notes version, it’s still very odd (and distracting) to see the notes of the parent node. The whole point of FlatFlowy is to reduce the clutter of parent nodes and focus exclusively on the searched-for node (and *its* note). Is this intended functionality, or is it a bug? I’d love to see an update if it’s the latter. Other than this, I really love FlatFlowy! It’s a bit nerve-wracking to try and remember not to move anything around when it’s turned on! 🙂 But it’s simply great! Thanks for putting it together!

Thanks for the feedback. There are a few improvements I’d like to make to FlatFlowy, and I’ll add this to the list. I do know of some scenarios where the current method is preferred to your proposed one, but your request make sense and it’s no biggie to offer a third version. When (and how easy the fix is) are questions I don’t have the answer to right now.

re: moving
You really can’t do any damage by moving stuff. The big issue is that you are blind to the hierarchy, so it can be difficult to be certain where things end up. But you can always use WF’s multiple undo feature to get back to where you began. You’ll find that moving by mouse will be limited to shuffling siblings. You can move items to new parents with the move keyboard shortcuts.

Things get tricky when you activate the move keyboard shortcut and nothing appears to move… in reality it has moved. It’s not difficult to test. Just duplicate one of your items, and try moving it with the keyboard shortcuts. Then click back to default view to see where you are.

I’m curious. Is there a technical reason why, when using FlatFlowy, you can’t open a node’s children? Or did you choose to do that based on experience using it initially? Without thinking too in depth, it seems like it’d be useful, but I’m sure I’m missing something that you’ve already found in practice/in building it.

By the way, I absolutely love that you can easily toggle FlatFlowy on and off. Very handy.

It’s a limitation of the method used. It injects a style sheet that simply moves and hides stuff, as long as the style is active those children will not show. To view children, I zoom or deactivate FlatFlowy.

FWIW, I have talked with Jesse Patel (WorkFlowy co-founder), and he has shown interest in creating this function natively, but that is all I know at this point.