Sample Clibu ToDo App with our new Tree

The second release of our new Tree Widget is now online with more new capabilities demonstrated via. a sample ToDo Application.

The UI has been further refined and now adheres to the W3C Web Accessibility Guidelines.

Tree Filters are the number one addition in this release.

Filters enable you to see and work with specific sets of tree items. In the example above only items that include the word car and whose checkbox is checked are displayed.

Ascendant items which don’t match the filter are also displayed, however they are dimmed to visually differentiate them.  You can filter by any or all of the items displayed in the screen shot by clicking on Match All.

Icon, Background Color, Date Created and Date Modified can inverted to Hide items that match, as shown here.

Date Created and Date Modified filters enable you to select from various date ranges.

The Filter button icon changes to a solid color when filters are on.

A long press on the filter button is an alternative to using the Filters menu to toggle filters off/on as shown above.

Another new feature in this release are tree item checkboxes. When checked the text changes to strikethrough. Any descendants also toggle their checkbox state. The Show Checked/Unchecked filter shows or hides checked items.

Next we’ve enhanced the Order menu to enable each view to have its own independent sort order.

Taping the sort button reverses the order for that view.

When Hoisting is active the Hoist button icon changes to a solid color and the tree background color changes.

The palette of icons has increased in this release and all icons have been changed to a lighter outline.

The icon for the selected tree item is highlighted menu the icon picker opens. Likewise for the color picker.

Finally the Settings menu has been added.

The last two menu items are only shown when the application is in debug mode.

As part of the work on accessibility, we’ve implemented comprehensive keyboard support, which also conforms to the accessibility guidelines.

For example the cursor arrow keys navigate the tree and all menus. Tab and Shift Tab move within tree and menu items setting focus on user interface elements, to enable further actions to be taken. Space toggles a checkbox, switch etc., Enter opens a menu associated with a button and Esc works back through previous user interface elements.

I’ve been quite surprised at how poorly most Web applications implement real keyboard support and their lack of accessibility support.

This release, like the previous release, stores all data in a database in your Browser. In the future we’ll include data synchronization across devices and full offline support.

And of course we’ll deliver an application that works on Smartphones, Tablets and the Desktop.

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.

Clibu V2.01.00 Improved color picker, Tab drag & drop, new article styling …

Today we’ve released Clibu V2.01.00 with some nice new UI enhancements and improved article look and feel.

The text and highlight color pickers have been updated with more colors along with a better choice of colors for each task.

We’ve also made it quicker and easier to highlight text by splitting the buttons in two. Clicking on the left part of the button uses the current color on the selected text and clicking on the drop-down arrow lets you choose a color from the color picker.

The updates to the Color picker are important and will enable us to use it in other areas, such as setting Tags tree item colors etc.

When you have lots of Knowledge Bases open, arranging their Tabs in a specific order can be very useful. To accomplish this hold the mouse or your finger (on touch devices) down on the Tab menu icon and drag the Tab to the new location, then release it.

You will also see that we’ve changed the styling of article text along with a change to the default font. Headings styles are the main improvement, giving articles a much more modern look and feel.

Keyboard Help is back. Press Shift+? or click on the Keyboard button on the icon sidebar.

The indicator which displays when an article is loading has been updated to an animated bar, which is less intrusive and looks way better.

An issue with Knowledge Base Sharing Permissions has been fixed enabling them to be changed again.

The Clibu Web Clipper was updated in the last release, which we didn’t blog about at the time.

As always we welcome and look forward to your feedback.

– Neville

 

Clibu V2.00.20 Released, Performance improvements etc.

In today’s Clibu V2.00.20 release you will see Articles display more quickly following an extensive rewrite of the code that handles article display. This affects both the Article and Articles List panels.

Whenever you do a query, we now start by displaying the full Article first and then follow this by updating the Articles List. We also retrieve all the articles for the current page of ‘articles list results’ in one batch, whereas previously we retrieved them in sequence, one after the other.

Going to any Page of results in the Articles List is quicker now.

Prior to this release, the articles list could display an article from the wrong page, when you scrolled rapidly through a large number of articles, using Ctrl+Up/Dn Arrow. This has also been addressed in the rewrite.

We continue to improve Clibu’s usability by minimizing changes to what you see and are working with, when articles are moved to or from Trash or to another Knowledge Base. These include articles moved by another user. In essence we try and maintain the current Articles List and Article views to reduce the impact on your workflow.

We’ll be addressing this further in the case of adding articles, whether by you or another user, via the Web Clipper or Email, in a future release.

The ‘On Premise’ version of Clibu has also been brought up to date and a new release is now available. Contact us though the Help & Support Center for details.

For a full list of changes see the Release Notes.

– Neville

 

New Article Tags menu, enhanced Tabs and more in Clibu V2.00.19

Time got away from us, causing us to miss Blog posts for Clibu V2.00.15 and V2.00.16 which were both released back in March. Both were primarily fixes for various small issues. V2.00.17 and 2.00.18 were internal releases and here we are now with V2.00.19 with a longish list of updates.

New in this release is the Article Tags menu, which opens when you click/tap on a Tag in an article, as shown here.

This new menu speeds up workflow when working with tags. What’s important to note here is that all menu items except Add Tag to Article and Remove Article Tag operate on the selected tag component . So when you click on the Recipes tag, ‘Query’ will run a query on ‘Recipes’ and when you click on Middle Eastern, then Recipes is also selected and the query would be ‘Recipes/Middle Eastern’.

This is a first step in a range of enhancements to make using tags both quicker and easier.

Until now using Knowledge Base Tabs could be a little frustrating, especially when the same KB was open in multiple Tabs. Because you had no idea what the actual content for a Tab was, you were forced to click each Tab until you found the one you wanted.

In this release we’ve enhanced Tabs to include the beginning of the current Articles Title in each Tab, as shown here.

This makes it so much easier to jump straight to the Tab you actually want.

As part of this enhancement we’ve reduced the size of the tab text font and set a maximum tab width, so that more tabs are visible, reducing the need to scroll tabs. The Tab dropdown menu icon has also changed.

Next we’ve updated the Articles List behaviour, so that whenever possible the current list remains unchanged. For example if you click/tap on a ‘See Also’ article link and the target article is in the articles list for the target Tab, the list will stay as is. Previously it would cleared and then include only the target article. By retaining the current context this further improves your workflow.

As part of the Smartphone and Tablet updates we got a little to clever when we managed to get our article content selection toolbar to replace the a native Copy, Paste toolbar. In doing so we prevented Paste from being used.

So in this release the native selection toolbar is displayed where you tap and the Clibu selection toolbar is displayed at the top right corner of the article, so that it can still be used.

 

There is a substantial list of smaller updates, enhancements and bug fixes which you can see in the Release Notes.  One I want to mention is that you should notice articles with images display faster in this release.

In the release notes for V2.00.16 I mentioned that Clibu’s error reporting has had a major update. This has proven very helpful in helping us pinpoint and fix obscure problems as we continue to improve the overall quality of the Clibu code base.

There is plenty more going on behind the scenes, however I’ll leave that for a future blog post.

– Neville

Navigate around Articles with the new Table of Contents in Clibu V2.00.14

Another shiny new Clibu update has been released. The main new feature in V2.00.14 is the ability to access a Table of Contents for each Article, select an item and position to it.

Articles can get quite long and finding what you want inside them can be more difficult than it should be. This is where the Table of Contents (TOC) is very, very useful.

When you click/tap on the new TOC button the current article is scanned and all content that is formatted as headings is gathered and displayed in a drop down menu as shown here.

Note that the numbers 1-10 in this example are in the actual article headings.

Selecting a TOC item scrolls it into view and briefly highlights it, making moving around articles much quicker. Whilst editing the cursor is positioned at the end of the selected item.

When you open Clibu it now restores the current Article to the last article you viewed in each Tab in the previous session. This is in addition to restoring and running the last query.  So you start back exactly where you last left off.

This is something I’ve personally been wanting for a while now. It is all about workflows and getting back in the zone as effortlessly as possible.

Various issues with Clibu’s Annotations (pop up Notes) which crept into V2 have been fixed along with a few illusive, hard to track down and annoying bugs.

See the complete Release Notes for details. which you can also access from the Clibu User Menu.

– Neville

Clibu V2.00.11 Released, Quick Tour, Click to edit are back

This release brings back a few things we temporarily removed when moving from Clibu V1 to Version 2 .

First of all the Quick Tour has been updated and rejigged to work on Smartphones and Tablets. And first time users prompted to start with the Tour.

Next the ability to commence editing an article by clicking anywhere in an article is back, with a new option to enable it.

The new Click in article to edit it option is enabled by default. The reason this was removed in V2 was it gets in the way on touch screen devices, which is why the new option works on devices with a mouse (Desktop PCs), but not with Smartphones and Tablets.

We’ve also updated aspects of the Clibu Web Clipper so that the “Append Clip to Article” Browser context menu item now always uses the current article in the current Tab instead of the last selected article, which was confusing.

When “Append Clip to Article” is used and the current article is being edited, it is now taken out of edit mode so that the new content is appended correctly.

Various other issues and improvements are outlined as always in the Clibu Release Notes which you can access from the Clibu User menu or this link.

– Neville

Clibu V2.00.09, Web Clipper V2, Clibu On Premise V2 – 2018 here we come.

We’ve been very busy working on Clibu over the Christmas New Year break.  Since the initial V2.00.0 release on Dec 5. 2017 and the last Blog post we’ve released six Clibu V2 versions with a range of updates, fixes and new capabilities.

One of the more important and complex updates was moving Clibu from using insecure http to fully secure https, wss and ssl connections to the Clibu server.

We’ve also updated the Clibu Web Clipper to use https, wss so the whole Clibu stack now uses end-to-end secure connections.

Besides enabling Web Clipper https support, we’ve updated it to match the new Clibu V2 look and feel and streamline its user interface.

The new information button displays the url of the server that the Web Clipper is  connected to. This is particular useful if you are using the ‘On Premise’ version of Clibu as you can see whether you are connected to the local On Premise server or our cloud server.

The Web Browser context menu item ‘Append Clip to Article’ shown above  now appends the selected content to the article displayed in the current Clibu KB/Tab.

If Clibu is open in multiple Browser Windows then the most recently displayed article is used for the clip. Previously the currently selected Clibu Article was used, except when the Web Clipper had created a New Article, however this was confusing. and not very intuitive.

Talking of Clibu ‘On Premise’ we’ve now completed upgrading it to Clibu Version 2, or more precisely the V2.00.09 release. So if you are using Clibu On Premise you now get all the new Clibu V2 look, feel and capabilities.

In case you haven’t heard of Clibu ‘On Premise’ it enables you to use Clibu installed on your own PC or Server with all data stored locally and completely in your control. See Clibu – Install and Run Locally for details.

For complete release notes either click on the Clibu User menu and select ‘Release Notes’ or click here.

I think you’ll agree we are off to a good start for 2018 with lots more to come.

All the best for the year ahead.

– Neville

Clibu Version 2, Easier to use and better looking with Smartphone & Tablet support. Pt 1

I’m very pleased to announce the release of Clibu Version 2. This is our biggest release yet, and probably our longest  in development. We’ve changed quite a bit of the look and feel and streamlined a number of areas to enable you to get more done in less time. And as mentioned in the last blog post we now support Tablets and Smartphones as well as Desktop PC’s.

With Clibu V2 we are delivering the same functionality across all devices unlike some applications that provide a sub-set of capabilities on mobile devices, often greatly reducing their overall usefulness.

And because Clibu V2 is a Progressive Web Application it looks, feels and works the same way across all devices. And there are other benefits, for example when the Desktop version gets a new feature, so do the Tablet and Smartphone versions. This happens without you needing to update applications, nor waiting for App Stores to approve new releases.

There is a lot to talk about with this release, which I’ll do over several blog posts.

Let’s start with some screen shots.

This shows the list of all Articles for the ‘Sample’ Knowledge Base. ‘Tag or Text Search’ enables you to filter the list to show just the articles you are interested in.

The three icons in the left icon bar switch between the Knowledge Base, Tags Tree and Articles list panels.

Tap any article in the list to show it or tap the back arrow or swipe left to close the sidebar panel.

Here you see the article selected in the Articles List above. You can edit the article by tapping the green pencil button.

Swipe right to slide open the side panel or tap the hamburger menu at top left.

Tabs switch between open Knowledge Bases, Search and access to the User menu are all located above the article.

This shows the sidebar panel with the Tags Tree selected and the Tag item menu open. From here you can show just the articles for a selected tag, and perform the full set of Tags management functions, such as Add, Rename, Delete, Move etc.

‘Search’ is available on the top bar of each panel and takes you to the Query panel shown above. The new Query panel/dialog is another major update in Clibu V2 and enables both full text search and tags queries in the one convenient place.

When the Query is blank a history list of the most recent full text search as well as the most recently queried tags is displayed. When you start typing the list is filtered to only display matching search history items and tags tree items , as shown above. The icon beside each list item indicates whether it is a text search or tag item.

To perform  a new full text search, type in the search text and either tap ‘Search’ or press Enter. Otherwise tap on a list item to search for it.

That covers quite a bit of ground for Clibu V2 on Smartphones. The user interface for Tablets is essentially the same.

Of course with Tablets we have more screen space available, to put to good use. With the benefit of Clibu V2s responsive design, we are able to optimize the user experience for each device you run it on. Including changes from landscape to portrait mode.

Following along with the user interface changes for Smartphones and Tablets, the Desktop or PC UI has also been improved quite a lot. There are still three independent cascading sidebar panels for Knowledge Base, Tags and Articles unlike the single sidebar on smaller devices. Search has been unified into a single dialog which is much easier to use (see above).

One thing we have done is tone down the use of bold colors to make Clibu easier on the eye. Better looking Tabs, simpler buttons and a generally cleaner look mean Clibu is now more aesthetically pleasing and snappier. More on the Desktop changes in a future blog post.

We still have some issues to resolve on iOS/iPad/iPhone, whose Webkit Browser is unfortunately more challenging to deal with than other Browsers.

And for our Desktop users we’ve temporarily removed the  Quick Tour and Keyboard Help which will reappear in due course.

That’s all for this first Clibu V2 blog post. If you tried earlier versions of Clibu and it didn’t excite you, do give V2 a good workout and let us know what you think. And of course we want to hear from our current users as well.

– Neville

PS. See Clibu V2 Release Notes

Clibu for Smartphones and Tablets is on its way

Our focus with Clibu’s development has been to get it working well on Desktop Web Browsers. Then once we reached that goal we’d move onto providing a full featured Smartphone and Tablet experience.  And that’s precisely what we’ve been working these past few months.

In fact we’ve gone beyond our initial plan and have begun comprehensively updating Clibu to transform it into a Progressive Web Application.

This enables Clibu to automatically adjust its user interface and functionality to run on any screen size from small smartphones, to tablets to desktops, giving you all of Clibu’s capabilities on any device.

This animation shows Clibu on a tablet. You will notice the hamburger menu button at the top left and slide out panel typical on mobile applications.

The top navigation bar has changed and instead of three separate side panels from the Desktop user interface, there is a single panel which changes between Knowledge Base, Tags and Articles.

Apart from what you can see here, nearly all of Clibu’s user interface has been updated to work effectively and efficiently on small screens, while retaining all the Clibu’s functionality you are used to on your Desktop Web Browser.

Next you can see Clibu on a Smartphone. The article editor toolbar changes to occupy a single scrollable row, minimizing screen space. You can also see new round buttons to edit and add articles.

You will also notice the UI for adding a Tag has changed to use the full display area.

All of Clibu’s dialogs work this way when running on phones and tablets. And they scroll vertically to move out of the way of the on-screen keyboard.

Some further UI refinement may be needed, but overall Clibu is now very usable on our small smart devices.

In hindsight it might have been prudent to start with Mobile in mind, however a lot has changed since we started developing Clibu and supporting small screens along with all the developments in PWA’s has come a long way in the last few years.

We are most of the way through development of the next version of Clibu with smartphone and tablet support, however as you can well imagine we have a lot of testing to do, to ensure everything works correctly across devices and their various screen sizes.

We’ve been quiet on  the Blog for a little while and now you know why.

I am excited about the forthcoming release which opens up Clibu to work on all of our devices. Stay tuned.

– Neville