Creating a Dynamic Status Bar in SharePoint

In this quick example I’ll show how you can utilize a SharePoint list and the SharePoint 2010 Status Bar to provide messages to the user, which are dynamically updated every 10 seconds. And since we’ll be using the JavaScript Object Model, we’ll have all of the AJAX goodness we so desire, with minimal amounts of code.

For this example the first thing you will need to do is create a Custom list named Notifications with the following fields:

• Title – Single line of text
• Status – Choice [Active, Closed]
• Priority – Choice [(1) Very Important, (2) Important, (3) Success, (4) Information]

Once you have the list setup go ahead and create a test item (ensuring that all fields are filled in and the status is set to Active), then follow these steps:

• Add a Content Editor Web Part to the homepage of the web where the list was added
• From within the Format Text tab, click the HTML button and select Edit HTML Source
• Paste the following JavaScript into the window and click OK

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

    ExecuteOrDelayUntilScriptLoaded(InitNotifications, "sp.js");

    var tid = setInterval(InitNotifications, 10000); // Reset notifications every 10 seconds

    /* Initialize Client Context */

    function InitNotifications() {

        var clientContext = new SP.ClientContext.get_current();

        var web = clientContext.get_web();

        var notificationsList = web.get_lists().getByTitle('Notifications');

        var camlQuery = new SP.CamlQuery();

        var q = "<View><Query>" +

                    "<Where>" +

                        "<Eq><FieldRef Name=Status /><Value Type=Choice>Active</Value></Eq>" +

                    "</Where>" +

                    "<OrderBy><FieldRef Name='Priority' Ascending='True' /></OrderBy>" +

                "</Query></View>";

        camlQuery.set_viewXml(q);

        this.notifications = notificationsList.getItems(camlQuery);

        clientContext.load(this.notifications);

        clientContext.executeQueryAsync(Function.createDelegate(this, this.onNotificationsLoadSuccess), Function.createDelegate(this, this.onQueryFailed));

    }

    /* Function which runs if the async query succeeds */

    function onNotificationsLoadSuccess(sender, args) {

        var itemCount = notifications.get_count();

        if (itemCount > 0) {

            $("#pageStatusBar").empty();

            var listEnumerator = notifications.getEnumerator();

            while (listEnumerator.moveNext()) {

                var item = listEnumerator.get_current();

                var itemID = item.get_id();

                var itemName = item.get_item("Title");

                var itemPriority = item.get_item("Priority");

                var itemStatus = item.get_item("Status");

                var statusColor = ""

                if (itemPriority == "(1) Very Important")

                    statusColor = "red";

                else if (itemPriority == "(2) Important")

                    statusColor = "yellow";

                else if (itemPriority == "(3) Success")

                    statusColor = "green";

                else if (itemPriority == "(4) Information")

                    statusColor = "blue";

                var strStatusID = SP.UI.Status.addStatus(itemPriority.substring(4) + ":", itemName, false);

                SP.UI.Status.setStatusPriColor(strStatusID, statusColor);

            }

        }

        else {

            SP.UI.Status.removeAllStatus(true);

        }

    }

    /* Function which runs if the async query fails */

    function onQueryFailed(sender, args) {

        alert('Request failed ' + args.get_message() + '\n' + args.get_stackTrace());

    }

</script>

If you did everything right you should see a status bar across the top colored based on the priority that you set.

The only things to really note are that I don’t particularly like loading the jQuery file directly from their site. I would suggest downloading it to a document library and referencing it from there instead. Other than that, you should be able to tweak this to fit your needs. Hope its helpful Image may be NSFW.
Clik here to view.

Note: If you’re having issues copying and pasting this into your Source Editor, you can download the following text file, and copy and paste from there: DynamicStatusBar.txt

The post Creating a Dynamic Status Bar in SharePoint appeared first on MetroStar Systems Blog.