in

Dot Net Mafia

Group site for developer blogs dealing with (usually) .NET, SharePoint 2013, SharePoint 2010, Office 365, SharePoint Online, and other Microsoft products, as well as some discussion of general programming related concepts.

Kyle Kelin on .Net

November 2009 - Posts

  • Some other UI Hooks in SharePoint 2010

    In my last post I wrote about the Ribbon Control. In this post I’m going to review three new UI features in SP 2010 that SharePoint itself uses but you as a developer can leverage in your own applications.

    Status Bar

    image

    The status bar is for persistent information like page status or version. It will show just below the ribbon control and you can select 4 different background colors. The javascript api is pretty simple:

     

    SP.UI.Notify.addNotification(strHtml, bSticky, tooltip, onclickHandler)

    SP.UI.Notify.removeNotification(id)

     

    Notification Bar

     image

    The Notification bar is less intrusive then the status bar and used for more transient information. By default each message remains on the screen for five minutes. Let’s look at some javascript to add and remove these notifications:

     

    SP.UI.Status.addStatus(strTitle, strHtml, atBeginning)

    SP.UI.Status.updateStatus(sid, strHtml)

    SP.UI.Status.removeStatus(sid)

    SP.UI.Status.removeAllStatus(hide)

    SP.UI.Status.setStatusPriColor(sid, strColor)

     

     

    Dialog Platform

    One of the first things you will notice about SP 2010 is the effort the development team has put forth to reduce the number of page refreshes. One way to do that is to make use of Modal Dialog boxes. Just create a new list item and you will see exactly what I am talking about. You can make use of this Modal Framework using the javascript API. You will pass in another webpage or a DOM element. For example:

     

    function myCallback(dialogResult, returnValue) {alert(“Hello World!”);}

    var options = {url: “/_layouts/somepage.aspx”, width: 500, dialogReturnValueCallback:myCallback};

    SP.UI.ModalDialog.showModalDialog(options);

     

     

    I obtained the information in this post from Elisabeth Olson’s UI Presentation at the SharePoint 2009 Conference.

  • Customizing the Ribbon Control in SharePoint 2010

    image

    The first time I saw the html source of a page with the Ribbon control my mouth started to water thinking about all the possibilities. First the ribbon is rendered as an html list. No tables. So tweaking the styling of this is super easy. Also I have implemented some drag and drop functionality using jQuery and jQuery UI and the most common html I worked with was a html list. Most of the things going through my mind right now are just cool visual effects in that area but having that much control is going to allow for some pretty cool functionality with the ribbon.

     

    Besides jQuery and Javascript there is a built-in way to add elements to the Ribbon control. You simply create a feature and a RibbonButton.xml file. Since I haven’t had too much time with the Beta take a look at this post for more details:

    http://blogs.msdn.com/jfrost/archive/2009/11/06/adding-custom-button-to-the-sharepoint-2010-ribbon.aspx

     

    I obtained the information in this post from Elisabeth Olson’s UI Presentation at the SharePoint 2009 Conference.

2015 dotnetmafia.
Powered by Community Server (Non-Commercial Edition), by Telligent Systems