Use the Status Bar to Display Active Workflows

Over the past six months I’ve found myself moving more and more towards using the new Client OM for things that I used to use jQuery and SPServices for.  While I still love SPServices, it is not always required and now that I am getting more knowledgeable about how to do things in the Client OM, things are getting a lot easier (although you have to go back to writing CAML).

After a recent session at SharePoint Saturday The Conference an attendee asked me about ways to show a user they have an open workflow task.  After thinking about it, it was pretty similar to something else I had done recently that involved reading for a SharePoint list and adding an item to the status bar using the Client OM.  This particular request involved a little more code in order to properly filter down the task list, but it works like a charm.  It is important to remember that the client OM only works within the given Site Collection, and this particular code as-is will only look at the site the user is on at the time.

If you want this to display on a single page, you can simply add it to the page. In order to have it show up throughout the site though, you will want to add it to the MasterPage. If the MasterPage is used throughout many sites and or site collections, it will show any open tasks for the specific site.

To start off, we will create a div container. I typically put something like this just inside the tag of the MasterPage. Add in some global variables and then add in the Ajax Execute/Delay command that will call the first method, getUser() when the page is fully loaded.

   <div id="SetStatus"><script type="text/ecmascript" language="ecmascript">
    var url = '';
    var statusId = '';
    var isitDlg = window.location.href.match(/isDlg/i) != null;
    var taskOutput;
    var context = null;
    var web = null;
    var curUser = null;

    if (!isitDlg) {
        ExecuteOrDelayUntilScriptLoaded(getUser, "sp.js");
    }
</script></div>[/sourcecode]   
<p>Next, within the script block we will add the methods to support getUser(). These methods will get the current user's information which is needed to be able to load only the current user's assigned tasks.</p>  
<p>[sourcecode language="js"]  
function getUser() {  	
context = new SP.ClientContext.get_current();  	
web = context.get_web();  	
curUser = web.get_currentUser();  	
curUser.retrieve();  	
context.load(web);  	
context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod), Function.createDelegate(this, this.onFailureMethod)); }   

function onSuccessMethod(sender, args) {  	
var user = web.get_currentUser();  	
LoadNotifications(); 
}   
function onFailureMethod(sender, args) {  	
alert('Error: ' + args.get_message() + 'n' + args.get_stackTrace());  
}  

With the user’s name available we can now read the list items from the local Task List that are active and assigned to the user. If successfull the (ReadListItemSucceeded() method is called otherwise if an error is raised the ReadListItemFailed() is called.

function LoadNotifications() {  	
var listTitle = &quot;Tasks&quot;;  	
context = SP.ClientContext.get_current();  	
var list = context.get_web().get_lists().getByTitle(listTitle);  	
var camlQuery = new SP.CamlQuery();  	
camlQuery.set_viewXml(&quot;&lt;view&gt;&lt;query&gt;&lt;viewfields&gt;&lt;fieldref name=&quot;ID&quot; /&gt;&lt;fieldref name=&quot;Title&quot; /&gt;&lt;fieldref name=&quot;FileDirRef&quot; /&gt;&lt;fieldref name=&quot;StartDate&quot; /&gt;&lt;fieldref name=&quot;DueDate&quot; /&gt;&lt;/viewfields&gt;&lt;where&gt;&lt;and&gt;&lt;eq&gt;&lt;fieldref name=&quot;AssignedTo&quot; /&gt;&lt;value type=&quot;User&quot;&gt;&quot; + curUser.get_title() + &quot;&lt;/value&gt;&lt;/eq&gt;&lt;or&gt;&lt;eq&gt;&lt;fieldref name=&quot;Status&quot; /&gt;&lt;value type=&quot;Choice&quot;&gt;In Progress&lt;/value&gt;&lt;/eq&gt;&lt;eq&gt;&lt;fieldref name=&quot;Status&quot; /&gt;&lt;value type=&quot;Choice&quot;&gt;Not Started&lt;/value&gt;&lt;/eq&gt;&lt;/or&gt;&lt;/and&gt;&lt;/where&gt;&lt;/query&gt;&lt;/view&gt;&quot;);  	
this.listItems = list.getItems(camlQuery);  	
context.load(listItems);  	
context.executeQueryAsync(ReadListItemSucceeded, ReadListItemFailed);  
}  

The returned list of tasks is now processed and the output is prepared. If tasks are prepared, the SetStatus() method is called to show the status bar message.

function ReadListItemSucceeded(sender, args) {  	
var itemCount = 0;  	
taskOutput = &quot; &lt;div id=&quot;tasks&quot;&gt; &lt;table width=&quot;800&quot;&gt; &lt;tbody&gt; &lt;tr style=&quot;font-weight: bold&quot;&gt; &lt;td width=&quot;500&quot;&gt;Task&lt;/td&gt; &lt;td width=&quot;150&quot;&gt;Start Date&lt;/td&gt; &lt;td width=&quot;150&quot;&gt;Due Date&lt;/td&gt;&lt;/tr&gt;&quot;;  	var items = listItems.getEnumerator();          
while (items.moveNext()) {             
itemCount += 1;             
var listItem = items.get_current();             
var isLate = false;             
taskOutput += &quot;&lt;tr&gt;&lt;td&gt;&lt;a href=&quot;&amp;quot; + listItem.get_item(&quot; FileDirRef') + &quot;/DispForm.aspx?ID=&quot; + listItem.get_item('ID') + &quot;' target='_top'&gt;&quot; + listItem.get_item('Title') + &quot;&lt;/a&gt;&lt;/td&gt;&lt;td&gt;&quot; + listItem.get_item('StartDate') + &quot;&lt;/td&gt;&lt;td&gt;&quot; + listItem.get_item('DueDate') + &quot;&lt;/td&gt;&lt;/tr&gt;&quot;;         
}         
taskOutput += &quot;&lt;/table&gt;&lt;/div&gt;&quot;;         
if (itemCount &gt; 0) {             
SetStatus(&quot;Reminder: &quot;, &quot;You have a workflow task! &lt;a href=&quot;javascript:ShowTasks()&quot;&gt;View open Workflow Tasks&lt;/a&gt;&quot;, isLate);         
} 
} 
function ReadListItemFailed(sender, args) {         
alert('Error: ' + args.get_message() + 'n' + args.get_stackTrace()); 
} 

The SetStatus() method shows how simple it is to work with the Client OM. The SP.UI.Status.addStatus call will post the message including the title and the body of the message. We then make a second call to SP.UI.Status.setStatusPriColor to change the color of the bar. Pretty simple, yet so powerfull!

function SetStatus(title, message, isLate) { 	
statusId = SP.UI.Status.addStatus(title, message, false);         
if (isLate) {             
SP.UI.Status.setStatusPriColor(statusId, 'red');         
}         
else {             
SP.UI.Status.setStatusPriColor(statusId, 'yellow');         }     } 

The last method is the ShowTasks method which is the javascript function that is called from within the status messages to show a simple output inside of the Client OM’s ModalDialog. First format the display options for the window and then call the SP.UI.ModalDialog.showModalDialot() method.

function ShowTasks() {  	
var _html = document.createElement('div');  	
_html.innerHTML = taskOutput;  	
var options = { html: _html, autoSize:true, allowMaximize:true, title: 'Open Workflow Tasks', showClose: true };  	
var dialog = SP.UI.ModalDialog.showModalDialog(options);  
}  

Not a lot of code to provide a very usefull solution that does not require anything to be deployed to the server. Below are screenshots of the solution in action.

Open Workflow Tasks Status

Open Workflow Tasks Listing

There are definitely some things that can be done to better format the output of the ModalDialog, but you get the idea. This is just one way to leverage the Client OM for some very useful business features.

Tags: ,

Leave a Comment