Unveiling our new Clibu Tree Widget

One particular area in Clibu that I’ve not been satisfied with is the Tags Tree, which lacked functionality and was even a step backwards from Clibu’s predecessor, Surfulater. It has shortcomings which make working with the tree more difficult than it need be and it is missing niceties which enhance its usefulness.

So I went back to square one, specified all the requirements I felt were both mandatory and also the ones that would improve its overall usability.  At the same time I took this as an opportunity to reevaluate the underlying code libraries I’d developed Clibu with, as so much has not only changed, but greatly improved in the last few short years.

This has been a terrific experience, one which Clibu and its users will definitely benefit from. Further, this explains why you haven’t seen any new Clibu releases in a little while, nor any activity here on the Blog.

Without further ado let’s run through the new and improved Clibu Tree Widget. First a couple of screenshots. All images are of the same tree content.

Multiple Tree Views

This is the Name View.

This is the Date Created View.

New capabilities

  • Multiple tree views give you different insights:
    • Order by Name (the current Clibu view)
    • Order by Date Created (tree displays, year, month, week, day – tree item(s))
    • Order by Date Modified (tree displays, year, month, week, day – tree item(s))
    • Used defined order. Lets you order siblings (items at the same tree level)  however you want.
  • Rearrange the tree using drag and drop.
  • Sort the current view ascending/descending.
  • Used selectable Tree Icons – displayed to the left of the tree item name.
  • Ability to select the background color for each tree row.
  • Tree item hoisting. Enables any tree item to become the root or top-level item in the tree.
  • Optional Tree lines – for easier tree visualization.
  • Expand/Collapse all descendants.
  • Branch Expand/Collapse state persists across sessions.

Drag and Drop

The ability to rearrange the tree using drag and drop is one of the big improvements, along with different views of the tree.

As you drag a tree item it’s background color changes to green when it can be dropped. If it can’t be dropped a notification is displayed underneath it explaining the reason why as shown here.

When dropping in between items an arrowed line shows the drop location. It is green when the drop is valid and grey when it isn’t.

One view of special note is where you can arrange tree items in any order you want, not just sorted by name.

This shows moving ‘Sustainable Communities’ before ‘Energy Management’. In the Demo this is the byUserDefined view. Switching back to the byName view will display the tree sorted in name order.

Tree Hoisting

Next we’ve added Tree Hoisting which changes the view to show only the selected tree item along with all of its descendants. Hoisting enables you to work on a subset of the tree, in isolation from the tree as a whole.

The Hoist switch instantly toggles back and forth between the hoisted view and the full tree view.

Sort Order

Continuing with tree views is the ability to sort the tree either in ascending or descending order. This works for all tree views.

Highlighting Tree Items

To make specific tree items more prominent you can set their background color and icon.

Etc.

Other nice features include the ability to display tree lines which make it easier to see the shape of the tree. Expand and collapse entire branches with the expand/collapse state maintained independently for each view and retained across sessions.

Demonstration App

We’ve put together a Demonstration app for you to play with. All data is stored in a database in your Browser. There are Demo usage instructions on the app web page.

The Debug checkbox enables us to view any issues that may occur along with some of the app’s inner workings. If an error occurs two additional panels will be displayed, one showing the database and the other the tree. Please send us a screenshot if these are displayed.

The end or just the beginning

The new tree delivers important functionality which will help streamline your use of Clibu. Functionality we’ve developed for the tree, like drag and drop, will over time be incorporated into more parts of Clibu as our journey of continual improvement unfolds.

I hope you like what you see and as always your feedback is greatly appreciated. Please use the comments section below for all feedback including any bug reports.

Tags, Structured or Free Form, Hierarchical or Flat

There are a variety of choices when implementing Tagging systems, each with their own pros and cons.

Free form tags

Free form tags are created as you write. For example you might use a # character to signify a word is a tag. ex. #Christian Or you could use [] to identify multiple word tags, [Cars,Porsche].

The upside here is you are not interrupting the writing flow and they are quick to add. However, they have real downsides. The first is misspellings, so you are likely to have multiple variations of what should be exactly the same tag. Next, content captured from other sources, such as Web clippings, needs to be edited and tags placed somewhere. Finally, as tags are splattered throughout the content, you can’t see all tags in one place.

Managing and updating these free form tags is fraught, as you actually have to modify article content in order to do something simple like rename a tag (e.g. to fix a typo). Articles that are being edited will fall through the cracks as we can’t touch them.

Maintaining an index of which articles contain these embedded tags, along with their in-situ management, is a never ending task, which is expensive in terms of computer processing and performance.

Structured Tags

Structured tags sit beside article content vs. inside it as free form tags do. You add, edit and delete them outside of the article, so your workflow is impinged upon slightly, which may be viewed as a downside.

However, they have none of the drawbacks of free form tags. You never have inconsistent spellings of like tags, as they are easily checked when you add or edit them. They can be instantly renamed or removed without touching article content, regardless of what other users are doing at the time. They are all collected and visible in the one place and processing overhead is absolutely minimal.

Hierarchical Tags

Let’s say you are building a series of articles on Religion and you start adding a tag “Christian”. Then as your work progresses you want to tag articles of interest to your colleagues, one of whom is named “Christian”, woops.

Simplistic single level tagging can’t really help you much here. You could become creative and use “Religion.Christian”, although this falls short in so many ways.

Clibu has excellent Hierarchical Tag support, so this is easily handled. Simply add a tag “Religion” then move “Christian” below it. This happens instantly without having to update any articles. Next add a tag “Colleagues” and under that add a tag “Christian”, all done.

Some applications don’t allow you to use the same tag in multiple branches in the tag hierarchy (ex. Evernote(tm)). So the example above isn’t possible, which is extremely limiting. Clibu doesn’t have this restriction.

Hierarchical Tags as Folders

Everyone is used to Operating System folders, that’s where we store our files. Let’s look back at my earlier example of  tags “Religion / Christian” and “Colleagues/ Christian” and let’s say we have a document which relates directly to both of these. By and large OS folders let us down here as we can’t have the same document in multiple folders. (Power users may take exception at this.)

Back to Clibu. A document or article can have as many tags as you want, so this is akin to having the same document in multiple folders.

In fact, if it suits your way of thinking, simply treat  Clibu’s tags as folders.

Helping with Tag creation

Clibu helps you to pick existing tags via its autosuggestion capabilities. If the tag doesn’t exist, creating it is simple enough.

And there’s a nice tag adding shortcut you can use when editing content. Simply select the text you want for a tag, and then click on the tag icon on the floating toolbar.

If the text already exists somewhere in the tag hierarchy, pick the appropriate entry and it gets added.

If the text doesn’t already exist as a tag, you have the option to create a tag using it. Simple and saves time.

Analyzing article content and suggesting tags to add is, without doubt, a good idea and is something we are thinking about, along with some other interesting tagging ideas.

Tag tedium

Some people find adding tags cumbersome and not worth their effort. Instead they use Search to locate content. Others go back later on, after articles have been created and add the appropriate tags.  With Clibu you can work either way you choose.

I’m personally a heavy tags user, typically with multiple tags per article, several levels down in the hierarchy. To find specific content I use the Tags Filter much more often than Search, but hey, that’s just me.

I’m all tagged out, see you next time.

Neville

PS There will be some new Tag time savers in the next release. 🙂

Clibu V0.91.0.0 with new Web Components

This latest Clibu release focuses on new and improved Article Tagging, Tag Creation, Tag Filtering, autosuggest and new look tags.

The previous implementations have been completely replaced with Web Components.  Web components enable the development of widgets such as the new Clibu autosuggest, that are very easy to reuse both within Clibu and in other applications.

Further the design of these new Web components focuses on widgets that work well on Desktop PC’s as well as on Tablets and Smart phones. The expanding Tags component is an example of this.

When not in use it gets out of the way, occupying a minimum of screen space. It does this without sacrificing usability, simply click  on the button and start typing.

The “New Tag” and “New child Tag” dialogs have also changed. The former to make it quicker and easier to select the parent tag using Tag autosuggest instead of having to scroll through the Tags tree. And the later to make it simpler and clearer.

Further enhancements are planned for the “New Tag” dialog to enable you to add a series of tags  in one go.

Future releases will see the new autosuggest web component used in other areas such as the Knowledge Base menu.

Web Components are very new and have a way to go before they are more widely used and fully implemented in all Web Browsers. That said developing these new components has been a breath of fresh air and I’m excited to see how they evolve and plan to focus future development on them.

Web components are inherently self-contained, which leads to their reusability. With that in mind I’m looking forward to releasing the components I’ve written so far as Open Source, so other developers can use them freely in their applications and in time potentially contribute back and further improve upon the work I’ve done.

In the longer term I’d like to see more and more of Clibu released as Open Source and I see this as a win for Clibu, its users and the broader development community.

On Organizing Content, in Surfulater-NextGen

If you’ve read my earlier posts about Surfulater-NextGen (SNG) you’ll know I’m moving to using Tags as the way to categorize and organize content.

Surfulater’s Folders work pretty well and the ability to have an article in many folders at once is a great feature, which is not often seen. But it also has Tags, which means you have two quite different ways to handle organizing and locating content. And the Tags aren’t hierarchical! Finally putting an article into multiple folders is a little cumbersome.

To simplify and enhance content organization SNG uses Tags exclusively, albeit greatly enhanced from what you currently have. Tags can be nested, letting you use a neatly structured tags hierarchy or tags tree. And you can use as many levels as you want.

Tags Tree

Articles can have as many tags as you want. And Tags aren’t restricted to just a single word, as they are in some systems.

Article Tags
Tags in an article

You enter new tags in the Add Tags field.

The Auto-suggest dropdown list makes it easy to add the tags you want, including adding multiple tags at once and removing existing tags.

Tags Auto-suggest dropdown

If a tag doesn’t exist, click on Create to add it.

Create a new Tag

In this example I want to add a tag named XBMC. The Tags tree lets you select the parent Tag for this new tag. A given tag can be added to as many tree branches as you want.

This should give you a good overview of some of the Tags capabilities in SNG. I’ll continue with more on Tags in the next blog post.

Clearly I’ve been remiss in not posting on the blog in way too long, likely a record for me. Part of the reason is that I’ve simply had my head down working hard on SNG. I’m working on a lot of minutia and haven’t felt that I’ve had a lot to say, but in fact there is.  I’ve already got the next post in my head, and there is quite a bit I can’t write about I just need to force myself to do.

All the best,
Neville