Easy Kanban Silos in XPages

Recently, I came across this post on the #dominoforever ideas forum:

#dominoforever_post

 

My assumption when reading this is that the OP would like to have this capability in a web application since it’s in the XPages category.  Having done something similar in a previous project, I had some code I could dust off to create a quick demo to show how easily functionality like this can be implemented now in XPages.

The project had “silos” that allowed exactly for what the OP is asking for – drag from one column to another while updating the back end such that when the page is refreshed the “tiles” appear in the correct column.  Each tile represents one Notes document.  I took that, changed a few labels, and called it Kanban Silos:

kanban_silos

Take a look at the working demo and drag and drop from one column to another.  Refresh the page and you’ll see the changes are reflected on disk.  (Note: If multiple people are accessing the demo at the same time the backend may not appear to be updating properly)

How does it work?

  • Start with an XPage that contains the structure of the silos (includes Bootstrap and jQuery)
  • Get data from a view via REST
    • In the ajax callback place the data in the appropriate column based on the status field
  • Drag and drop tiles between columns
    • Once the drag is complete, call another rest service that updates the Notes document in the back end

That’s it!

The Code

If you are using source control in Domino Designer you can get the On Disk Project from GitHub.

Or, just go ahead and download the whole demo database.

Update 3/29

Initially, this was a quick demo  – silos.xsp contained hardcoded silos in raw html.  To make things more Xpage-y, I’ve modified the demo database so that silos.xsp now contains a repeat that looks up to a keyword.

 


Boot your alerts in the … with bootAlert

Unfortunately, due to the sudden illness and ultimate passing of a family member in the fall, it has been quite a while since I last blogged.  Hopefully, this post finds me getting back on the blogging horse to contribute some content to the Xpages/Domino community and bring some ideas I had been kicking around to fruition.

Today I am releasing bootAlert, a simple XPages custom control that allows developers to add configurable, reusable Bootstrap alerts to their apps without having to add any additional plugins.  You should already be using Bootstrap/jQuery in your application in order to use this custom control.

For the past few months, in working on our application migration project, I built a configurable Bootstrap alert custom control.  I found myself continuing to add features as different needs arose.  So, I thought I would release it to the community.

Why bootAlert?

  • bootAlert can be triggered from both server and client-side Javascript
  • bootAlert can use Font Awesome icons
  • bootAlert can be turned into a Growl-like message on-the-fly
  • bootAlert is dynamically configurable – one action may require the 'success' class and another may require a 'warning' or 'danger' notification.  One control can be used to display all three.
  • bootAlert can be customized with css
  • Add as many bootAlert controls to your page as you want
bootAlert with view.postScript

bootAlert can be triggered from server-side js with view.postScript()

bootAlert let's you add Bootstrap Growl messages

bootAlert let’s you add Bootstrap Growl messages to your application

Demo

I plan on submitting this as an OpenNtf project, but for now you can find a demo, as well as download bootAlert here

A github repo can be found here.

Getting Started

Getting started with bootAlert is easy.  Simply:

  • Download the demo database
  • Copy the custom control and script library into your application (or copy the contents of the script library into your existsing client-side script library)
  • Drag the custom control onto your xpage and populate the alertName property
<xc:ccBootAlert alertName="alertDemo2" id="ccBootAlertDemo2"></xc:ccBootAlert>
  • Call bootAlert from client-side js …
// Client side js 
var o = {}
o.title = "Client Side";
o.body = "This alert is being generated by client side javascript";
o.alertType = "danger";
o.alertIcon = "fa-calendar fa-lg"
bootAlert.show('alertDemo2',JSON.stringify(o))
  • or call bootAlert from server-side js by putting a value into a requestScope variable and making sure the bootAlert control is part of the partial refresh target:
// Server side js 
// This method assumes the alert is part of a partial refresh target
var o = {};
o.title = "Server Side";
o.body = "This alert is being generated from ssjs";
o.alertType = "info";
// The requestScope var name should match the alertName given to the bootAlert control
requestScope.put("alertDemo2",o);  
  • Finally, you can use view.postScript() to trigger a bootAlert:
// Server side js
// The alert custom control does NOT need to be part of a partial refresh target
// The parameters being passed to bootAlert need to be serialized
var o = {}
o.title = "Server Side > Client Side";
o.body = "This alert is being triggered by client side js called from server side js";
o.alertType = "warning";
o.autoClose = false;
view.postScript("bootAlert.show('alertDemo2'," + toJson(o) + ")");

I hope others find this control as useful as I have in my projects!