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

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.

View the FlatFlowy code

Big Hat Tip To: the fabulous Erica Heinz for the original CSS and screenshot. Thanks Erica!

Tips:

  • Flat mode takes effect only while searching for tags or text.
  • You can open two WorkFlowy tabs and keep one flat, one standard.
  • A page refresh (F5) always clears FlatFlowy’s custom stylesheet.
  • FlatFlowy doesn’t work when viewing shared content via a shared link.
  • Important! Don’t move or multi-edit items while viewing a flat list. Since some content is hidden, you could get unexpected results.
  • Launch FlatFlowy with the keyboard in Chrome with this tip.
  • In the Show Notes version, a match in notes will not show a bullet, making clicking on a nonexistent bullet, uh, difficult. Click on the note text and press Alt+Right to zoom from flat mode.
  • FlatFlowy doesn’t work with WorkFlowy’s special search operators.

Desktop Installation:

Drag to the bookmarks bar.

  1. Make sure your bookmarks bar is showing.
  2. Open FlatFlowy’s desktop installation page.

Mobile Installation:

Create and edit the bookmark manually:

  1. Bookmark this page, and save it to your favorites folder.
  2. Select all the code in one of the boxes below and copy it to the clipboard.

    iOS Tip: Press, hold, and release on “javascript” to select it, then gently swipe down on the right grabber, until you see only the left grabber and then copy.

    This version hides notes in flat mode:

    javascript:(function(){version='FlatFlowy v1.8 Hide Notes, CSS_Toggler_v1_2';var cssDomain='workflowy.com';var css64='LyogRmxhdEZsb3d5IFN0eWxlc2hlZXQsIG9yaWdpbmFsIENTUyBieSBFcmljYSBIZWlueiwgaHR0cDovL3N0eWxlYm90Lm1lL3N0eWxlcy84MDg2ICovCgoucGFnZS5zZWFyY2hpbmcgLnByb2plY3QgLm5hbWUgewogICAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Owp9CgovKiBEZWxldGUgZm9yIFNob3cgTm90ZXMgdmVyc2lvbiAqLwoucGFnZS5zZWFyY2hpbmcgLnByb2plY3QgLm5vdGVzIHsKICAgIGRpc3BsYXk6IG5vbmUgIWltcG9ydGFudDsKfQoKLnBhZ2Uuc2VhcmNoaW5nIC5wcm9qZWN0Lm1hdGNoZXMgLm5hbWUubWF0Y2hlcyB7CiAgICBkaXNwbGF5OiBibG9jayAhaW1wb3J0YW50Owp9CgoucGFnZS5zZWFyY2hpbmcgLnNlbGVjdGVkID4gLmNoaWxkcmVuID4gLnByb2plY3QgLnByb2plY3QgewogICAgbWFyZ2luOiAwIDAgNHB4ICFpbXBvcnRhbnQ7Cn0KCi5wYWdlLnNlYXJjaGluZyAuY2hpbGRyZW4gewogICAgbWFyZ2luOiAwICFpbXBvcnRhbnQ7CiAgICBwYWRkaW5nOiAwICFpbXBvcnRhbnQ7CiAgICBib3JkZXI6IDAgIWltcG9ydGFudDsKfQoKLnBhZ2Uuc2VhcmNoaW5nIC5jaGlsZHJlbkVuZCB7CiAgICBoZWlnaHQ6IDAgIWltcG9ydGFudDsKfQ==';var cssLink='data:text/css;base64,'+css64;if(location.href.indexOf(cssDomain)==-1){return;}var ss=document.styleSheets;for(var i=0,max=ss.length;i<max;i++){if(ss[i].href==cssLink){if(ss[i].disabled==false){void(ss.item(i).disabled=true);}else{void(ss.item(i).disabled=false);}return;}}var addStyle=document.createElement('link');addStyle.rel='stylesheet';addStyle.href=cssLink;document.getElementsByTagName('head')[0].appendChild(addStyle);})();

    This version shows notes in flat mode:

    javascript:(function(){version='FlatFlowy v1.8 Show Notes, CSS_Toggler_v1_2';var cssDomain='workflowy.com';var css64='LyogRmxhdEZsb3d5IFN0eWxlc2hlZXQsIG9yaWdpbmFsIENTUyBieSBFcmljYSBIZWlueiwgaHR0cDovL3N0eWxlYm90Lm1lL3N0eWxlcy84MDg2ICovDQoNCi5wYWdlLnNlYXJjaGluZyAucHJvamVjdCAubmFtZSB7DQogICAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Ow0KfQ0KDQoucGFnZS5zZWFyY2hpbmcgLnByb2plY3QubWF0Y2hlcyAubmFtZS5tYXRjaGVzIHsNCiAgICBkaXNwbGF5OiBibG9jayAhaW1wb3J0YW50Ow0KfQ0KDQoucGFnZS5zZWFyY2hpbmcgLnNlbGVjdGVkID4gLmNoaWxkcmVuID4gLnByb2plY3QgLnByb2plY3Qgew0KICAgIG1hcmdpbjogMCAwIDRweCAhaW1wb3J0YW50Ow0KfQ0KDQoucGFnZS5zZWFyY2hpbmcgLmNoaWxkcmVuIHsNCiAgICBtYXJnaW46IDAgIWltcG9ydGFudDsNCiAgICBwYWRkaW5nOiAwICFpbXBvcnRhbnQ7DQogICAgYm9yZGVyOiAwICFpbXBvcnRhbnQ7DQp9DQoNCi5wYWdlLnNlYXJjaGluZyAuY2hpbGRyZW5FbmQgew0KICAgIGhlaWdodDogMCAhaW1wb3J0YW50Ow0KfQ==';var cssLink='data:text/css;base64,'+css64;if(location.href.indexOf(cssDomain)==-1){return;}var ss=document.styleSheets;for(var i=0,max=ss.length;i<max;i++){if(ss[i].href==cssLink){if(ss[i].disabled==false){void(ss.item(i).disabled=true);}else{void(ss.item(i).disabled=false);}return;}}var addStyle=document.createElement('link');addStyle.rel='stylesheet';addStyle.href=cssLink;document.getElementsByTagName('head')[0].appendChild(addStyle);})();
  3. Open the bookmarks menu and edit the bookmark you just created.
  4. Edit the title to whatever you want.
  5. Clear the URL/Address field, and paste the code you copied above.
  6. Save your changes and exit out of the bookmarks menu.

Happy flat flowing!

Advertisements

29 thoughts on “Flat WorkFlowy Lists

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

    Like

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

    Like

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

      Like

  3. This is truly awesome and very useful. One absolutely tiny comment: on the Dropbox page, the two names of the links could be Flatflowy and “Unflatflowy” or something like that…

    This is so useful, and quite surprising that it’s “just” a hack. Big thanks and big ups!

    Like

  4. 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!!

    Like

      1. Working fine here in Chrome Version 48.0.2564.82 m. Let’s try this.

        Right click on the Chrome bookmarklet > Edit > Tab > Ctrl C (to copy the code) > Cancel

        Paste the code in a reply here.

        Like

        1. Sure. I’ve tried it on a different machine but doens’t work as well.

          Here’s the code:

          javascript:(function(){var customDomain=’workflowy.com/#’;var%20customTitle=’FlatFlowy’;var%20customCSS64=’LyogRmxhdEZsb3d5IFN0eWxlc2hlZXQsIG9yaWdpbmFsIENTUyBieSBFcmljYSBIZWlueiwgaHR0cDovL3N0eWxlYm90Lm1lL3N0eWxlcy84MDg2ICovDQoNCi5wYWdlLnNlYXJjaGluZyAucHJvamVjdCAubmFtZSB7DQogICAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Ow0KfQ0KDQovKiBEZWxldGUgZm9yIFNob3cgTm90ZXMgdmVyc2lvbiAqLw0KLnBhZ2Uuc2VhcmNoaW5nIC5wcm9qZWN0IC5ub3RlcyB7DQogICAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Ow0KfQ0KDQoucGFnZS5zZWFyY2hpbmcgLnByb2plY3QubWF0Y2hlcyAubmFtZS5tYXRjaGVzIHsNCiAgICBkaXNwbGF5OiBibG9jayAhaW1wb3J0YW50Ow0KfQ0KDQoucGFnZS5zZWFyY2hpbmcgLnNlbGVjdGVkID4gLmNoaWxkcmVuID4gLnByb2plY3QgLnByb2plY3Qgew0KICAgIG1hcmdpbjogMCAwIDRweCAhaW1wb3J0YW50Ow0KfQ0KDQoucGFnZS5zZWFyY2hpbmcgLmNoaWxkcmVuIHsNCiAgICBtYXJnaW46IDAgIWltcG9ydGFudDsNCiAgICBwYWRkaW5nOiAwICFpbXBvcnRhbnQ7DQogICAgYm9yZGVyOiAwICFpbXBvcnRhbnQ7DQp9DQoNCi5wYWdlLnNlYXJjaGluZyAuY2hpbGRyZW5FbmQgew0KICAgIGhlaWdodDogMCAhaW1wb3J0YW50Ow0KfQ==’;if(location.href.indexOf(customDomain)!==-1){var%20ss=document.styleSheets;for(var%20i=0,max=ss.length;i<max;i++){if(ss[i].title==customTitle){if(ss[i].disabled==false){void(ss.item(i).disabled=true);return;}void(ss.item(i).disabled=false);return;}}addStyle=document.createElement('link');addStyle.rel='stylesheet';addStyle.href='data:text/css;base64,'+customCSS64;addStyle.title=customTitle;document.documentElement.childNodes[0].appendChild(addStyle);}return;})();

          Like

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

    Like

  6. I’ve finally solved two puzzles.

    The bookmarklet doesn’t seem to work for addresses that include pro like https://workflowy.com/?pro#. It works fine without this (now I’m puzzled by what the pro does).

    Second, Grammarly is innocent. It’s the Local-Explorer extension which was the culprit. I had installed this so I could open local files on my desktop. Now I have to find another way to do this.

    Like

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

      Like

  7. Thanks for that. It’s all working perfectly now.

    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.

    Have you come across it? Do you have a remedy?

    Like

  8. Thanks to you (and Erica before you) for this bookmarklet.

    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?

    Like

  9. Thanks for the feedback, Thomas.

    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.

    Like

  10. 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!

    Like

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

      Like

  11. 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!

    Like

    1. FlatFlowy only works when WorkFlowy searches are active. Try clicking on a tag or searching for some text, and then click the bookmarklet a few times to see it in action.

      Another possibility, if you are viewing a shared outline, version 1.7 won’t work. Check the url:

      workflowy.com/s/… = no worky
      workflowy.com/#/… = worky

      I updated FlatFlowy to version 1.8, and it should work on all workflowy urls now. So try that one if you still are having issues.

      Hope that helps!

      Like

  12. This is brilliant. I used to use Workflowy years ago and was put of by not being able to see my top priority items without the ‘background noise’. This is perfect. Thanks for sharing it.

    Like

  13. This is amazing! I transitioned to dynalist and I am trying to get back to workflowy only for this feature.

    Any chance you could adapt it to dynalist one day?

    Like

    1. Very familiar with DL… quick answer: not much chance.

      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.

      Thx for the feedback!

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s