SharePoint 2010 Modal Dialogs – Richer UI’s

1. SharePoint 2010 Modal Dialogs – Richer UI’s By Daryl Human Senior SharePoint Consultant – SharePoint Konsult

2. Introduction • Daryl Human – SharePoint Konsult • ASP.Net Developer for 8+ years • MCTS • SharePoint Consultant for 5+ years • Worked in Finance, Government, Tourism & Banking industries.

3. Presentation Agenda • Introduction to SP.UI.ModalDialog Class • Create a basic popup dialog • Dialog Properties • Adding notifications • Use the OM to create a list. • References • Questions

5. SharePoint Konsult • Specialist in SharePoint delivery and support • A division of SMC Enterprise (Pty) Ltd • SMC - Established in 1999 • Microsoft and SAP Partner status • BEE - AAA Level 1 Empowerdex Rated • Staff compliment of 60. • Operating from Cape Town (Head Office), Johannesburg, Durban and USA

6. Key SharePoint Offerings • ECRM Maturity Assessment • SharePoint Roadmap • Enterprise Content Management (DMS, RMS, Social Networking, Scanning & Imaging, BPM) • Internet, Intranet & Extranet implementations • User Interface/User Experience Services • SharePoint-SAP Integration • Change Management • SharePoint Management Services

7. Our Customers Include: Public Sector Private Sector Old Mutual Woolworths Vodacom Pick n Pay LabCorp (USA) Saudi Aramco (Middle East) Pioneer Foods Foord Asset Management Acsis SharePoint Konsult Luxottica/Sunglasses Hut E-TV • City of Cape Town • City of Tshwane • PetroSA • TCTA • Services Seta • LG Seta • Broadband Infraco • PGWC • W. Cape Provincial Parliament • Parliament of the RSA • SAMSA • CTICC

8. Our Partners Access SharePoint Offline / Outlook Integration • Sync SharePoint sites to laptop • Take document libraries offline SharePoint DRP Management • Data protection • SharePoint storage optimization • SharePoint integration and migration Ontolica Search • Advanced FAST like features without the cost • Full document preview in search results • Detailed search reports AIIM SharePoint Certification Program • Internationally recognized SharePoint training for Business Users

9. The SP.UI.ModalDialog Class • Useful when some sort of administrative feature or user feedback is required. • If you look at the SharePoint 2010, you’ll notice a focus on modal views. • Look at some of the most commonly used properties:

10. SP.UI.ModalDialog Properties • url: Contains the URL of the page that appears in the dialog. • html: Contains the HTML of the page that appears in the dialog. Note: if both url and html are specified, url will be used. You need to specify at least one of the two. • width - The default is 768 if not specified and auto sizing is disabled. • height - The default is 576 if not specified and auto sizing is disabled. • args - Contains an object or other data that can be passed to the dialog. Optional.

11. Creating a basic popup dialog • Live demo

12. Setting Properties for the Dialog • Live demo

13. Adding Notifications • Live demo • // Dialog callback function CloseCallback(result, target) { if (result == SP.UI.DialogResult.OK) { //Get id messageId = SP.UI.Notify.addNotification("<imgsrc='_layouts/images/loading.gif'> Creating list <b>" + target + "</b>...", true, "Dialog response", null); //Create list using client OM //createList(target);} if (result == SP.UI.DialogResult.cancel) { SP.UI.Notify.addNotification("Operation was cancelled...", false, "", null); } }

14. Using the OM to create lists • Live demo

15. References • The SP.UI.ModalDialog Class:http://msdn.microsoft.com/en-us/library/ff408909.aspx • The SP.UI.ModalDialog Properties:http://msdn.microsoft.com/en-us/library/ff410058.aspx • Blog:www.dizzyonsharepoint.wordpress.com • Twitter:@DarylHuman

16. Questions