Developing with the New User Interface Features in Microsoft

SharePoint Server 2010 Tihomir Ignatov

Senior ConsultantMicrosoft Corporation

Ribbon Dialogs Status bar Notifications

Reusable UI Controls Ribbon

Status Bar

Notification

Dialog

Server Ribbon

Tabs◦Groups

Controls Control (buttons, drop-down menus, check

boxes, combo boxes, split buttons, and galleries) Command

Server Ribbon<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction Id="DemoHelloWorldButton" RegistrationType="List" RegistrationId="101" Location="CommandUI.Ribbon"> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.Documents.New.Controls._children"> <Button Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton" Alt="Hello World Ribbon Button" Sequence="10" Image32by32="/_layouts/images/PPEOPLE.GIF" Command="Demo_HelloWorld" LabelText="Hello World Demo" TemplateAlias="o2"/> </CommandUIDefinition> </CommandUIDefinitions> <CommandUIHandlers> <CommandUIHandler Command="Demo_HelloWorld" CommandAction="javascript:alert('Hello World!');" /> </CommandUIHandlers> </CommandUIExtension> </CustomAction> </Elements>

Server RibbonTihomir IgnatovSenior ConsultantMicrosoft Corporation

DEMO

Server RibbonSharePoint 2010 Extensibility Projects

DOWNLOAD

http://code.msdn.microsoft.com/vsixforsp

Dialogs Ajax based dialog Reduces page refreshes JavaScript client object model SP.UI.ModalDialog From Server Ribbon

Display Dialog

<!-- Define Dialog inline --> <div id="MyDialogDiv" style="display:none; padding:5px"> <input type="text" value="My Dialog" /> <input type="button" value="Ok" onclick="closeMyDialog()" /> </div>

<!-- Open Dialog --> <script language="ecmascript" type="text/ecmascript"> var myDialog; function showMyDialog() { var MyDialogDiv = document.getElementById("MyDialogDiv"); MyDialogDiv.style.display = "block"; var options = { html: MyDialogDiv, width: 200, height: 200 }; myDialog = SP.UI.ModalDialog.showModalDialog(options); } function closeMyDialog() { myDialog.close(); } </script>

DialogsTihomir IgnatovSenior ConsultantMicrosoft Corporation

DEMO

Status Bar

Display persistent information ◦4 predefined background colors

Red: Very Important

Yellow: Important

Green: Success

Blue: Information

Server and client side HTML message format JavaScript client object model SP.UI.Status.addStatus

Status BarTihomir IgnatovSenior ConsultantMicrosoft Corporation

DEMO

Notifications

Show transitory messages Visible for 5 seconds HTML message format JavaScript client object model SP.UI.Notify.addNotification

NotificationsTihomir IgnatovSenior ConsultantMicrosoft Corporation

DEMO

My blog: http://tihomirignatov.blogspot.com Special thanks to Paul Stubbs Sharepoint 2010 Extensibility Projects on MSDN The demo code will be available soon on my blog

Resources & Contacts

Q & A