Creating a Dynamic Status Bar in SharePoint

In this quick example I’ll show how you can utilize a SharePoint list and the Status Bar to provide messages to the site, which are dynamically loaded every 10 seconds. And it’s super easy when using the JavaScript Object Model.

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, 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

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