Post on 01-Jun-2015
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