Vancouver Tech Fest – Creating jQuery Web Parts for SharePoint
It’s always fun to have your presentation laptop completely meltdown the night before your presentation!
Anyways, here are the presentation material and code:
It’s always fun to have your presentation laptop completely meltdown the night before your presentation!
Anyways, here are the presentation material and code:
Excuse the really bad screen cap to the right… the Status Bar and Notifications are two UI elements in SharePoint 2010 which allow us to give the user information in context without distracting them. The Status Bar and Notifications are both exposed as client-side JavaScript APIs.
The Status Bar lives below the Ribbon and displays persistent information such as page status or web site alerts. It already existed in SharePoint 2007 as an UI element but it’s functionality was not exposed as an API. It will display an HTML message, which can include links and/or images, on 1 of 4 pre-set background colours depending on the importance of the status defined.
There is a Server API to set statuses at page render time as well as a JavaScript API to dynamically add/remove messages.
The JavaScript API is in the SP.UI.Status namespace and is as follows:
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)
Notifications are brand new to SharePoint 2010 and they are used for transient or semi-transient messages such as action confirmations. Notifications appear on the right side of the page below the ribbon and default to a 5 second display period. Like the Status Bar, the message format is HTML with the ability of including links and/or images.
There is a JavaScript API to add/remove messages. You also have the option to make a Notification “sticky” which means it will continue to display until you manually remove it through the API.
Notifications are in the SP.UI.Notify namespace:
SP.UI.Notify.addNotification(strTitle, bSticky, tooltip, onclickHandler) SP.UI.Notify.removeNotification(id)
Some of the modules from the Hands-on Labs at SPC are available at the SharePoint Developer Center.
Here’s the list of the modules:
A quickie: no more application.master!
In Microsoft SharePoint Foundation, application pages can now inherit a customized site master page through the DynamicMasterPageFile attribute.
In addition, there are a few pages which have been designated as Safeguarded Application Pages. These are the application pages that have safeguards against a broken master page. If these pages encounter an error when loading the dynamic master page, a safe master page in the _layouts folder is loaded instead.
Check out the documentation on MSDN regarding master pages in SharePoint 2010.
It will be interesting to see how SharePoint Designer (SPD) 2010 fits into our development work flow.
For SharePoint 2007, we had basically avoided SPD 2007 like the plague. It didn’t fit into our Visual Studio development work flow. Almost everything you did from a client-side development perspective was not easily reproducible across sites as the artifacts were basically all unghosted/customized. The actual SharePoint functionality was limited just seemed to be tacked on top of the FrontPage. The HTML editing around customizing master pages and page layouts was slow, buggy and heavy handed as it would arbitrarily change our code.
The interface has been completely overhauled in SPD 2010. Instead of the HTML editing centric interface in SPD 2007, we now have an interface that instead focuses on exposing various SharePoint capabilities to users with less technical expertise. It’s still not something you would deploy to all your users. It really is for your SharePoint power user or site administrator to manage their sites and lists.
SharePoint 2010 sites now have settings to determine what SPD is allowed to do or not do. There are settings to enable SharePoint Designer, enable detaching pages from their site definition, enable customizing master pages and layout pages, and enable managing of the web site URL structure.
The other big thing about SPD 2010 is the ability for it to now create reusable work flows. You can create a work flow and then package it up as a WSP and import it into Visual Studio 2010 for further development. You can also design your work flow in Visio 2010 which is quite interesting.
Check out the SharePoint Designer Team Blog for detailed info on all the new SPD 2010 features.
A busy first day at the SharePoint Conference so I’ll start off with a quickie.
As most of you know already, SharePoint 2010 will use the ribbon interface for editing. I personally like the ribbon from an UI perspective compared with the old editing UI for SharePoint 2007. Some might argue that it’s a bit cluttered and the context sensitive editing may be confusing to new users. I think it’s something that users can grasp in short fashion especially if they use Office 2007 or 2010 as well.
Something that’s new to me in 2010 are the AJAX form dialogs. Pretty much any new item creation is now done in a modal dialog now instead of taking the user to a different form page in 2007. This is great as it keeps everything in context for the user.
An added benefit of the ribbon and form dialogs is that in most cases we no longer have to design for or make design decisions regarding these edit mode elements anymore. They are pretty much separate from the rest of the page from a design perspective.
UPDATE:
I’ll be putting up another post regarding the dialog creation API which is exposed as a JavaScript library in a later post.
The ribbon is extensible as well, you’re able to create new button elements, replace existing elements with customized functionality or remove an element all together.
Dusting off the old blog… expect to see posts on food, jQuery, and SharePoint branding and UI customizations in the near future!
In the mean time, I’ll be heading off to the SharePoint Conference next week.
Hope to see you there!