WorkFlowy Bookmarks and Bookmarklets: a Dead-Easy Setup for Your Favorites in Any Browser

blog-book-button

If you’re looking for a simple setup which lets you see your saved searches and bookmarked lists in a tree view… and you’re not up to figuring out text expansion app Hotkeys, then this post is for you.

We’re going to be taking a look at WorkFlowy bookmarks and bookmarklets, which require no more than a drag and drop to your browser’s toolbar. I’ll be throwing a couple of rawbytz’s incredibly useful one-click bookmarklets into the mix. I’d also like to show you a way to view a WorkFlowy-only set of bookmarks whenever you need them.

Look what the cat dragged in

Did you know that you can save any WorkFlowy list or saved search as a bookmark in your browser toolbar? Here are some plusses:

  • They’re accessible while in any of your WorkFlowy lists
  • They stay wherever you put them, in the order you put them
  • You can organize them in tree-based folders
  • You can rename them to whatever you like
  • They’re good to go in any browser of your choice

All you do is drag any WorkFlowy URL to your toolbar to create a new one. In the following GIF you’ll see an example of how to create a saved search bookmark: I search from my home page for all of the changes made to my account within the last minute, using the “last-changed:” operator. I then drag the resulting WorkFlowy URL to my browser toolbar and edit the name of the bookmark:

Last-changed:1 use case

No matter where I am in WorkFlowy, when I click on the newly created bookmark above, it will search from my home page for all changes made in the last minute. And, pray tell, why might I want to search for all changes made within the last minute from my home page??

Rawbytz put me on to this. And it’s really smart. I always have lists that I want to relocate from my home page to somewhere (much) deeper. Look at how I add an empty space to both my target and destination list. Both lists show up when I hit my new bookmark, making it a cinch to transfer my target list:

Growing pains

If you like the idea of quick-access bookmarks, you’ll probably start racking them up. So how to keep them organized – and your toolbar clutter-free? The obvious recourse would be to pop all of your WorkFlowy bookmarks into a WorkFlowy folder in your toolbar. But what if you want an easy-to-reach WorkFlowy-only space for WorkFlowy bookmarks? You’ll want to take a look at this…

Neater Bookmarks

Here’s a nice little discovery: There are dozens of bookmark browser extensions/ add-ons available for whatever browser you hang out in. The example I’m giving below is a Chrome extension called Neater Bookmarks.

  • This allows you to keep your bookmarks toolbar collapsed, while you activate your extension via a keyboard shortcut.
  • You get a popup panel with a tree-view of your bookmarks, expanded and collapsed just the way you last left them.

Above you can see, once again, how I make use of my last-changed:1 saved search bookmark.

rawbytz’s WFcount bookmarklet

Another great thing about the setup in this post is that you can now group your bookmarks and bookmarklets together in one place. A bookmarklet is like a bookmark that contains JavaScript code that acts upon the tab you currently have open.

Here’s rawbytz’s WorkFlowy Count bookmarklet in action. What I’m getting is a count of how many books I’ve sold in week 27. (WFcount can also count time!)

rawbytz’s WorkFindy bookmarklet

There is a chrome extension for WorkFindy, but rawbytz has also created a bookmarklet which you can take anywhere. This is what it does: No matter where you are in WorkFlowy, when you activate this bookmarklet, a popup window will appear where you can enter your search phrase – for which it will search WorkFlowy globally.

In the below GIF you will see that if you highlight a tag, word or phrase before activating WorkFindy, WorkFindy will jump straight to the search from your home page:

Everything in moderation

Now I wouldn’t recommend that you go bookmark crazy. I’d reserve this setup for but a few specialized lists, saved searches and bookmarklets. Otherwise you’d be missing out on putting some other great navigational dynamics into practice. One such example: List Title Tags.


Get EXCLUSIVE bite-sized  WorkFlowy  updates: tips, tricks & news about FREE online workshops with Frank Degenaar. Sign up here.

5 Comments

    1. A lot more could be learned from the comments section in all posts were people to share their M.O. and raise questions about a post’s content 🙂

  1. Thanks for the great tips! They are really helpful.
    On the side note, I liked the color blocks that you are using as shown in GIFs. Can you let me know what those are and what purpose do they serve?

    1. Hi Sumeet,

      The color blocks are stylized tags via the Stylish extension. Here’s a post where I talk about using tags for Life Logging : https://blog.workflowy.com/2016/01/14/lifelogging-tag-count/

      In some cases I just use color tags to visualize priorities. Here’s the code for some simple 3-character tags. You can pop this into Stylish and tag with #gr to get a green tag, #or to get an orange tag, etc.:

      /* GREEN COLOR TAG */
      [ title~=”#gr” ] {
      background-color: #04B404 !important;
      font-family: monospace !important;
      color: #04B404 !important;
      box-shadow: 3px 3px 3px #E6E6E6;
      }

      /* BLUE COLOR TAG */
      [ title~=”#bl” ] {
      background-color: #01A9DB !important;
      font-family: monospace !important;
      color: #01A9DB !important;
      box-shadow: 3px 3px 3px #E6E6E6;
      }

      /* YELLOW COLOR TAG */
      [ title~=”#ye” ] {
      background-color: gold !important;
      font-family: monospace !important;
      color: gold !important;
      box-shadow: 3px 3px 3px #E6E6E6;
      }

      /* ORANGE COLOR TAG */
      [ title~=”#or” ] {
      background-color: orange !important;
      font-family: monospace !important;
      color: orange !important;
      box-shadow: 3px 3px 3px #E6E6E6;
      }

      /* RED COLOR TAG */
      [ title~=”#re” ] {
      background-color: red !important;
      font-family: monospace !important;
      color: red !important;
      box-shadow: 3px 3px 3px #E6E6E6;
      }

      /* BLACK COLOR TAG */
      [ title~=”#bk” ] {
      background-color: black !important;
      font-family: monospace !important;
      color: black !important;
      box-shadow: 3px 3px 3px #E6E6E6;
      }

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

%d bloggers like this: